Question Quel est le but de la classe HTML "no-js"?


Je remarque que dans beaucoup de moteurs de gabarit, dans le Boilerplate HTML5, dans divers cadres et dans les sites PHP simples, il y a la no-js classe ajouté sur le <HTML> marque.

Pourquoi est-ce fait? Y at-il un comportement de navigateur par défaut qui réagit à cette classe? Pourquoi l'inclure toujours? Est-ce que cela ne rend pas la classe elle-même obsolète, s'il n'y a pas de no- "no-js" et que html peut être adressé directement?

Voici un exemple du 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]-->

Comme vous pouvez le voir, le <html> element aura toujours cette classe. Quelqu'un peut-il expliquer pourquoi cela est si souvent fait?


459
2017-07-17 14:35


origine


Réponses:


Lorsque Modernizr s'exécute, il supprime la classe "no-js" et la remplace par "js". C'est un moyen d'appliquer différentes règles CSS selon que le support Javascript est activé ou non.

Voir Le code source de Modernizer.


446
2017-07-17 14:37



le no-js classe est utilisée par le Modernizr bibliothèque de détection de fonctionnalités. Lorsque Modernizr se charge, il remplace no-js avec js. Si JavaScript est désactivé, la classe reste. Cela vous permet d'écrire des CSS qui ciblent facilement l'une ou l'autre condition.

De Source Anotisée des Modernisateurs  (n'est plus maintenu):

Supprimer la classe "no-js" de l'élément, s'il existe: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

Voici un article de Paul Irish décrivant cette approche: http://www.paulirish.com/2009/avoiding-the-fouc-v3/


J'aime faire la même chose, mais sans Modernizr. Je mets le suivant <script> dans le <head> changer la classe à js si JavaScript est activé. Je préfère utiliser .replace("no-js","js") sur la version regex parce que c'est un peu moins cryptique et convient à mes besoins.

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

Avant cette technique, je n'appliquais généralement que les styles dépendants de js directement avec JavaScript. Par exemple:

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

Avec le no-js astuce, cela peut maintenant être fait avec css:

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

Ceci est préférable car:

  • Il se charge plus vite sans FOUC (flash de contenu non stylé)
  • Séparation des préoccupations, etc ...

96
2017-09-13 16:22



Modernizr.js va supprimer le no-js classe.

Cela vous permet de créer des règles CSS pour .no-js something les appliquer uniquement si Javascript est désactivé.


37
2017-07-17 14:37



le no-js la classe est supprimée par un script javascript, de sorte que vous pouvez modifier / afficher / masquer les choses en utilisant css si js est désactivé.


15
2017-07-17 14:38



Ceci n'est pas seulement applicable dans Modernizer. Je vois des implémentations de site comme ci-dessous pour vérifier si elle prend en charge javascript ou non.

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

Si le support javascript est là, alors il supprimera no-js classe. Autrement no-js restera dans la balise body. Ensuite, ils contrôlent les styles dans le CSS quand aucun support javascript.

.no-js .some-class-name {

}

9
2017-08-01 05:40



Regardez le code source dans Modernizer, cette section:

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

Donc, fondamentalement, il recherche classPrefix + no-js classe et remplacez-le par classPrefix + js.

Et l'utilisation de ce style diffère si JavaScript ne fonctionne pas dans le navigateur.


2
2018-06-10 09:27