केवल क्रोम पर विशिष्ट सीएसएस नियम कैसे लागू करें?

Question

क्या divकेवल Google क्रोम में निम्नलिखित सीएसएस को एक विशिष्ट तरीके से लागू करने का एक तरीका है ?

position:relative;
top:-2px;

Comments

के संभावित डुप्लिकेट कैसे एक क्रोम / ओपेरा विशिष्ट स्टाइलशीट करना है?

— याकूब

आप किस मुद्दे का सामना कर रहे हैं जो आपको ऐसा करने के लिए मजबूर करता है। विशिष्ट ब्राउज़रों के लिए सीएसएस नियमों को लक्षित करना महान डिजाइन नहीं है और ज्यादातर मामलों में, आजकल किसी भी आवश्यक नहीं होना चाहिए।

— पेका

@Pekka यह मेरा मुद्दा है stackoverflow.com/questions/9311965/… , और मैंने पाया कि एकमात्र समाधान उन लोगों को जोड़ना है, लेकिन केवल क्रोम के लिए, कृपया मदद करें :(

— user1213707

क्या आपके मूल प्रश्न का उत्तर मदद नहीं करता था?

— पेका

व्यक्तिगत रूप से मैं क्रोम के लिए विकसित होता हूं (जो फ़ायरफ़ॉक्स पर कॉपी करने के लिए जाता है) और अंत में आईई के बारे में चिंता करना।

— SpaceBeers

Answer 1

सीएसएस समाधान

से https://jeffclayton.wordpress.com/2015/08/10/1279/

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

जावास्क्रिप्ट समाधान

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}

Comments

यह नियम सफारी और क्रोम

— मिरंगा

@AlirezaNoori शायद इसलिए क्योंकि यह क्रोम ही नहीं बल्कि क्रोम और सफारी दोनों पर लागू होता है ।

— thom_nic

यह IE एज में भी काम करता है, इस jeffclayton.wordpress.com/2015/08/10/1279

— llamerr

मैंने data-ng-classकोणीय के लिए इस्तेमाल किया और .chromeजेएस अभिव्यक्ति के साथ एक वर्ग जोड़ा । एक जादू की तरह काम किया। धन्यवाद

— क्रैकेन

मैंने पाया कि यह मीडिया के प्रश्नों को सबसे नीचे लाने में मदद करता है।

— ब्राउन सिप

Answer 2

जैसा कि हम जानते हैं कि क्रोम एक वेबकिट ब्राउज़र है, सफारी एक वेबकिट ब्राउज़र भी है, और ओपेरा भी है, इसलिए मीडिया प्रश्नों या CSS हैक का उपयोग करके Google Chrome को लक्षित करना बहुत कठिन है, लेकिन जावास्क्रिप्ट वास्तव में अधिक प्रभावी है।

यहाँ जावास्क्रिप्ट कोड का टुकड़ा है जो Google Chrome 14 और बाद में लक्षित करेगा,

  var isChrome = !!window.chrome && !!window.chrome.webstore;

और नीचे उपलब्ध ब्राउज़र हैक की एक सूची है, उस हैक द्वारा प्रभावित ब्राउज़र सहित Google क्रोम के लिए

WebKit हैक:

.selector:not(*:root) {}

• Google Chrome : सभी संस्करण
• सफारी : सभी संस्करण
• ओपेरा : 14 और बाद में
• Android : सभी संस्करण

Hacks का समर्थन करता है:

@supports (-webkit-appearance:none) {}

Google Chrome 28 और Google Chrome> 28, ओपेरा 14 और ओपेरा> 14

• Google Chrome : 28 और बाद में
• ओपेरा : 14 और बाद में

संपत्ति / मूल्य भाड़े:

.selector { (;property: value;); }
.selector { [;property: value;]; }

Google Chrome 28 और Google Chrome <28, Opera 14 और Opera> 14, और Safari 7 और 7. से कम - Google Chrome : 28 और इससे पहले - Safari : 7 और इससे पहले - ओपेरा : 14 और बाद में

जावास्क्रिप्ट भाड़े: 1

var isChromium = !!window.chrome;

• Google Chrome :सभी संस्करण
• ओपेरा : 14 और बाद में
• Android : 4.0.4

जावास्क्रिप्ट भाड़े: 2 {वेबकिट}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

