noscript使わずにスタイル無効の時のスタイル

2014.06.10 公開

2017.09.30 更新

アイキャッチにJavaScriptで動くスライドショーを使ったときに、JavaScript無効の時には一枚目だけ表示させてコントローラー的なものは表示させないとかしたかったので、noscript使って

HTML

<noscript>
  <link rel="stylesheet" type="text/css" href="/css/hoge.noscript.css" />
</noscript>

とかやろうとしたんだけど、linkは、itemprop属性を使用する場合を除いて、body内に設置できない！ってことでhead内に移して解決。

かと思ったんだけど、HTML5からXHTMLに戻る可能性のあるサイトの場合は、上記の形だとちょっと手間。XHTMLだとnoscriptはhead内に置けないし、linkもnoscript内に置けない。ので、普通にスクリプト無効時のCSSを置いておいて、script内で、

JavaScript/jQuery

(document).ready(function(){
  $("link[href$='noscript.css']").remove();
});

とかってしてみた。ファイル名で最後がnoscript.cssのものを消すみたいにしている。ここにscriptが無効な時のstyleをまとめておくみたいな感じ。

ん〜でもなんかもうちょいいい方法があるかと思う。

参考