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

公開

更新

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

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

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

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

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

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

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

参考