現在、A!@attripさん発で話題になっている「たった2行でIE5.5~IE8をモダンブラウザの挙動にする魔法のJS」という記事。

Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。

html5 Photo:html5 By michael pollak

IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jscss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。

もう少し具体的に書くと、ie9.jsを組み込むことで、

  • position:fixed;に対応
  • max-widthmax-heightに対応
  • 属性セレクタ、擬似クラスに対応
  • margin:0 auto;でのセンタリングに対応
  • 透過PNGに対応
  • opacityに対応

といったことが可能になります。要はCSS3に対応していないIE5.5〜IE8に、一部のセレクタやプロパティを対応させることをメインとしたjavascriptなんですね。

次にcss3-mediaqueries.jsですが、こっちもどういう働きをするかカンタンに説明しておきましょう。

もともとCSS2系の仕様で、CSSを適用するメディア(PC、テレビ、プリンタ用紙など)を指定するときに使うMedia Typeというものががあります。
それをCSS3で大幅に拡張したのがMedia Queryというやつです。

最近のレスポンシブデザインのソースで、

<link rel="stylesheet" type="text/css" href="大ウィンドウ用.css" media="screen and (min-height: 600px)" />
<link rel="stylesheet" type="text/css" href="小ウィンドウ用.css" media="screen and (max-height: 599px)" />

って、記述がされているのを見かけたことないでしょうかね。これがいわゆるMedia Query。IE8以前ではこのコードも使えないため、これを使えるようにするためのjavascriptがcss3-mediaqueries.jsなんですね。

レスポンシブデザインを実装するなら必須と言えるjavascriptなわけです。

で、ここまではいいわけですが、うっかりとしたひとつの盲点が出てきます。
そうHTML5への対応ですね。

IE8以前のブラウザは言うまでもなくHTML5に未対応です。
しかし、ie9.jscss3-mediaqueries.jsは、いずれも未対応のCSS3に対応するためのjavascriptですから、これだけではHTML5に対応させることができません。

そこで利用したいのが、html5shiv.jsです。
HTML5から登場したタグを、未対応ブラウザでも認識させることができるようになります。

html5shiv - HTML5 IE enabling script - Google Project Hosting 

Google Project Hostingから当該zipファイルをダウンロードしてきて解凍したら、html5shiv.jsをサーバーの任意のディレクトリにアップロードします。
アップロードしたら、<head>タグ内に条件分岐コメントを使って、読みこむように設定しましょう。さっきの2つのjsを使うことを前提にすると、

<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

この3つのjavascriptを読み込むようにすればOK。
これでIE8以前のブラウザでも、HTML5とCSS3に対応しつつ、レスポンシブデザインにも対応させることができます。

というわけで、HTML5でWebデザインを組んでいる場合は、html5shiv.jsの読み込みを忘れずにやっておくことをおすすめしますよ。

Commentsコメントしてもらえると励みになります