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

Question

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

Gefragt el 17 de Juli, 2011: Wann wurde die Frage gestellt
258926 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Mir ist aufgefallen, dass in vielen Template-Engines in der HTML5 Boilerplate in verschiedenen Frameworks und in einfachen php-Seiten gibt es die no-js Klasse, die der <HTML> Tag.

Warum wird dies getan? Gibt es eine Art Standard-Browserverhalten, das auf diese Klasse reagiert? Warum sollte sie immer enthalten sein? Wird dadurch nicht die Klasse selbst 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 können, ist die <html> Element wird immer diese Klasse haben. Kann mir jemand erklären, warum das so oft gemacht wird?

Gefragt el 17 de Juli, 2011 von Swader

Answer 1

5 Antworten

Answer 2

526voto

Gregory Pakosz Punkte 66918

Wenn Modernizr ausgeführt wird, entfernt es die Klasse "no-js" und ersetzt sie durch "js". Dies ist eine Möglichkeit, unterschiedliche CSS-Regeln anzuwenden, je nachdem, ob die Javascript-Unterstützung aktiviert ist oder nicht.

Siehe Quellcode des Modernizers .

Beantwortet el 17 de Juli, 2011 von Gregory Pakosz (66918 Punkte )

Answer 3

119voto

Zach Lysobey Punkte 13835

El no-js Klasse wird von der Modernizr Bibliothek zur Merkmalserkennung. Wenn Modernizr geladen wird, ersetzt es no-js con js . Wenn JavaScript deaktiviert ist, bleibt die Klasse erhalten. Dies ermöglicht es Ihnen, CSS zu schreiben, die leicht auf beide Bedingungen ausgerichtet sind.

De Modernizrs' kommentierte Quelle (wird nicht mehr gepflegt) :

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

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

Ich möchte das Gleiche tun, aber ohne Modernizr. Ich setze das Folgende <script> im <head> um die Klasse zu ändern in js wenn JavaScript aktiviert ist. Ich bevorzuge die Verwendung von .replace("no-js","js") über die Regex-Version, weil sie etwas weniger kryptisch ist und meinen Bedürfnissen entspricht.

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

Vor dieser Technik, würde ich in der Regel nur js-abhängige Stile direkt mit JavaScript anwenden. Zum Beispiel:

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

Mit dem no-js Trick, kann dies nun mit css :

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

Dies ist vorteilhaft, weil:

Schnelleres Laden ohne FOUC (Flash of Unstyled Content)
Trennung der Anliegen usw...

Beantwortet el 13 de September, 2012 von Zach Lysobey (13835 Punkte )

Answer 4

42voto

SLaks Punkte 832502

Modernizr.js entfernt die no-js Klasse.

Dies ermöglicht Ihnen, CSS-Regeln für .no-js something um sie nur anzuwenden, wenn Javascript deaktiviert ist.

Beantwortet el 17 de Juli, 2011 von SLaks (832502 Punkte )

Answer 5

17voto

marc Punkte 6053

El no-js Klasse wird von einem Javascript-Skript entfernt, so dass Sie Dinge mit CSS ändern/anzeigen/ausblenden können, wenn JavaScript deaktiviert ist.

Beantwortet el 17 de Juli, 2011 von marc (6053 Punkte )

Answer 6

15voto

Fizer Khan Punkte 79079

Dies gilt nicht nur für Modernizer. Ich sehe einige Website implementieren wie unten zu überprüfen, ob es Javascript-Unterstützung hat oder nicht.

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

Wenn Javascript-Unterstützung vorhanden ist, wird es entfernt no-js Klasse. Andernfalls no-js verbleibt im Body-Tag. Dann steuern sie die Stile in der CSS, wenn keine Javascript-Unterstützung.

.no-js .some-class-name {

}

Beantwortet el 1 de August, 2014 von Fizer Khan (79079 Punkte )

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

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

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

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: