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

510

Je remarque que dans de nombreux moteurs de modèles, dans la chaudière HTML5 , dans divers cadres et dans des sites PHP simples, il y a la no-jsclasse ajoutée sur la <HTML>balise.

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? Cela ne rend-il pas la classe elle-même obsolète, s'il n'y a pas de cas «no-js» et que le html peut être adressé directement?

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

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

javascript html modernizr html5boilerplate Swader
la source

Réponses:

493

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 la prise en charge de Javascript est activée ou non.

Voir le code source de Modernizer .

Gregory Pakosz
la source
5
Il y a un autre grand article là-dessus: alistapart.com/articles/…
Hannele
47
Puisque Modernizr remplace "no-js" par "js", vous pouvez l'utiliser comme un moyen de faire l'équivalent d'une instruction if / else dans votre code CSS. Par exemple .myclass { /* CSS code for all versions of your page goes here */ }, .js .myclass { /* This CSS code will only show up if JS is enabled */ }et .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }. J'espère que cela t'aides. -Nick
skcin7
33
@Ringo: HTML 5 spécifie que tout élément peut avoir un classattribut. Bien que HTML 4 ne le soit pas techniquement, aucun navigateur ne s'y étouffe; même ceux qui ne le supportent pas l'ignorent, et je n'ai pas vu un de ces navigateurs depuis des années.
cHao
4
@ZachL Je me rends compte que je dois fumer du crack ici, mais il me semble que .js { padding: ...}c'est très bien puisque vous savez comme celui qui l'a implémenté que body = .js. Plus directement à votre point, il semble que vous prétendez que body.jsc'est pire que .js bodyce que je ne suis pas en
train de
4
Il convient de mentionner que html5-kettleplate le met en place <html>et aucun problème n'a jamais été signalé à ce sujet. D'une manière ou d'une autre, le mettre <html>est devenu une pratique établie et les gens savent immédiatement de quoi il s'agit et de ce qu'il fait. En fin de compte, s'écarter de cette pratique soulève simplement plus de questions.
Gregory Pakosz
109

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

De la source anotée de Modernizrs (n'est plus maintenue) :

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 blog 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. J'ai mis ce qui suit <script>dans le <head>pour changer la classe jssi JavaScript est activé. Je préfère utiliser .replace("no-js","js")la version regex car elle est un peu moins cryptique et convient à mes besoins.

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

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

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

Avec l' no-jsastuce, 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 rapidement sans FOUC (flash de contenu sans style)
  • Séparation des préoccupations, etc ...
Zach Lysobey
la source
1
La version Modernizr utilisant un RegExp est cependant plus sûre (et probablement plus rapide).
AndrewF
@AndrewF - pourriez-vous développer un peu cela? Comment est-il exactement plus sûr?
Zach Lysobey
12
@ZachL La version regexp (avec \b) ne correspond pas à quelque chose comme anno-jsus, l'autre la change en anjsus. no-jsn'est pas une sous-chaîne typique d'un nom de classe, mais à cet égard, elle est "plus sûre" avec \bs.
Cucu
40

Modernizr.js supprimera la no-jsclasse.

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

SLaks
la source
17

La no-jsclasse est supprimée par un script javascript, vous pouvez donc modifier / afficher / masquer les choses en utilisant css si js est désactivé.

marc
la source
Vous avez dit "La classe no-js est supprimée par un script javascript". Alors, comment Javascript fonctionne (Capable de supprimer la classe 'no-js') s'il est désactivé. Pourriez-vous me donner un clair?
haind
2
Vous avez raison et c'est en fait le point: si JavaScript est désactivé, la classe restera et vous pouvez par exemple afficher une partie html en utilisant CSS pour en avertir l'utilisateur. .no-js #js-warning {display: block;}
marc
Soyez conscient, des erreurs JS peuvent se produire après que Modernizr ait fait cela, donc ce n'est pas une façon infaillible de tester JS fonctionne
htmlr
11

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

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

Si le support javascript est là, il supprimera la no-jsclasse. Sinon, no-jsil restera dans la balise body. Ensuite, ils contrôlent les styles dans le CSS lorsque aucun support javascript n'est utilisé.

.no-js .some-class-name {

}
Fizer Khan
la source
4

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

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

Alireza
la source
1

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

Selon les documents Modernizr :

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 exposés que dans des environnements qui exécutent JavaScript. Si vous souhaitez désactiver cette modification, vous pouvez définir enableJSClass sur false dans votre configuration.

JSON C11
la source