javascript - एचटीएमएल "नो-जेएस" कक्षा का उद्देश्य क्या है?




html modernizr (4)

Modernizr.js no-js कक्षा को हटा देगा।

यह आपको जावास्क्रिप्ट अक्षम होने पर ही लागू करने के लिए .no-js something सीएसएस नियम बनाने की अनुमति देता है।

मैंने देखा है कि एचटीएमएल 5 बॉयलरप्लेट में , कई फ्रेमवर्क इंजनों में, विभिन्न ढांचे और सादे PHP साइटों में, <HTML> टैग <HTML> टैग पर जोड़ा गया है।

ऐसा क्यों किया जाता है? क्या कोई प्रकार का डिफ़ॉल्ट ब्राउज़र व्यवहार है जो इस वर्ग पर प्रतिक्रिया करता है? इसे हमेशा क्यों शामिल करें? क्या कक्षा को स्वयं अप्रचलित नहीं किया जाता है, यदि कोई नो- "नो-जेएस" केस नहीं है और एचटीएमएल को सीधे संबोधित किया जा सकता है?

एचटीएमएल 5 Boilerplate index.html से यहां एक उदाहरण दिया गया है:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

जैसा कि आप देख सकते हैं, <html> तत्व हमेशा इस वर्ग में होगा। क्या कोई समझा सकता है कि ऐसा क्यों किया जाता है?


आधुनिकीकरण में स्रोत कोड देखें, यह खंड:

// Change `no-js` to `js` (independently of the `enableClasses` option)
// Handle classPrefix on this too
if (Modernizr._config.enableJSClass) {
  var reJS = new RegExp('(^|\\s)' + classPrefix + 'no-js(\\s|$)');
  className = className.replace(reJS, '$1' + classPrefix + 'js$2');
}

तो मूल रूप से यह क्लासफ्रिक्स + no-js क्लास की खोज करता है और इसे क्लासफ्रिक्स + js साथ प्रतिस्थापित करता है।

और इसका उपयोग, ब्राउज़र में जावास्क्रिप्ट नहीं चल रहा है, तो अलग-अलग स्टाइलिंग है।


यह न केवल आधुनिकीकरण में लागू है। मैं कुछ साइट को नीचे की तरह कार्यान्वित करता हूं ताकि यह जांच सके कि इसमें जावास्क्रिप्ट समर्थन है या नहीं।

<body class="no-js">
    <script>document.body.classList.remove('no-js');</script>
    ...
</body>

यदि जावास्क्रिप्ट समर्थन है, तो यह no-js कक्षा को हटा देगा। अन्यथा शरीर टैग में no-js रहेगा। फिर जब वे जावास्क्रिप्ट समर्थन नहीं करते हैं तो वे सीएसएस में शैलियों को नियंत्रित करते हैं।

.no-js .some-class-name {

}

no-js क्लास का उपयोग Modernizr फीचर डिटेक्शन लाइब्रेरी द्वारा किया जाता है। जब Modernizr लोड होता है, तो यह no-js साथ no-js को प्रतिस्थापित करता है। यदि जावास्क्रिप्ट अक्षम है, तो कक्षा बनी हुई है। यह आपको सीएसएस लिखने की अनुमति देता है जो आसानी से किसी भी स्थिति को लक्षित करता है।

Modernizrs 'एनोटेटेड स्रोत से (अब बनाए रखा नहीं है) :

तत्व से "नो-जेएस" वर्ग निकालें, यदि यह मौजूद है: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

पॉल आयरिश द्वारा इस ब्लॉग का वर्णन यहां एक ब्लॉग पोस्ट है: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

मुझे यह वही करना पसंद है, लेकिन आधुनिकता के बिना। यदि जावास्क्रिप्ट सक्षम है तो मैंने कक्षा को js बदलने के लिए <head> <script> में <script> को निम्न <script> रखा है। मैं रेगेक्स संस्करण पर .replace("no-js","js") का उपयोग करना पसंद करता हूं क्योंकि यह थोड़ा कम गुप्त है और मेरी ज़रूरतों को पूरा करता है।

<script>
    document.documentElement.className = 
       document.documentElement.className.replace("no-js","js");
</script>

इस तकनीक से पहले, मैं आमतौर पर जावास्क्रिप्ट के साथ सीधे जेएस-निर्भर शैलियों को लागू करता हूं। उदाहरण के लिए:

$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});

no-js चाल के साथ, अब यह css साथ किया जा सकता है:

.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }

यह बेहतर है क्योंकि:

  • यह बिना किसी FOUC (अस्थिर सामग्री का फ्लैश) के साथ तेज़ी से लोड होता है
  • चिंताओं का पृथक्करण, आदि ...






html5boilerplate