Ik merk dat in veel sjabloonmotoren, in de HTML5-boilerplaat , in verschillende frameworks en in gewone PHP-sites Er is de no-jsklasse toegevoegd op de <HTML>tag.
Waarom is dit gedaan? Is er een soort van standaard browsergedrag dat reageert op deze klas? Waarom het altijd opnemen? Rendert dat de klasse zelf niet verouderd, als er geen “no-JS” -toets is en HTML rechtstreeks kan worden aangepakt?
Hier is een voorbeeld van de HTML5 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]-->
Zoals u kunt zien, zal de <HTML>-element altijd deze klasse hebben.
Kan iemand uitleggen waarom dit zo vaak wordt gedaan?
Antwoord 1, Autoriteit 100%
Wanneer Modernizr rijdt, verwijdert het de “No-JS” -klasse en vervangt het met “JS”. Dit is een manier om verschillende CSS-regels toe te passen, afhankelijk van de vraag of JavaScript-ondersteuning is ingeschakeld.
Zie Moderniser’s broncode .
Antwoord 2, Autoriteit 23%
De klasse no-jswordt gebruikt door de Modernizrfunctiedetectiebibliotheek. Wanneer Modernizr laadt, vervangt het no-jsdoor js. Als JavaScript is uitgeschakeld, blijft de klasse bestaan. Dit stelt je in staat om CSS te schrijven die gemakkelijk beide voorwaarden target.
Van Modernizrs ‘ Geannoteerde bron(niet langer onderhouden):
Verwijder de klasse “no-js” uit het element, als deze bestaat:
docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';
Hier is een blogpost van Paul Irish die deze aanpak beschrijft:
http://www.paulirish.com/2009/avoiding-the-fouc- v3/
Ik doe graag hetzelfde, maar dan zonder Modernizr.
Ik plaats de volgende <script>in de <head>om de klasse te wijzigen in jsals JavaScript is ingeschakeld. Ik gebruik liever .replace("no-js","js")boven de regex-versie omdat het wat minder cryptisch is en aan mijn behoeften voldoet.
<script>
document.documentElement.className =
document.documentElement.className.replace("no-js","js");
</script>
Voorafgaand aan deze techniek zou ik over het algemeen js-afhankelijke stijlen rechtstreeks toepassen met JavaScript. Bijvoorbeeld:
$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});
Met de no-jstruc kan dit nu gedaan worden met css:
.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }
Dit heeft de voorkeur omdat:
- Het laadt sneller zonder FOUC (flash van niet-gestileerde inhoud)
- Scheiding van zorgen, enz…
Antwoord 3, autoriteit 8%
Modernizr.js zal de klasse no-jsverwijderen.
Hiermee kun je CSS-regels maken voor .no-js somethingom ze alleen toe te passen als Javascript is uitgeschakeld.
Antwoord 4, autoriteit 3%
De klasse no-jswordt verwijderd door een javascript-script, dus je kunt dingen wijzigen/weergeven/verbergen met css als js is uitgeschakeld.
Antwoord 5, autoriteit 3%
Dit is niet alleen van toepassing in Modernizer. Ik zie een site die zoals hieronder wordt geïmplementeerd om te controleren of deze javascript-ondersteuning heeft of niet.
<body class="no-js">
<script>document.body.classList.remove('no-js');</script>
...
</body>
Als javascript-ondersteuning aanwezig is, zal het de klasse no-jsverwijderen. Anders blijft no-jsin de body-tag. Dan controleren ze de stijlen in de css als er geen javascript-ondersteuning is.
.no-js .some-class-name {
}
Antwoord 6
Kijk naar de broncode in Modernizer, dit gedeelte:
// 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');
}
Dus in feite zoekt het naar classPrefix + no-jsclass en vervangt het door classPrefix + js.
En het gebruik daarvan is een andere stijl als JavaScript niet in de browser wordt uitgevoerd.
Antwoord 7
De klasse no-js wordt gebruikt om een webpagina op te maken, afhankelijk van of de gebruiker JS heeft uitgeschakeld of ingeschakeld in de browser.
Volgens de Modernizr-documenten:
no-js
Modernizr herschrijft standaard
<html class="no-js"> to <html. Hiermee kunnen bepaalde elementen worden verborgen die alleen zouden moeten zijn
class="js">
blootgesteld in omgevingen die JavaScript uitvoeren. Als je wilt
deze wijziging uitschakelen, kunt u enableJSClass instellen op false in uw
configuratie.