it-swarm.com.de

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

Ich stelle fest, dass in vielen Template Engines, in der HTML5 Boilerplate , in verschiedenen Frameworks und in einfachen PHP-Sites die no-js-Klasse zum <HTML>-Tag hinzugefügt wird. 

Warum ist das erledigt? Gibt es eine Art Standardverhalten des Browsers, das auf diese Klasse reagiert? Warum immer einschließen? Macht das die Klasse selbst nicht obsolet, wenn es keinen "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, wird das <html>-Element immer diese Klasse haben. Kann jemand erklären, warum dies so oft geschieht?

478
Swader

Wenn Modernizr ausgeführt wird, wird die Klasse "no-js" entfernt und durch "js" ersetzt. Dies ist eine Möglichkeit, verschiedene CSS-Regeln anzuwenden, abhängig davon, ob die Javascript-Unterstützung aktiviert ist.

Siehe Quellcode des Modernizers .

461
Gregory Pakosz

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

Aus Modernizrs 'Anotated Source (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 das gerne, aber ohne Modernizr. Ich habe den folgenden <script> in den <head> eingefügt, um die Klasse in js zu ändern, wenn JavaScript aktiviert ist. Ich bevorzuge die Verwendung von .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 würde ich im Allgemeinen nur js-abhängige Stile direkt mit JavaScript anwenden. Zum Beispiel:

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

Mit dem Trick no-js ist dies jetzt mit css möglich:

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

Dies ist vorzuziehen, weil:

  • Es wird ohne FOUC schneller geladen (Flash mit nicht gestylten Inhalten)
  • Trennung von Bedenken usw ...
104
Zach Lysobey

Modernizr.js entfernt die no-js-Klasse.

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

40
SLaks

Die no-js-Klasse wird von einem Javascript-Skript entfernt. Sie können also Dinge mit css ändern/anzeigen/verbergen, wenn js deaktiviert ist.

17
marc

Dies gilt nicht nur für den Modernizer. Ich sehe einige Websites wie unten, um zu prüfen, ob Javascript unterstützt wird oder nicht.

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

Wenn Javascript unterstützt wird, wird no-js-Klasse entfernt. Andernfalls verbleibt no-js im body-Tag. Dann steuern sie die Stile in der CSS, wenn kein Javascript unterstützt wird.

.no-js .some-class-name {

}
11
Fizer Khan

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

Grundsätzlich wird nach classPrefix + no-js-Klasse gesucht und durch classPrefix + js ersetzt.

Und die Verwendung davon sieht anders aus, wenn JavaScript nicht im Browser ausgeführt wird.

4
Alireza

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

Wie in der Modernizr-Dokumentation :

no-js 

Standardmäßig schreibt Modernizr <html class="no-js"> to <html class="js"> neu. Dadurch können bestimmte Elemente ausgeblendet werden, die nur .__ sein sollten. ausgesetzt in Umgebungen, in denen JavaScript ausgeführt wird. Wenn du möchtest Wenn Sie diese Änderung deaktivieren, können Sie enableJSClass in Ihrem .__ auf false setzen. Konfig.

0
JSON C11