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




html modernizr html5boilerplate (6)

मैंने देखा है कि एचटीएमएल 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> तत्व हमेशा इस वर्ग में होगा। क्या कोई समझा सकता है कि ऐसा क्यों किया जाता है?


Answers

जब Modernizr चलता है, तो यह "नो-जेएस" वर्ग को हटा देता है और इसे "जेएस" के साथ बदल देता है। जावास्क्रिप्ट समर्थन सक्षम है या नहीं, इस पर निर्भर करता है कि यह विभिन्न सीएसएस नियमों को लागू करने का एक तरीका है।

आधुनिकीकरण के स्रोत कोड देखें।


no-js क्लास को जावास्क्रिप्ट स्क्रिप्ट द्वारा हटा दिया जाता है, इसलिए यदि आप जेएस अक्षम हैं तो आप सीएसएस का उपयोग करके चीजों को संशोधित / प्रदर्शित / छुपा सकते हैं।


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 (अस्थिर सामग्री का फ्लैश) के साथ तेज़ी से लोड होता है
  • चिंताओं का पृथक्करण, आदि ...

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

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


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

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

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

.no-js .some-class-name {

}

क्या यह भूमिका विशेषता आवश्यक है?

उत्तर: हां

  • एक्सएमएल-आधारित भाषाओं में भूमिकाओं को परिभाषित करने के लिए एक्सेसिबल रिच इंटरनेट एप्लीकेशन (WAI-ARIA) का समर्थन करने के लिए भूमिका विशेषता आवश्यक है, जब भाषाएं अपनी भूमिका विशेषता को परिभाषित नहीं करती हैं।
  • यद्यपि यही कारण है कि भूमिका विशेषता प्रोटोकॉल और प्रारूप कार्य समूह द्वारा प्रकाशित की जाती है, इस विशेषता में अधिक सामान्य उपयोग के मामले भी हैं।

यह आपको प्रदान करता है:

  • सरल उपयोग
  • डिवाइस अनुकूलन
  • सर्वर-साइड प्रसंस्करण
  • जटिल डेटा विवरण, ... आदि।




javascript html modernizr html5boilerplate