css - सीएसएस के साथ केवल फ़ायरफ़ॉक्स को लक्षित करना




firefox css-hack (7)

सशर्त टिप्पणियों का उपयोग करना ब्राउज़र-विशिष्ट सीएसएस नियमों के साथ इंटरनेट एक्सप्लोरर को लक्षित करना आसान है:

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

कभी-कभी यह गीको इंजन (फ़ायरफ़ॉक्स) है जो गलत व्यवहार करता है। केवल अपने फ़ायरफ़ॉक्स को अपने सीएसएस नियमों के साथ लक्षित करने का सबसे अच्छा तरीका क्या होगा और एक अन्य ब्राउज़र नहीं? यही है, न केवल इंटरनेट एक्सप्लोरर को फ़ायरफ़ॉक्स-केवल नियमों को अनदेखा करना चाहिए, बल्कि वेबकिट और ओपेरा को भी चाहिए।

नोट: मैं एक 'साफ' समाधान की तलाश में हूं। मेरे एचटीएमएल में 'फ़ायरफ़ॉक्स' कक्षा जोड़ने के लिए एक जावास्क्रिप्ट ब्राउज़र स्निफ़र का उपयोग करना मेरी राय में साफ नहीं है। मैं कुछ ऐसा देखना चाहता हूं जो ब्राउज़र क्षमताओं पर निर्भर करता है, सशर्त टिप्पणियों की तरह आईई के लिए केवल 'विशेष' है ...


-इनिन विशिष्ट नियमों का उपयोग प्रभावी ब्राउज़र लक्ष्यीकरण सुनिश्चित करता है।

<style type="text/css">

    //Other browsers
    color : black;


    //Webkit (Chrome, Safari)
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        color:green;
    }

    //Firefox
    @media screen and (-moz-images-in-menus:0) {
        color:orange;
    }
</style>

//Internet Explorer
<!--[if IE]>
     <style type='text/css'>
        color:blue;
    </style>
<![endif]-->

अब फ़ायरफ़ॉक्स क्वांटम 57 काफी हद तक बाहर है - और संभवतः ब्रेकिंग - गेको को सामूहिक रूप से स्टाइलो या क्वांटम सीएसएस के रूप में जाना जाता है, आप खुद को ऐसे परिस्थिति में ढूंढ सकते हैं जहां आपको फ़ायरफ़ॉक्स और फ़ायरफ़ॉक्स क्वांटम के विरासत संस्करणों के बीच अंतर करना होगा।

मेरे उत्तर से here :

आप @-moz-document संयोजन के साथ @-moz-document @supports calc(0s) अभिव्यक्ति के साथ @supports उपयोग कर सकते हैं, स्टाइलो के लिए परीक्षण करने के लिए - गेको calc() अभिव्यक्तियों में समय मानों का समर्थन नहीं करता है लेकिन स्टाइलो करता है:

@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}

यहां एक सबूत-अवधारणा है:

body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}

फ़ायरफ़ॉक्स के लक्ष्यीकरण विरासत संस्करणों को थोड़ा मुश्किल है - यदि आप केवल उन संस्करणों में रूचि रखते हैं जो @supports समर्थन @supports , जो Fx 22 और ऊपर है, @supports not (animation: calc(0s)) आपको केवल इतना ही चाहिए:

@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}

... लेकिन यदि आपको पुराने संस्करणों का समर्थन करने की आवश्यकता है, तो आपको ऊपर की सबूत-अवधारणा में दिखाए गए अनुसार, कैस्केड का उपयोग करना होगा।


ऐसा करने का एकमात्र तरीका विभिन्न सीएसएस हैक्स के माध्यम से है, जो आपके पृष्ठ को अगले ब्राउज़र अपडेट पर विफल होने की अधिक संभावना बना देगा। यदि कुछ भी हो, तो यह एक जेएस-ब्राउज़र स्निफ़ेर का उपयोग करने से कम सुरक्षित होगा।


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

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>

यह अभी तक एक और मोज़िला विशिष्ट सीएसएस एक्सटेंशन पर आधारित है। इन सीएसएस एक्सटेंशन के लिए यहां एक पूरी सूची है: मोज़िला सीएसएस एक्सटेंशन


फ़ायरफ़ॉक्स ब्राउज़र को लक्षित करने के लिए यहां कुछ ब्राउज़र हैक हैं,

चयनकर्ता हैक्स का उपयोग करना।

_:-moz-tree-row(hover), .selector {}

जावास्क्रिप्ट हैक

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

मीडिया क्वेरी हैक्स

यह फ़ायरफ़ॉक्स 3.6 और बाद में काम करेगा

@media screen and (-moz-images-in-menus:0) {}

अगर आपको अधिक जानकारी चाहिए, तो कृपया browserhacks पर browserhacks


यहां तीन अलग-अलग ब्राउज़रों से निपटने का तरीका बताया गया है: आईई, एफएफ और क्रोम

<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
    width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
    #categoryBackNextButtons{
        width:486px;
    }
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
    width:486px;
}
</style>
<![endif]-->

अपडेट किया गया (@ एंटोनी टिप्पणी से)

आप @supports उपयोग कर सकते हैं

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}
<h1>This should be red in FF</h1>

here @supports पर अधिक





css-hack