2013-04-05 11 views
5

私はいつも<html>タグで.no-jsのクラスを使用し、その後、JavaScriptを有効にするとタグを取り除き、それをjsに置き換えるmodernizrを使用する方法を使用しましたユーザーのブラウザjsを検出するために.no-jsクラスを使用

基本的に、私はCSS3のモバイルとデスクトップのナビゲーションを構築しました。 CSSトランジションなどがある場合(modernizrでチェックされている場合)、jsまたはno-jsがある場合は、その動作を変更するスタイルがあります。

問題はJavaScriptがjsにロードして変更する時間がないうちに、no-jsバージョンのフラッシュを取得することです。 (デフォルトのクラスはno-jsなので)

私が頭を上げることができないのは、これを解決する方法です。 js固有のコードをメインクラスとして配置する場合は、接頭辞.no-jsで別のコードを指定すると、jsが有効になっていてもno-jsが点滅します。私がそれを切り替えると、同じことをする。

たぶん私は愚かであるが、どんな指針も素晴らしいだろう。

+0

ページの読み込みが完了するまでスクリプトの実行を遅らせていますか?もしそうなら、ページがレンダリングを終了する前に実行します。 –

+0

いいえ、スクリプトはほとんどすべてCSSで作成されています。 jQueryの小さな行は1つしかありません。 – ccdavies

+0

1行は技術的にはまだスクリプトです。その1行はどのように見え、それはページのどこにありますか? –

答えて

8

ポールアイルランドは、この問題に対処するためにexcellent blog 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> 
     ... 

重要なことは、ブラウザに何かをレンダリングする前にクラス名を更新したことを確認することです。

+0

リンクありがとう、面白そうです! –

5

あなたは<head>の最上部に短いスクリプトを追加することができます。

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

はまた、JavaScriptは有効になっている場合は無視され<noscript>タグ、忘れてはいけません。

関連する問題