Qual è lo scopo della classe HTML "no-js"?

510

Lo noto in molti motori di template, nella HTML5 Boilerplate , in vari framework e in semplici siti php c'è la no-jsclasse aggiunta al <HTML>tag.

Perché è fatto? Esiste una sorta di comportamento predefinito del browser che reagisce a questa classe? Perché includerlo sempre? Ciò non rende obsoleta la classe stessa, se non esiste un caso no "no-js" e HTML può essere indirizzato direttamente?

Ecco un esempio dal 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]-->

Come puoi vedere, l' <html>elemento avrà sempre questa classe. Qualcuno può spiegare perché questo è fatto così spesso?

— Swader
fonte

493

Quando Modernizr viene eseguito, rimuove la classe "no-js" e la sostituisce con "js". Questo è un modo per applicare regole CSS diverse a seconda che il supporto Javascript sia abilitato o meno.

Vedi il codice sorgente di Modernizer .

— Gregory Pakosz
fonte

5

C'è un altro ottimo articolo qui: alistapart.com/articles/…

— Hannele,

47

Poiché Modernizr sostituisce "no-js" con "js", puoi usarlo come un modo per fare l'equivalente di un'istruzione if / else nel tuo codice CSS. Ad esempio .myclass { /* CSS code for all versions of your page goes here */ }, .js .myclass { /* This CSS code will only show up if JS is enabled */ }e .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }. Spero che sia di aiuto. -Nick

— skcin7

33

@Ringo: HTML 5 specifica che qualsiasi elemento può avere un classattributo. Sebbene HTML 4 tecnicamente non lo faccia, nessun browser lo soffoca; anche quelli che non lo supportano lo ignorano e non vedo uno di quei browser da anni.

— cHao,

4

@ZachL Mi rendo conto che devo fumare crack qui, ma mi sembra che vada .js { padding: ...}bene dato che sai come colui che l'ha implementato quel body = .js. Più direttamente al tuo punto, sembra che tu stia sostenendo che body.jsè peggio di quello .js bodyche non sto seguendo ...

— wired_in

4

Vale la pena ricordare che html5-boilerplate lo mette su <html>e nessun problema è mai stato segnalato contro questo. In qualche modo metterlo su <html>è diventata una pratica consolidata e le persone sanno immediatamente cosa è e cosa fa. Alla fine, deviare da quella pratica solleva solo altre domande.

— Gregory Pakosz,

109

La no-jsclasse viene utilizzata dalla libreria di rilevamento delle funzionalità di Modernizr . Quando Modernizr carica, sostituisce no-jscon js. Se JavaScript è disabilitato, la classe rimane. Ciò consente di scrivere CSS che agisce facilmente su entrambe le condizioni.

Dalla fonte animata di Modernizrs (non più mantenuta) :

Rimuovi la classe "no-js" dall'elemento, se esiste: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

Ecco un post sul blog di Paul Irish che descrive questo approccio: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

Mi piace fare la stessa cosa, ma senza Modernizr. Ho inserito quanto segue <script>in<head> per cambiare la classe in jsse JavaScript è abilitato. Preferisco usare .replace("no-js","js")la versione regex perché è un po 'meno enigmatica e si adatta alle mie esigenze.

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

Prima di questa tecnica, generalmente applicavo gli stili js-dipendenti direttamente con JavaScript. Per esempio:

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

Con il no-js trucco, questo può ora essere fatto con css:

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

Questo è preferibile perché:

Si carica più velocemente senza FOUC (flash di contenuto non modificato)
Separazione delle preoccupazioni, ecc ...

— Zach Lysobey
fonte

1

Tuttavia, la versione di Modernizr che utilizza RegExp è più sicura (e probabilmente più veloce).

— AndrewF,

@AndrewF - potresti forse ampliarlo un po '? Quanto è esattamente più sicuro?

— Zach Lysobey,

12

@ZachL La versione di regexp (con \b) non corrisponde a qualcosa del genere anno-jsus, l'altra la cambia in anjsus. no-jsnon è una sottostringa tipica di nessun nome di classe, ma sotto questo aspetto è "più sicura" con \bs.

— Cucu,

40

Modernizr.js rimuoverà il file no-js classe.

Ciò consente di creare regole CSS per .no-js somethingapplicarle solo se Javascript è disabilitato.

— SLaks
fonte

17

La no-jsclasse viene rimossa da uno script javascript, quindi puoi modificare / visualizzare / nascondere le cose usando css se js è disabilitato.

— marc
fonte

Hai detto "La classe no-js viene rimossa da uno script javascript". Quindi come funziona Javascript (in grado di rimuovere la classe 'no-js') se è disabilitato. Potresti darmi un chiarimento?

— haind

2

Hai ragione e questo è effettivamente il punto: se JavaScript è disabilitato, la classe rimarrà e puoi ad esempio mostrare alcune parti html usando CSS per avvisare l'utente al riguardo. .no-js #js-warning {display: block;}

— marc

Attenzione, dopo che Modernizr ha fatto questo, possono verificarsi errori JS, quindi non è un modo infallibile per testare JS

— htmlr,

11

Questo non è applicabile solo in Modernizer. Vedo alcuni siti implementare come di seguito per verificare se ha il supporto javascript o meno.

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

Se il supporto javascript è presente, rimuoverà la no-jsclasse. Altrimenti no-jsrimarrà nel tag body. Quindi controllano gli stili nei CSS quando non è supportato javascript.

.no-js .some-class-name {

}

— Fizer Khan
fonte

4

Guarda il codice sorgente in Modernizer, questa sezione:

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

Quindi fondamentalmente cerca classPrefix + no-jsclass e lo sostituisce con classPrefix + js.

E l'uso di questo, ha uno stile diverso se JavaScript non è in esecuzione nel browser.

— Alireza
fonte

1

La classe no-js viene utilizzata per definire lo stile di una pagina Web, a seconda che l'utente abbia disabilitato o abilitato JS nel browser.

Secondo i documenti di Modernizr :

no-js

Per impostazione predefinita, Modernizr riscriverà <html class="no-js"> to <html class="js">. Ciò consente di nascondere alcuni elementi che devono essere esposti solo in ambienti che eseguono JavaScript. Se si desidera disabilitare questa modifica, è possibile impostare enableJSClass su false nella propria configurazione.

— JSON C11
fonte