noscriptでJS未対応ブラウザへの表示対応

一時期は敬遠されていたJavaScriptですが、
jQueryの登場で、今やJavaScriptを使っていないサイトなんてないのではないでしょうか。
左右にスライドする画像ギャラリーやカルーセルパネル（バナー）なんてのは良く見る風景です。
特に写真をたくさん見せたいタレントさんなんかのサイトは使っている方も多いのでは？

ですが、世の中のPCユーザーの中にはあえてJavaScriptをOFFにしている方もいます。
ブラウザ表示や処理速度を軽くするため…などでしょうかね。
今回は、今さら感ありですが、UI的に忘れちゃいけないブラウザへの対策メモです。

まずはCSSを用意します。
haedにはnoscriptの際に読み込むCSSファイルへのリンクを追加します。
※HTML5の記述例となります

<link href="css/hogehoge.css" rel="stylesheet" />
<noscript>
 <link rel="stylesheet" href="css/hogehoge_nojs.css" />
</noscript>

HTMLの記述が↓で、id=”slider”でJavaScriptを読み込んでいる場合…

<div id="slider_wrap">
 <div id="slider">
  <a href="/"><img src="1.jpg" /></a>
  <a href="/"><img src="2.jpg" /></a>
  <a href="/"><img src="3.jpg" /></a>
 </div>
</div>

この↓のようにid=”slider”の終わりに注意文言をnoscriptで囲んで追加します。

<div id="slider_wrap">
 <div id="slider">
  <a href="/"><img src="1.jpg" /></a>
  <a href="/"><img src="2.jpg" /></a>
  <a href="/"><img src="3.jpg" /></a>
 </div>
 <noscript>
  <p>javascrptの設定を有効にしてご覧ください</p>
 </noscript>
</div>

次にnoscriptの部分が表示される際に適用するhogehoge_nojs.cssファイルを作成します。

#slider {
 display: none;
}
#slider_wrap p {
 font-size: 13px;
 font-weight: bold;
 color: #cccccc;
 line-height:1.2em;
}

noscriptでJavaScriptがOFFになっている人向けに見せるコンテンツを用意しても良いと思います。
JavaScriptをOFFにしているとほとんど何も見えない…なんてことがないようにしたいですね。

*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
著者使用環境
OS:Windows8
browser:Firefox:28 IE:10 chrome:34.0