Do czego służy klasa HTML „no-js”?

510

Zauważam, że w wielu silnikach szablonów, w HTML5 Boilerplate , w różnych frameworkach i na zwykłych stronach php, no-jsklasa jest dodawana do <HTML>tagu.

Dlaczego to się dzieje? Czy istnieje jakieś domyślne zachowanie przeglądarki, które reaguje na tę klasę? Dlaczego zawsze to dołączasz? Czy to nie czyni samej klasy przestarzałą, jeśli nie ma przypadku „no-js”, a HTML może być adresowany bezpośrednio?

Oto przykład z indeksu HTML5 Boilerplate.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]-->

Jak widać, <html>element zawsze będzie miał tę klasę. Czy ktoś może wyjaśnić, dlaczego tak często się to dzieje?

javascript html modernizr html5boilerplate Swader
źródło

Odpowiedzi:

493

Po uruchomieniu Modernizr usuwa klasę „no-js” i zastępuje ją „js”. Jest to sposób na zastosowanie różnych reguł CSS w zależności od tego, czy obsługa Javascript jest włączona.

Zobacz kod źródłowy Modernizera .

Grzegorz Pakosz
źródło
5
Jest tu jeszcze jeden świetny opis
Hannele
47
Ponieważ Modernizr zamienia „no-js” na „js”, możesz użyć tego jako sposobu wykonania odpowiednika instrukcji if / else w kodzie CSS. Na przykład .myclass { /* CSS code for all versions of your page goes here */ }, .js .myclass { /* This CSS code will only show up if JS is enabled */ }i .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }. Mam nadzieję że to pomoże. -Nick
skcin7
33
@Ringo: HTML 5 określa, że dowolny element może mieć classatrybut. Chociaż technicznie HTML 4 tego nie robi, przeglądarka nie dusi się; nawet te, które go nie obsługują, po prostu go ignorują i od lat nie widziałem żadnej z tych przeglądarek.
cHao
4
@ZachL Zdaję sobie sprawę, że muszę tu palić crack, ale wydaje mi się, że .js { padding: ...}jest w porządku, ponieważ jako ten, który zaimplementował to ciało, to .js. Mówiąc wprost, wydaje się, że twierdzisz, że body.jsjest gorszy niż ten, .js bodyktórego nie
śledzę
4
Warto wspomnieć, że html5-kociołek go nakłada <html>i nigdy nie zgłoszono żadnego problemu z tym. Jakoś nałożenie go <html>stało się ustaloną praktyką i ludzie natychmiast wiedzą, co to jest i co robi. W końcu odejście od tej praktyki po prostu rodzi więcej pytań.
Gregory Pakosz
109

no-jsKlasa jest używana przez modernizr biblioteki wykrywania cecha. Kiedy modernizr ładunki, zastępuje no-jssię js. Jeśli JavaScript jest wyłączony, klasa pozostaje. Pozwala to napisać CSS, który łatwo celuje w dowolny warunek.

Z zanotowanego źródła moderatora (nie jest już utrzymywane) :

Usuń klasę „no-js” z elementu, jeśli istnieje: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

Oto post na blogu autorstwa Paula Irisha opisujący to podejście: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

Lubię robić to samo, ale bez Modernizatora. Włożyłem następuje <script>w <head>celu zmiany klasę jsczy JavaScript jest włączony. Wolę korzystać .replace("no-js","js")z wersji regex, ponieważ jest nieco mniej tajemnicza i odpowiada moim potrzebom.

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

Przed tą techniką zazwyczaj po prostu stosowałem style zależne od js bezpośrednio za pomocą JavaScript. Na przykład:

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

Dzięki no-jssztuczce można to teraz zrobić za pomocą css:

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

Jest to preferowane, ponieważ:

  • Ładuje się szybciej bez FOUC (flash niestylizowanej zawartości)
  • Rozdzielenie obaw itp.
Zach Lysobey
źródło
1
Wersja Modernizr korzystająca z RegExp jest jednak bezpieczniejsza (i prawdopodobnie szybsza).
AndrewF,
@AndrewF - czy mógłbyś rozwinąć to trochę? Jak dokładnie jest bezpieczniej?
Zach Lysobey,
12
@ZachL Wersja wyrażenia regularnego (z \b) nie pasuje do czegoś podobnego anno-jsus, druga zmienia to na anjsus. no-jsnie jest typowym podciągiem żadnej nazwy klasy, ale nadal pod tym względem jest „bezpieczniejszy” z \bs.
Cucu
40

Modernizr.js usunie no-jsklasę.

Pozwala to na tworzenie reguł CSS w .no-js somethingcelu ich stosowania tylko wtedy, gdy JavaScript jest wyłączony.

SLaks
źródło
17

no-jsKlasa zostanie usunięty przez skrypt JavaScript, dzięki czemu można modyfikować / Wyświetl / ukryj rzeczy za pomocą css czy js jest wyłączone.

Marc
źródło
Powiedziałeś: „Klasa no-js zostaje usunięta przez skrypt javascript”. Więc jak działa Javascript (Może usunąć klasę „no-js”), jeśli jest wyłączona. Czy możesz mi wyjaśnić?
haind
2
Masz rację, a właściwie o to chodzi: jeśli JavaScript jest wyłączony, klasa pozostanie i możesz na przykład pokazać część HTML za pomocą CSS, aby ostrzec użytkownika o tym. .no-js #js-warning {display: block;}
marc
Należy pamiętać, że błędy JS mogą wystąpić po tym, jak Modernizr to zrobi, więc nie jest to niezawodny sposób testowania JS
htmlr
11

Dotyczy to nie tylko programu Modernizer. Widzę implementację witryny, taką jak poniżej, aby sprawdzić, czy obsługuje javascript.

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

Jeśli istnieje obsługa javascript, usunie no-jsklasę. W przeciwnym razie no-jspozostanie w znaczniku body. Następnie kontrolują style w css, gdy nie obsługuje javascript.

.no-js .some-class-name {

}
Fizer Khan
źródło
4

Spójrz na kod źródłowy w Modernizer, ta sekcja:

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

W zasadzie szuka no-jsklasy classPrefix + i zamienia ją na classPrefix + js.

A użycie tego polega na odmiennym stylizowaniu, jeśli JavaScript nie działa w przeglądarce.

Alireza
źródło
1

Klasa no-js służy do stylizowania strony internetowej, w zależności od tego, czy użytkownik ma wyłączoną obsługę JS w przeglądarce lub ją włącza.

Zgodnie z dokumentami Modernizr :

no-js

Domyślnie Modernizr przepisze <html class="no-js"> to <html class="js">. Pozwala to ukryć niektóre elementy, które powinny być widoczne tylko w środowiskach wykonujących JavaScript. Jeśli chcesz wyłączyć tę zmianę, możesz ustawić enableJSClass na false w swojej konfiguracji.

JSON C11
źródło