JavaScript無効時用のCSSを適用する場合は下記の3つのうちのいずれかが使用されていることが多い。
<body class="no-js">のようにno-jsクラスを付けて
- Modernizrでno-jsを削除
- jQuery $("body").removeClass("no-js")
- document.getElementsByTagName("body")[0].className = "";
こうすることでJavaScript有効時はno-jsを削除し、無効時はno-jsが残り無効時用のCSSが適用できるようになる。
あまり使用されない方法だがほかにもnoscriptタグを使用する方法がある。
<noscript><div class="no-js"></noscript>で囲む方法だ。このやり方だとJavaScriptの読み込みに時間がかかって無効時のCSSが適用されているところが一瞬見えてしまうというデメリットを回避できる。
ただしno-jsを除去するのに時間がかかることはほとんどなく、ソースコードの見た目が悪くなるので使用する際は注意。
noscriptタグでJS無効時用のCSSを適用したサンプル
