Verwenden von .no-js-Klasse für die Erkennung von js

Ich habe immer die Methode verwendet, eine Klasse von .no-js auf dem <html>-Tag, dann verwenden Sie moderniszr, die das Tag streift und ersetzt es durch js, wenn JavaScript in aktiviert ist der Browser des Benutzers.Verwenden von .no-js-Klasse für die Erkennung von js

Grundsätzlich habe ich eine CSS3 Mobile und Desktop-Navigation erstellt. Ich habe Stile, um sein Verhalten zu ändern, wenn es CSS-Übergänge etc. (überprüft mit moderniszr) gibt, sowie wenn es js oder no-js gibt.

Das Problem ist, bekomme ich einen Flash der No-Js-Version, bevor JavaScript Zeit hatte, zu laden und ändern Sie die Klasse in js. (Weil die Standardklasse no-js ist)

Was ich nicht verstehen kann ist, wie man eine Lösung dafür findet. Wenn ich js spezifischen Code als Hauptklassen platziere, dann gebe einen anderen mit dem Präfix .no-js an und es blinkt die no-js, auch wenn js aktiviert ist. Wenn ich es umstelle, macht es das gleiche ...

Vielleicht bin ich dumm, aber alle Zeiger wären toll.

Quelle

2013-04-05 ccdavies

Verzögern Sie die Ausführung des Skripts, bis die Seite vollständig geladen ist? Wenn ja, nicht - Sie möchten, dass es vor dem Rendern der Seite ausgeführt wird. –

Nein, das Skript besteht fast ausschließlich aus CSS. Es gibt nur eine kleine Zeile von jQuery. – ccdavies

Eine Zeile ist immer noch technisch ein Skript. Wie sieht diese Zeile aus und wo befindet sie sich auf Ihrer Seite? –

Paul Irish hat eine excellent blog post auf Umgang mit diesem Problem. Hier ist die Lösung aus diesem Beitrag:

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

Der Schlüssel, um sicherzustellen, ist haben Sie die Klassennamen aktualisieren vor dem Browser eine Chance zu haben, etwas zu machen.

Quelle

2013-04-05 13:42:37 jmar777

Sieht interessant aus, danke für den Link! –

Sie können ein kurzes Skript an der Spitze der <head> hinzufügen:

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

Auch über den <noscript> Tag nicht vergessen, die ignoriert wird, wenn JavaScript aktiviert ist.

Quelle

2013-04-05 13:41:42 Pointy

Verwenden von .no-js-Klasse für die Erkennung von js

Antwort

Verwandte Themen