JavaScript が ON のときだけ適用させる CSS

THE HAM MEDIAさんのところで、JavaScript が ON のときだけ適用させる CSS はどうやって書くのが一番良いんだろうというのを連続して取り上げています。

これについては、以前 Twitter で何度か話したことがあって、そのとき僕は「document.write でかいちゃったら？」みたいなことを言った気がするので、実際に試してみました。（追記：試してみましたが、JavaScript で書き出した css の読み込みのタイミングを計測する手段が分からなかったというオチでした。）

そもそも JavaScript が ON のときだけの CSS って？

そもそも、JavaScript が ON のときだけ適用させたい CSS が必要なのはどんなときかというと、アコーディオンで表示・非表示を切り替えるFAQなんかをイメージすると分かりやすいと思います。

例えば、以下のようなHTML があったとします。

<dl id="jsActive">
 <dt>JavaScript が ON のときだけ適用させたい CSS</dt>
 <dd>そもそも、JavaScript が ON のときだけ適用させたい CSS が必要なのはどんなときかというと、アコーディオンで表示・非表示を切り替えるFAQなんかをイメージすると分かりやすいと思います。</dd>
</dl>

このとき、dt要素のクリックで、dd要素が開閉するというやつですね。

この dd要素は display:none; で非表示にするわけですが、これを CSS でやってしまうと、JavaScript が OFF の環境ではアコーディオンが動作しないので dd要素が見えなくなってしまいます。

ですので、通常は JavaScript 内で display:none; にするのですが、それだと JavaScript の処理のタイミングによっては、チラッと dd要素が見えた後に非表示になったりするので、イマイチ格好良くない場合があります。

今回の話は、このようなものに適用させる CSS はどうやって書いたら良いんだろうというお話です。

document.write で書き出すとどうだろう

まず、以下のような JavaScript を用意します。

document.write('<link rel="stylesheet" href="/blog/css/post/jsActive.css" media="screen" />');

jQuery(function($){
 $('#jsActive dt').click(
 function(){
 $('#jsActive dd').slideToggle();
 },
 );
});

この JavaScript の1行目で、jsActive.css という JavaScript が ON のときだけ適用させたいCSSファイルを読み込む link要素を書き出し、その後にアコーディオンするスクリプトを書きます。

jsActive.css は以下のようになっています。

#jsActive dd {
 display: none;
}

これを実際に先ほどの HTML に適用させると次のようになります。

JavaScript が ON のときだけ適用させたい CSS（クリックで開閉）: そもそも、JavaScript が ON のときだけ適用させたい CSS が必要なのはどんなときかというと、アコーディオンで表示・非表示を切り替えるFAQなんかをイメージすると分かりやすいと思います。

これで、HTMLのコンテンツ部分を読み込む前に jsActive.css が読み込まれればいいのですが、結果はどうでしょうか？

Pingdom Toolsでチェックしてみたけど、jsActive.css については計測結果に反映されていなかったので、どのタイミングで読み込まれたか分かりませんでした。何で計測したらいいんでしょう。。

なお、試しに jsActive.css でページ全体を包含する div#page を display:none; にしてみましたが、チラッと見えることはありませんでした。

そもそも JavaScript が ON のときだけの CSS って？

document.write で書き出すとどうだろう

「HTML + CSS」カテゴリの記事一覧