@ -मोज़-दस्तावेज़ url- उपसर्ग () क्या करता है?

Question

CSS में साइमन कोलिसन के नए पुराने उत्तरदायी वेब डिज़ाइन में , इस तरह की कई घोषणाएँ हैं:

@-moz-document url-prefix() {
  .fl { float:left; margin:12px 4px 0 0; padding:0; font-size:65px;  line-height:62%;  color:#ba1820; }
  .fs { float:left; margin:12px 4px 10px 0; padding:0; font-size:65px; line-height:62%; color:#ba1820; }
}

यह वास्तव में क्या करता है? मैंने @ -मोज़-दस्तावेज़ url- उपसर्ग () के लिए googled किया है और यूज़रक्रोम के भीतर इसके उपयोग के लिए संदर्भ पाया है, लेकिन मानक साइट स्टाइलशीट नहीं।

इसमें आमतौर पर एक URL एक तर्क के रूप में पारित होता है जो तब उस URL की घोषणा की सामग्री को प्रतिबंधित करता है। हालाँकि, Colly की साइट पर, कोई तर्क पारित नहीं किया जा रहा है। यह इंगित करेगा कि घोषणा वर्तमान URL पर चल रही है, या कोई URL, नहीं? इसलिए हम यहां कुछ नियमों के साथ मोज़िला-केवल ब्राउज़र को लक्षित करने का एक तरीका देख रहे हैं ?

Answer 1

कोई सीएसएस एट-रूल, जिसके साथ शुरू होता है @-moz- , एक गेको-इंजन-विशिष्ट नियम है, न कि एक मानक नियम। यही है, यह एक मोज़िला-विशिष्ट विस्तार है।

url-prefixनियम किसी भी पृष्ठ है जिसका URL यह साथ शुरू होता है के लिए निहित शैली नियमों लागू होता है। जब कोई URL तर्क के साथ उपयोग किया जाता है तो @-moz-document url-prefix()यह सभी पृष्ठों पर लागू होता है । यह प्रभावी रूप से एक CSS हैक है जिसका उपयोग केवल गेको (मोज़िला फ़ायरफ़ॉक्स) को लक्षित करने के लिए किया जाता है। अन्य सभी ब्राउज़र शैलियों की उपेक्षा करेंगे।

अन्य मोज़िला-विशिष्ट एक्सटेंशन की सूची के लिए यहां देखें ।

Comments

मैंने प्रश्न को थोड़ा विस्तारित किया है क्योंकि मुझे एक मुख्य बिंदु नहीं मिला है। मैंने सहज रूप से अनुमान लगाया कि आपने यहां क्या रखा है, लेकिन तर्क की कमी से हैरान था। मुझे लगता है कि मुझे यह पता चल गया है, हालांकि।

— चार्ल्स रॉपर

मुझे विशिष्ट फ़ॉन्ट के लिए मोज़िला में पत्र रिक्ति में परेशानी है। (अर्थात प्रधान)। कॉर्म में यह ठीक है, लेकिन फ़ायरफ़ॉक्स में यह थोड़ा व्यापक दिखाता है। इसलिए मैं फ़ायरफ़ॉक्स में पत्र रिक्ति को कम करना चाहता हूं लेकिन क्रोम में नहीं। मैं पत्र रिक्ति के लिए इस तरह के moz विस्तार नहीं मिल सकता है।

— यश वेकारिया

@YashVekaria यह एक विस्तार नहीं होगा, आप CSS संपत्ति का उपयोग करेंगे। @-moz-document url-prefix() { .your-class { letter-spacing: 2em; } }

— जो

Answer 2

से https://developer.mozilla.org/en/CSS/@-moz-document

       @-moz-document url(http://www.w3.org/),
                   url-prefix(http://www.w3.org/Style/),
                   domain(mozilla.org)
    {
      /* CSS rules here apply to:
         + The page "http://www.w3.org/".
         + Any page whose URL begins with "http://www.w3.org/Style/"
         + Any page whose URL's host is "mozilla.org" or ends with
           ".mozilla.org"
       */

      /* make the above-mentioned pages really ugly */
      body { color: purple; background: yellow; }
}

Answer 3

फ़ायरफ़ॉक्स 59 से शुरू करके आपको बस उपयोग करना चाहिए:

@document url("https://www.example.com/")

बग के कारण इस सामग्री के -moz-prefixed संस्करण का समर्थन वेब सामग्री के लिए रोक दिया गया है:

https://bugzilla.mozilla.org/show_bug.cgi?id=1035091

Comments

@jaepage, हाँ, यह अब काम नहीं करेगा। आपको उपयोग करना चाहिए _:-moz-tree-row(hover), .selector {}:। .selectorआपका इच्छित चयनकर्ता कहां है

— अदम

फ़ायरफ़ॉक्स @-moz-document url-prefix()(खाली यूआरएल-उपसर्ग के साथ) का समर्थन करेगा fxsitecompat.com/en-CA/docs/2018/…

— ऑरलैंडो

वह लिंक अब कहता है @-moz-document url-prefix()(खाली url- उपसर्ग के साथ) "निकट भविष्य में हटा दिया जाएगा जब एक बार प्रमुख संगतता मुद्दे हल हो जाएंगे।" और वास्तव में यह अब काम नहीं कर रहा है।

— डेव मोर्स

Answer 4

@supports (-moz-appearance:none) {...}मेरे लिए ऐसे मामलों में काम किया जहां @-moz-document url-prefix() {...}नहीं किया।