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

Question

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

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

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

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

Comments

कुछ इसी तरह के सवालों को देखना चाहते हैं और संबंधित उत्तर ... stackoverflow.com/questions/738831/…

— AnonJr

वहाँ एक विंडोज़ मशीन बनाम एक मैक पर फ़ायरफ़ॉक्स को लक्षित करने का कोई तरीका है?

— केगन क्विम्बी

<! - [अगर गेको]> ... शामिल करें ... <! [endif] ->

— परिभाषित करता है

Answer 1

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

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

<h1>This should be red in FF</h1>

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

Comments

"@ -मोज़-डॉक्यूमेंट" के बाद url-prefix () का वास्तव में क्या मतलब है? बस उत्सुक।

— मैट

@ मैट, यह उन वेबसाइटों को फ़िल्टर करने का एक तरीका है जिन पर CSS लागू किया गया है। एक अन्य विकल्प domain()फिल्टर का उपयोग करना है । उदाहरण के लिए @-moz-document domain(google.com) {...}संलग्न CSS नियम केवल google.com डोमेन पर लागू होंगे।

— आयनू जी। स्टेन

मुझे पसंद है कि कैसे आप इस तरह के लिए एक पूरी तरह से नया सीएसएस दस्तावेज़ बनाने के लिए नहीं है जैसे आप IE के लिए करते हैं।

— जद इसाक्स

@JohnIsaacks आपको IE सशर्त टिप्पणियों के लिए एक अलग स्टाइलशीट की आवश्यकता नहीं है। वे इनलाइन हो सकते हैं। आप इसे इस तरह से करना चाहते हैं कि एक और सवाल है।

— डायलन

यह ध्यान देने योग्य है कि यह वर्कअराउंड फ़ायरफ़ॉक्स 59 के रूप में काम नहीं करता है , मार्च 2018 को रिलीज़ किया गया: Bugzilla.mozilla.org/show_bug.cgi?id=1035091

— जॉर्डन ग्रे

Answer 2

अपडेट किया गया (@Antoine टिप्पणी से)

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

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}

<h1>This should be red in FF</h1>

यहाँ पर और अधिक@supports

Comments

यह @ -मोज़-दस्तावेज़ url- उपसर्ग () उदाहरण की तुलना में बहुत अच्छा समाधान है, यह SCSS पार्सर के साथ भी अच्छा खेलता है जबकि दूसरा नहीं।

— एलिस्टेयर हॉजसन

मैं फ़ायरफ़ॉक्स का उपयोग कर रहा हूं और यह अभी भी सफेद है, क्या यह उस संस्करण के कारण है जिसका मैं उपयोग कर रहा हूं?

— एंटोनी

@ एंटोनी आप सही हैं! यह एफएफ के नवीनतम संस्करणों के लिए काम नहीं किया। मैंने अपना उत्तर अपडेट कर दिया। यह अब काम करना चाहिए। इसे इंगित करने के लिए Thanx!

— लालापोस्टो

Answer 3

यहां तीन अलग-अलग ब्राउज़रों से निपटने का तरीका बताया गया है: IE, FF और Chrome

<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]-->

Comments

अगर मैं इसे सही ढंग से समझता हूं, तो शीर्ष क्रोम नहीं है, लेकिन बस डिफ़ॉल्ट व्यवहार को निर्दिष्ट करता है जिसे आप फ़ायरफ़ॉक्स और IE के लिए ओवरराइड करते हैं।

— मुहाद

बहुत उपयोगी। एक पूर्व फ़ायरफ़ॉक्स प्रेमी के रूप में, मुझे पता है कि मुझे फ़ायरफ़ॉक्स विशिष्ट हैक इस तरह से करना है, लेकिन जब तक यह काम करता है मैं इसके साथ रह सकता हूं।

— स्पेसबियर्स

यदि आप इसे एक .css फ़ाइल में जोड़ना चाहते हैं तो IE का पता लगाने का सुझाव काम नहीं करता है। यद्यपि आप HTML में इस तरह से स्टाइलशीट को शामिल कर सकते हैं। यदि आप एक सीएसएस फ़ाइल में IE CSS रखना चाहते हैं, तो मैं यहाँ देखने की सलाह देता हूं: keithclark.co.uk/articles/…

— Biepbot Von Stirling

Answer 4

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

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

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

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

var isFF = !!window.sidebar;

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

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

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

यह काम करने वाला है, फ़ायरफ़ॉक्स 3.6 और बाद में

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

यदि आपको अधिक जानकारी की आवश्यकता है, तो कृपया ब्राउज़रशेक पर जाएं

Comments

क्या आप "चयनकर्ता हैक्स का उपयोग कर" पर थोड़ा और विस्तृत कर सकते हैं और इस पर कि आपने विशेष रूप से कैसे काम किया है? धन्यवाद।

— jj_

ठीक है यह अपने आप मिल गया: मूल रूप से यह जो करता है वह दूसरे ब्राउज़रों के लिए दूसरे चयनकर्ता को छिपा रहा है जो पहले एक को नहीं समझता है। इस मामले में केवल मोज़िला समझता है, _:moz-tree-row(hover)इसलिए यह एकमात्र ऐसा होगा जो .selector{}आने वाले को संसाधित करने में सक्षम होगा । यह विशिष्ट हैक वर्तमान में फ़ायरफ़ॉक्स के सभी संस्करण पर काम करता है, इस पर अधिक के लिए browserhacks.com की जाँच करें।

— jj_

मैंने मीडिया क्वेरी हैक: \ @media स्क्रीन और (-moz-images-in-menu: 0) {} का उपयोग किया, यह अच्छी तरह से \ @media स्क्रीन और (-webkit-min-device-pixel-ratio: 0) के साथ जाता है। विजुअल स्टूडियो इसका उपयोग करते हुए चेतावनी नहीं देता है।