• Google Chrome :सभी संस्करण
• सफ़ारी : 3 और बाद में
• ओपेरा : 14 और बाद में

जावास्क्रिप्ट भाड़े: 3

var isChrome = !!window.chrome && !!window.chrome.webstore;

• Google Chrome : 14 और बाद में

मीडिया क्वेरी Hacks: 1

@media \\0 screen {}

• Google Chrome : 22 से 28
• सफ़ारी : 7 और बाद में

मीडिया क्वेरी Hacks: 2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

• Google Chrome : 29 और बाद में
• ओपेरा : 16 और बाद में

अधिक जानकारी के लिए कृपया इस वेबसाइट पर जाएँ

Comments

जैसा कि सेबस्टियन ने @supports (-webkit- उपस्थिति: कोई नहीं) {} सफारी को प्रभावित करता है, v.10 पर परीक्षण किया

— दिमित्री

@supports (-webkit-appearance:none) { }अब MS Edge के लिए काम कर रहा है।

— वादिम ओविचनिकोव

@मीडिया सभी और (-webkit-min-device-pixel-ratio: 0) और (न्यूनतम-रिज़ॉल्यूशन: .001dpcm) {.selector {}} अब फ़ायरफ़ॉक्स को भी प्रभावित करता है

— जो

Answer 3

क्रोम> 29 और सफारी> 8 के लिए एक अपडेट:

सफारी अब सपोर्ट करती है @supports फीचर का भी है। इसका मतलब है कि उन हैक्स भी सफारी के लिए मान्य होगा।

मैं सलाह दूँगा

@ http://codepen.io/sebilasse/pen/BjMoye

/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  p {
    color: red;
  }
}

Comments

मेरे लिए पाठ फायरफॉक्स में भी लाल है।

— केरी7777

Answer 4

यह सीएसएस ब्राउज़र चयनकर्ता आपकी मदद कर सकता है। जरा देखो तो।

CSS Browser Selector एक बहुत छोटी जावास्क्रिप्ट है जिसमें सिर्फ एक लाइन होती है जो CSS चयनकर्ताओं को सशक्त बनाती है। यह आपको प्रत्येक ऑपरेटिंग सिस्टम और प्रत्येक ब्राउज़र के लिए विशिष्ट CSS कोड लिखने की सुविधा देता है।

Comments

घोषणा "सीएसएस ब्राउज़र चयनकर्ता" एक साधारण जावास्क्रिप्ट के लिए थोड़ा भ्रमित है। CSS स्वयं ब्राउज़र द्वारा किसी भी चयन का समर्थन नहीं करता है!

— आर्मिन

क्षमा करें, लेकिन इसके निर्माता ने इसे कहा है। मैंने अभी उन्हें उद्धृत किया है :(

— तारशीश

लेखक का बहुत ही कठोर वाक्यांश ;-)

— आर्मिन

सुनो, वास्तव में सिर्फ इसके लिए js का एक पूरा भार नहीं जोड़ना चाहते: (लेकिन अन्यथा उपयोगी हो सकता है।

— जेमी हटबर

मुख्य समस्या यह है कि यह विफलता का एक नाजुक एकल बिंदु बन जाता है क्योंकि यह एक एकल प्रोग्रामर के समर्पित होने पर निर्भर है, और यह कि किसी को अपने परिवर्तनों को ट्रैक करने की आवश्यकता होगी। मूल रूप से, एक चल रहे मुद्दे से निपटने के लिए एक संदिग्ध तरीका, जबकि यह अल्पावधि में मदद कर सकता है, यह समस्या को हल नहीं करता है।

— पतंजलि

Answer 5

http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html

केवल .selector:not(*:root)अपने चयनकर्ताओं के साथ प्रयोग करके क्रोम के लिए विशिष्ट सीएसएस नियम लागू करें :

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}

<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>

Comments

इस हैक ने मेरे लिए काम किया। स्क्रीन रिज़ॉल्यूशन पर भरोसा करने वाले समाधान फ़ायरफ़ॉक्स के साथ-साथ प्रभावित हुए।

— स्टीव ब्रेस

@stevebreese ने इसे नोट किया, मुझे संदेह है कि यह केवल आधुनिक ब्राउज़रों के लिए है।

