タブで切り替えられるコンテンツってありますよね?
JavaScriptで表示非表示を切り替えるのが一般的だと思いますが、今まではJSオフの対応として、JSからCSS読み込ませることでJSオフのときにもコンテンツが隠れないように対応していました。
結構面倒だし他に方法ないかな~と考えていたら、noscriptという便利なタグのことを思い出し、試してみることにしました。
追記:
Twitterでご指摘をうけたのですが、どうやら style要素 は head要素内 でしか使用してはいけないようです…。
要素型 head要素の子要素
また、HTML5からは head要素内 に noscript要素 を追加してもいいことになったそうです。
HTML5ではnoscript要素がhead要素内にある場合には、noscript要素の中に link要素、style要素、meta要素を配置してもよいことになっています。
本記事を参考にされる方はこちらを踏まえた上でご利用をお願いいたします。
1. noscriptタグでJSオフの時にdivを追加する
HTML
</p>
<noscript><div class="noscript"></noscript>
<div>表示コンテンツ</div>
<div class="hidden">非表示コンテンツ</div>
<noscript></div></noscript>
.hidden { display: none; }
.noscript .hidden { display: block; }
<div>表示コンテンツ</div>
<div class="hidden">非表示コンテンツ</div>
<noscript><style type="text/css">.hidden { display: block!important; }</style></noscript>
.hidden { display: none; }