Was ist der Zweck der HTML-Klasse "no-js"?

510

Ich stelle fest, dass in vielen Template-Engines, im HTML5-Boilerplate , in verschiedenen Frameworks und auf einfachen PHP-Sites die no-jsKlasse dem <HTML>Tag hinzugefügt wird .

Warum wird das gemacht? Gibt es eine Art Standard-Browserverhalten, das auf diese Klasse reagiert? Warum immer einschließen? Macht das die Klasse selbst nicht obsolet, wenn es keinen no-"no-js" -Fall gibt und HTML direkt angesprochen werden kann?

Hier ist ein Beispiel aus der 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]-->

Wie Sie sehen können, hat das <html>Element immer diese Klasse. Kann jemand erklären, warum dies so oft gemacht wird?

javascript html modernizr html5boilerplate Swader
quelle

Antworten:

493

Wenn Modernizr ausgeführt wird, wird die Klasse "no-js" entfernt und durch "js" ersetzt. Auf diese Weise können Sie unterschiedliche CSS-Regeln anwenden, je nachdem, ob die Javascript-Unterstützung aktiviert ist oder nicht.

Siehe den Quellcode von Modernizer .

Gregory Pakosz
quelle
5
Es gibt noch eine weitere großartige Beschreibung: alistapart.com/articles/…
Hannele
47
Da Modernizr "no-js" durch "js" ersetzt, können Sie dies verwenden, um das Äquivalent einer if / else-Anweisung in Ihrem CSS-Code auszuführen. Zum Beispiel .myclass { /* CSS code for all versions of your page goes here */ }, .js .myclass { /* This CSS code will only show up if JS is enabled */ }und .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }. Hoffe das hilft. -Nick
skcin7
33
@Ringo: HTML 5 gibt an, dass jedes Element ein classAttribut haben kann. Obwohl HTML 4 dies technisch nicht tut, erstickt kein Browser daran. Selbst diejenigen, die es nicht unterstützen, ignorieren es einfach und ich habe seit Jahren keinen dieser Browser mehr gesehen.
CHao
4
@ZachL Mir ist klar, dass ich hier Crack rauchen muss, aber es scheint mir in .js { padding: ...}Ordnung zu sein, da Sie als derjenige, der es implementiert hat, wissen, dass body = .js. body.js.js body
Direkter
4
Es ist erwähnenswert, dass HTML5-Boilerplate es anlegt <html>und es wurde noch nie ein Problem dagegen gemeldet. Irgendwie hat sich das Anziehen <html>zu einer etablierten Praxis entwickelt und die Leute wissen sofort, was es ist und was es tut. Am Ende wirft eine Abweichung von dieser Praxis nur weitere Fragen auf.
Gregory Pakosz
109

Die no-jsKlasse wird von der Modernizr- Feature-Erkennungsbibliothek verwendet. Wenn Modernizr Lasten, ersetzt sie no-jsmit js. Wenn JavaScript deaktiviert ist, bleibt die Klasse erhalten. Auf diese Weise können Sie CSS schreiben, das problemlos auf beide Bedingungen abzielt.

Aus der kommentierten Quelle von Modernizrs (nicht mehr gepflegt) :

Entfernen Sie die Klasse "no-js" aus dem Element, falls vorhanden: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

Hier ist ein Blog-Beitrag von Paul Irish, der diesen Ansatz beschreibt: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

Ich mache gerne das Gleiche, aber ohne Modernizr. Ich habe Folgendes <script>in das Feld eingefügt <head>, um die Klasse zu ändern, jswenn JavaScript aktiviert ist. Ich bevorzuge die Verwendung .replace("no-js","js")gegenüber der Regex-Version, da diese etwas weniger kryptisch ist und meinen Anforderungen entspricht.

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

Vor dieser Technik habe ich im Allgemeinen nur js-abhängige Stile direkt mit JavaScript angewendet. Zum Beispiel:

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

Mit dem no-jsTrick kann dies nun geschehen mit css:

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

Dies ist vorzuziehen, weil:

  • Es wird schneller ohne FOUC geladen (Flash von nicht gestylten Inhalten)
  • Trennung von Bedenken, etc ...
Zach Lysobey
quelle
1
Die Modernizr-Version mit RegExp ist jedoch sicherer (und wahrscheinlich schneller).
AndrewF
@ AndrewF - könntest du das vielleicht ein bisschen erweitern? Wie genau ist es sicherer?
Zach Lysobey
12
@ZachL Die Regexp-Version (mit \b) stimmt nicht mit so etwas überein anno-jsus, die andere ändert sie in anjsus. no-jsist kein typischer Teilstring eines Klassennamens, aber in dieser Hinsicht ist es mit \bs "sicherer" .
Cucu
40

Modernizr.js entfernt die no-jsKlasse.

Auf diese Weise können Sie CSS-Regeln festlegen .no-js something, um sie nur anzuwenden, wenn Javascript deaktiviert ist.

SLaks
quelle
17

Die no-jsKlasse wird durch ein Javascript-Skript entfernt, sodass Sie Dinge mit CSS ändern / anzeigen / ausblenden können, wenn js deaktiviert ist.

marc
quelle
Sie sagten "Die no-js-Klasse wird durch ein Javascript-Skript entfernt". So funktioniert Javascript (kann die Klasse 'no-js' entfernen), wenn es deaktiviert ist. Könnten Sie mir eine klare geben?
Haind
2
Sie haben Recht und das ist eigentlich der Punkt: Wenn JavaScript deaktiviert ist, bleibt die Klasse erhalten und Sie können beispielsweise einen HTML-Teil mithilfe von CSS anzeigen, um den Benutzer darüber zu warnen. .no-js #js-warning {display: block;}
Marc
Beachten Sie, dass JS-Fehler auftreten können, nachdem Modernizr dies getan hat, sodass es keine narrensichere Methode zum Testen von JS ist
htmlr
11

Dies gilt nicht nur für Modernizer. Ich sehe einige Site-Implementierungen wie unten, um zu überprüfen, ob sie Javascript unterstützen oder nicht.

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

Wenn Javascript-Unterstützung vorhanden ist, wird die no-jsKlasse entfernt. Andernfalls no-jsbleibt im Body-Tag. Dann steuern sie die Stile im CSS, wenn kein Javascript unterstützt wird.

.no-js .some-class-name {

}
Fizer Khan
quelle
4

Schauen Sie sich den Quellcode in Modernizer an, diesen Abschnitt:

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

Im Grunde sucht es also nach classPrefix + no-jsclass und ersetzt es durch classPrefix + js.

Und die Verwendung davon ist anders zu gestalten, wenn JavaScript nicht im Browser ausgeführt wird.

Alireza
quelle
1

Die no-js-Klasse wird zum Gestalten einer Webseite verwendet, abhängig davon, ob der Benutzer JS im Browser deaktiviert oder aktiviert hat.

Gemäß den Modernizr-Dokumenten :

no-js

Standardmäßig schreibt Modernizr neu <html class="no-js"> to <html class="js">. Auf diese Weise können bestimmte Elemente ausgeblendet werden, die nur in Umgebungen verfügbar gemacht werden sollen, in denen JavaScript ausgeführt wird. Wenn Sie diese Änderung deaktivieren möchten, können Sie enableJSClass in Ihrer Konfiguration auf false setzen.

JSON C11
quelle