— शाशा

Answer 6

एक ऐसे उदाहरण के रूप में कभी नहीं चला है जहाँ मुझे अब तक क्रोम-केवल सीएसएस हैक करना था। हालाँकि, मुझे यह एक स्लाइड शो के नीचे सामग्री को स्थानांतरित करने के लिए मिला जहां स्पष्ट: दोनों; क्रोम में कुछ भी प्रभावित नहीं हुआ (लेकिन हर जगह ठीक काम किया - यहां तक ​​कि IE!)।

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome, if Chrome rule needed */
    .container {
     margin-top:100px;
    }

    /* Safari 5+ ONLY */
    ::i-block-chrome, .container {
     margin-top:0px;
    }

Answer 7

अगर आप चाहते हैं कि हम विशिष्ट ब्रॉउज़र को देख सकें, तो [फिडल लिंक] [1] [1]:

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});

.relative {
  background-color: red;
  height: 30px;
  position: relative;
  width: 30px;
}
.relative .child {
  left: 10px;
  position: absolute;
  top: 4px;
}
.oc {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 500px;
  float:left;
}
.oc1 {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 300px;
  float:left;
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="relative">
<span class="child">
  ○
</span>
</div>
<div class="oc">
<div class="data"> </div>
</div>
<div class="oc1" style="display: block;">
<div class="data"> </div>
</div>

Answer 8

मैं क्रोम शैलियों के लिए एक सैस मिक्सिन का उपयोग कर रहा हूं, यह Chrome 29+ऊपर मार्टिन क्रिस्टियनसन से समाधान उधार लेने के लिए है।

@mixin chrome-styles {
  @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-resolution:.001dpcm) {
      @content;
  }
}

इसे इस तरह उपयोग करें:

@include chrome-styles {
  .header { display: none; }
}

Comments

फ़ायरफ़ॉक्स अब इस नियम को भी पढ़ता है, इसलिए यदि आप पूरी तरह से क्रोम को लक्षित करना चाहते हैं तो यह अच्छा नहीं है।

— महन

Answer 9

Chrome केवल इसके लिए CSS परिभाषाएँ सेट करने के लिए कोई भी शर्त नहीं प्रदान करता है! ऐसा करने की आवश्यकता नहीं होनी चाहिए, क्योंकि Chrome इंटरप्रेट करता है जैसे कि w3c मानकों में परिभाषित वेबसाइटें।

तो, आपके पास दो सार्थक संभावनाएं हैं:

1. जावास्क्रिप्ट द्वारा वर्तमान ब्राउज़र प्राप्त करें ( यहां देखें) )
2. Php / serveride द्वारा वर्तमान ब्राउज़र प्राप्त करें ( यहां देखें) )

Comments

निश्चित रूप से ऐसे कारण हैं कि आप क्रोम पर क्यों लागू करना चाहते हैं, लेकिन जैसे कि सफारी या फ़ायरफ़ॉक्स, उदाहरण के लिए कि ब्राउज़र <रेंडर> तत्वों को कैसे प्रस्तुत करता है, इसमें अंतर। सर्वर-या क्लाइंट-साइड कोड को शामिल करने की तुलना में सीएसएस-केवल समाधान बहुत क्लीनर होगा।

— thom_nic

क्रोम सही नहीं है। सॉफ़्टवेयर के किसी अन्य टुकड़े की तरह ही इसमें रेंडरिंग इंजन सहित बग हैं, और कुछ कुछ वर्षों के बाद तय नहीं किए गए हैं। तो उन बगों के प्रभावों का मुकाबला करने के लिए क्रोम का पता लगाने में सक्षम होना महत्वपूर्ण है। Bugs.chromium.org/p/chromium/issues/…

— जो सालाजार

Answer 10

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

मेरे लिए यह काम देखें।

Answer 11

बहुत आसन। लोड समय पर तत्व में एक दूसरा वर्ग या आईडी जोड़ें जो यह निर्दिष्ट करता है कि यह कौन सा ब्राउज़र है।

तो मूल रूप से सामने के छोर पर, ब्राउज़र का पता लगाएं, फिर आईडी / क्लास सेट करें और आपके सीएसएस को उन ब्राउज़र विशिष्ट नोड्स का उपयोग करके बीफ़ कर दिया जाएगा