— Dan Randolph

कृपया ध्यान दें -moz-images-in-menu: 0 फ़ायरफ़ॉक्स 52 में हटा दिया गया है - Bugzilla.mozilla.org/show_bug.cgi?id=1302157

— jonathanKingston

Answer 5

सबसे पहले, एक अस्वीकरण। मैं वास्तव में नीचे प्रस्तुत समाधान की वकालत नहीं करता। केवल ब्राउज़र विशिष्ट सीएसएस जो मैं लिखता हूं वह IE (विशेष रूप से IE6) के लिए है, हालांकि मैं चाहता हूं कि यह मामला नहीं था।

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

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

मेरे समाधान में तीन फाइलें शामिल हैं:

1. ff.html: शैली के लिए फ़ाइल
2. ff.xml: जेको बाइंडिंग से संबंधित फाइल
3. ff.css: फ़ायरफ़ॉक्स विशिष्ट स्टाइलिंग

ff.html

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

ff.xml

<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl">
    <binding id="load-mozilla-css">
        <implementation>
            <constructor>
            <![CDATA[
                var link = document.createElement("link");
                    link.setAttribute("rel", "stylesheet");
                    link.setAttribute("type", "text/css");
                    link.setAttribute("href", "ff.css");

                document.getElementsByTagName("head")[0]
                        .appendChild(link);
            ]]>
            </constructor>
        </implementation>
    </binding>
</bindings>

ff.css

h1 {
 color: red;
}

अपडेट: उपरोक्त समाधान उतना अच्छा नहीं है। यह बेहतर होगा यदि एक नया लिंक तत्व जोड़ने के बजाय यह उस "फ़ायरफ़ॉक्स" वर्ग को बॉडी तत्व पर जोड़ देगा । और यह संभव है, बस उपरोक्त जेएस को निम्नलिखित के साथ बदलकर:

this.className += " firefox";

समाधान डीन एडवर्ड्स के मोज़-व्यवहार से प्रेरित है ।

Answer 6

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

<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]-->

Answer 7

आपके विचार में एक भिन्नता यह है server-side USER-AGENT detectorकि यह पता लगाने के लिए कि पेज को किस स्टाइल शीट से जोड़ना है। इस तरह से आप ए firefox.css, ie.css, opera.css, etc।

आप स्वयं जावास्क्रिप्ट में एक समान चीज़ को पूरा कर सकते हैं, हालांकि आप इसे साफ नहीं मान सकते।

मैंने एक समान काम किया है default.cssजिसमें शामिल all common styles and then specific style sheetsकरना ओवरराइड में जोड़ा जाता है, या चूक को बढ़ाता है।

Comments

यह एक अच्छा और स्थिर दृष्टिकोण & mdash की तरह कुछ करता है; धन्यवाद & mdash; हालांकि यह अभी भी ब्राउज़र सूँघने पर निर्भर करता है। मैं इसके बजाय कुछ का उपयोग करता हूं जो क्षमता पर निर्भर करता है, जैसे कि एक गेको-केवल सीएसएस नियम या कुछ। मैं एक ही मूल दृष्टिकोण का उपयोग करता हूं: डिफ़ॉल्ट शैलियों और ब्राउज़र-विशिष्ट ऐड-ऑन।

— avdgaag

@avagag: ज्यादातर मामलों में क्षमता का पता लगाना पसंद किया जाता है, लेकिन जब आप किसी विशिष्ट रेंडरिंग इंजन के बग को "ठीक" करने के लिए हैक को इंजेक्ट करने की कोशिश कर रहे होते हैं, तो उपयोगकर्ता एजेंट को लक्षित करना, सिद्धांत रूप में, इष्टतम समाधान है। आप अज्ञात ब्राउज़रों के साथ भेदभाव नहीं कर रहे हैं; और उपयोगकर्ता-एजेंट फ़ील्ड आपको यह बताने वाला है कि ब्राउज़र का उपयोग करने वाला कौन सा रेंडरिंग इंजन है, इसलिए यदि कोई दुर्लभ गेको ब्राउज़र भी साथ आता है, तो भी उसे ठीक कर दिया जाएगा। कहा कि, बहुत सारे ब्राउज़र अब ब्राउज़र-डिटेक्शन के अनुचित उपयोग के कारण अपने उपयोगकर्ता-एजेंट के तार नकली हैं। तो व्यवहार में यह इतनी अच्छी तरह से काम नहीं कर सकता है।

— लेसे माजेस्ट

Answer 8

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

यहाँ मेरे जवाब से :

आप स्टाइलो के लिए परीक्षण के साथ संयोजन में @supportsएक calc(0s)अभिव्यक्ति के साथ उपयोग कर सकते हैं @-moz-document- गेको 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, जो कि एफएक्स 22 और ऊपर है, @supports not (animation: calc(0s))तो आप सभी की आवश्यकता है:

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

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

Answer 9

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

Answer 10

सीएसएस समर्थन के पास एक नोट के रूप में जावास्क्रिप्ट के लिए बाध्यकारी है।

if (CSS.supports("( -moz-user-select:unset )")) {
    console.log("FIREFOX!!!")
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

Answer 11

निम्नलिखित कोड स्टाइल लिंट चेतावनी को फेंक देता है:

@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

इसके बजाय का उपयोग कर

@-moz-document url-prefix('') {
    h1 {
        color: red;
    }
}

मेरी मदद की! यहाँ से स्टाइल लिंट चेतावनी के लिए समाधान मिला