Utilizzo della classe .no-js per il rilevamento di js

Ho sempre utilizzato il metodo di avere una classe di .no-js nel tag <html>, quindi utilizzando modernizr che rimuove il tag e lo sostituisce con js se JavaScript è abilitato in il browser dell'utente.Utilizzo della classe .no-js per il rilevamento di js

Fondamentalmente, ho sviluppato una navigazione mobile e desktop CSS3. Ho degli stili per cambiare il suo comportamento se ci sono transizioni CSS ecc (verificate con modernizr) e se c'è js o no-js.

Il problema è che ho ottenuto un flash della versione no-js prima che JavaScript abbia avuto il tempo di caricare e modificare la classe in js. (perché la classe predefinita è no-js)

Quello che non riesco a capire è come trovare una soluzione per questo. Se inserisco il codice specifico di js come classi principali, quindi ne specifico un altro con il prefisso .no-js lampeggia il no-js anche se js è abilitato. Se lo cambio, fa lo stesso ...

Forse sono stupido, ma qualsiasi suggerimento sarebbe fantastico.

fonte

2013-04-05 ccdavies

Stai ritardando l'esecuzione dello script fino al termine del caricamento della pagina? Se è così, non farlo - vuoi che venga eseguito prima che la pagina finisca il rendering. –

No, lo script è composto quasi interamente da CSS. C'è solo una piccola riga di jQuery. – ccdavies

Una riga è ancora tecnicamente uno script. Che aspetto ha questa linea e dove si trova nella tua pagina? –

Paul Irish ha un excellent blog post per risolvere questo problema. Ecco la soluzione da quel post:

<!DOCTYPE html> 
<html lang='en' class='no-js'> 
    <head> 
     <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script> 
     ...

La chiave è quello di assicurarsi di aver aggiornato le classnames prima il browser che hanno la possibilità di rendere qualsiasi cosa.

fonte

2013-04-05 13:42:37 jmar777

Sembra interessante, grazie per il link! –

è possibile aggiungere un breve script in cima della <head>:

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

Inoltre, non dimenticare per il tag <noscript>, che viene ignorato quando è abilitato JavaScript.

fonte

2013-04-05 13:41:42 Pointy

Utilizzo della classe .no-js per il rilevamento di js

risposta

Problemi correlati