web-dev-qa-db-fra.com

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

Je remarque que dans de nombreux moteurs de modèles, dans Boilerplate HTML5, dans divers cadres et sites php simples, la classe no-js est ajoutée à la balise <HTML>. 

Pourquoi est-ce fait? Existe-t-il une sorte de 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 cas non-"no-js" et que le code HTML peut être adressé directement?

Voici un exemple tiré de l'index.html de Boilerplate HTML5:

<!--[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 constater, l'élément <html> aura toujours cette classe .Quelqu'un peut-il expliquer pourquoi cela est fait si souvent?

javascripthtmlmodernizrhtml5boilerplate
478
Swader

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

Voir Code source de Modernizer .

461
Gregory Pakosz

La classe no-js est utilisée par la bibliothèque de détection de fonctions Modernizr . Lorsque Modernizr charge, il remplace no-js par 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 annotée de Modernizrs (n'est plus maintenu) :

Supprimez 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 sur le blog: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

J'aime faire la même chose, mais sans Modernizr. J'ai mis le <script> suivant dans le <head> pour changer la classe en js si JavaScript est activé. Je préfère utiliser .replace("no-js","js") par rapport à la version regex car elle est un peu moins cryptée et répond à mes besoins.

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

Avant cette technique, j’appliquais généralement simplement les styles dépendant de js directement avec JavaScript. Par exemple:

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

Avec l'astuce no-js, vous pouvez maintenant le faire avec css:

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

Ceci est préférable car:

  • Il se charge plus rapidement sans FOUC (flash de contenu non-stylé)
  • Séparation des préoccupations, etc ...
104
Zach Lysobey

Modernizr.js supprimera la classe no-js.

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

40
SLaks

La classe no-js est supprimée par un script javascript, vous pouvez donc modifier/afficher/masquer des éléments à l'aide de CSS si js est désactivé.

17
marc

Ce n'est pas seulement applicable dans Modernizer. Je vois un site implémenter comme ci-dessous pour vérifier s'il est supporté par javascript ou non.

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

Si le support javascript est présent, il supprimera la classe no-js. Sinon, no-js restera dans la balise body. Ensuite, ils contrôlent les styles dans le CSS quand aucun javascript ne prend en charge.

.no-js .some-class-name {

}
11
Fizer Khan

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 class et le remplace par classPrefix + js.

Et l'utilisation de cela, le style est différent si JavaScript ne s'exécute pas dans le navigateur.

4
Alireza

La classe no-js est utilisée pour styliser une page Web, selon que l'utilisateur a activé ou non JS dans le navigateur.

Conformément à la Documents de la modernisation :

no-js 

Par défaut, Modernizr réécrira <html class="no-js"> to <html class="js">. Cela permet de masquer certains éléments qui ne devraient être que exposés dans des environnements qui exécutent JavaScript. Si tu veux désactiver cette modification, vous pouvez définir enableJSClass sur false dans votre fichier config.

0
JSON C11