HTML "no-js" वर्ग का उद्देश्य क्या है?

510

मुझे लगता है कि बहुत सारे टेम्पलेट इंजनों में, HTML5 बॉयलरप्लेट में , विभिन्न चौखटे में और सादे php साइटों no-jsमें <HTML>टैग पर जोड़ा गया वर्ग है ।

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

यहाँ HTML5 बॉयलरप्लेट इंडेक्स। 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>तत्व में हमेशा यह वर्ग होगा। क्या कोई समझा सकता है कि ऐसा अक्सर क्यों किया जाता है?

— Swader
स्रोत

493

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

मॉडर्नाइज़र का सोर्स कोड देखें ।

— ग्रेगरी पॉक्सोज
स्रोत

5

इस पर एक और शानदार लेखन है: alistapart.com/articles/…

— Hannele

47

चूंकि Modernizr "js" के साथ "no-js" की जगह लेता है, आप इसे अपने CSS कोड में if / if स्टेटमेंट के बराबर करने के लिए एक तरीके के रूप में उपयोग कर सकते हैं। उदाहरण के लिए, .myclass { /* CSS code for all versions of your page goes here */ }, .js .myclass { /* This CSS code will only show up if JS is enabled */ }और .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }। उम्मीद है की यह मदद करेगा। -Nick

— skcin7

33

@Ringo: HTML 5 में निर्दिष्ट है कि किसी भी तत्व में एक classविशेषता हो सकती है । यद्यपि HTML 4 तकनीकी रूप से नहीं है, कोई भी ब्राउज़र इस पर चुटकी नहीं लेता है; यहां तक कि जो लोग इसका समर्थन नहीं करते हैं वे इसे अनदेखा करते हैं, और मैंने वर्षों में उनमें से एक ब्राउज़र नहीं देखा है।

— cHao

4

@ZachL मुझे एहसास है कि मुझे यहाँ धूम्रपान दरार होना चाहिए, लेकिन मुझे लगता है कि .js { padding: ...}यह ठीक है क्योंकि आप जानते हैं कि जिसने इसे लागू किया है वह शरीर = .js है। सीधे अपनी बात पर, ऐसा लगता है कि आप दावा कर रहे हैं कि body.jsइससे भी बदतर है, .js bodyजिसका मैं अनुसरण नहीं कर रहा हूं ...

— wired_in

4

यह एचटीएमएल 5-बॉयलरप्लेट का उल्लेख करने के लायक है <html>और इस पर कोई समस्या कभी भी दर्ज नहीं की गई है। किसी तरह इसे <html>स्थापित करना एक अभ्यास बन गया है और लोग तुरंत जानते हैं कि यह क्या है और यह क्या करता है। अंत में, उस प्रथा से भटकना सिर्फ और अधिक सवाल खड़े करता है।

— ग्रेगोरी पकोस

109

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

से Modernizrs 'Anotated स्रोत (अब बनाए रखा) :

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

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

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

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

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

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

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

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

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

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

— Zach Lysobey
स्रोत

1

एक RegExp का उपयोग करते हुए मॉर्डनिजर संस्करण सुरक्षित (और संभावित तेज) है।

— एंड्रयू एफ

@AndrewF - क्या आप उस पर थोड़ा विस्तार कर सकते हैं? यह कितना सुरक्षित है?

— Zach Lysobey

12

@ZachL regexp संस्करण (के साथ \b) कुछ ऐसा मेल नहीं खाता है anno-jsus, दूसरा इसे बदलता है anjsus। no-jsकिसी भी वर्ग के नाम का एक विशिष्ट विकल्प नहीं है, लेकिन फिर भी इस संबंध में यह \bs के साथ "सुरक्षित" है ।

— कुक्कू

40

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

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

— SLaks
स्रोत

17

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

— न घुलनेवाली तलछट
स्रोत

आपने कहा "एक जावास्क्रिप्ट स्क्रिप्ट द्वारा नो-जेएस क्लास को हटा दिया जाता है"। तो कैसे जावास्क्रिप्ट काम करता है (अगर 'नहीं- js' वर्ग को हटाने में सक्षम) अगर यह अक्षम है। क्या आप मुझे स्पष्ट दे सकते हैं?

— haind

2

आप सही हैं और यह वास्तव में बिंदु है: यदि जावास्क्रिप्ट अक्षम है, तो क्लास रहेगी और आप उदाहरण के लिए सीएसएस का उपयोग करके कुछ html भाग दिखा सकते हैं ताकि उपयोगकर्ता को इसके बारे में चेतावनी दी जा सके। .no-js #js-warning {display: block;}

— मार्क

— जानिए

11

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

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

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

.no-js .some-class-name {

}

— फेनर खान
स्रोत

4

मॉर्डनाइज़र के स्रोत कोड को देखें, इस खंड:

// 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');
}

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

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

— एलिरेज़ा
स्रोत

1

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

माडर्निज़्र डॉक्स के अनुसार :

नो-js

डिफ़ॉल्ट रूप से, Modernizr फिर से लिखेंगे <html class="no-js"> to <html class="js">। यह कुछ तत्वों को छिपाने की अनुमति देता है जिन्हें केवल जावास्क्रिप्ट को निष्पादित करने वाले वातावरण में उजागर किया जाना चाहिए। यदि आप इस परिवर्तन को अक्षम करना चाहते हैं, तो आप अपने विन्यास में झूठी के लिए enableJSClass सेट कर सकते हैं।

— JSON C11
स्रोत