HTML5で組んでるならこの魔法のjsも入れておけっていう話

現在、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から登場したタグを、未対応ブラウザでも認識させることができるようになります。

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

<!--[if lt IE 9]>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fjs%2Fhtml5shiv.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fie7-js.googlecode.com%2Fsvn%2Fversion%2F2.1(beta4)%2FIE9.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcss3-mediaqueries-js.googlecode.com%2Fsvn%2Ftrunk%2Fcss3-mediaqueries.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<![endif]-->

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

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

モバデビの最新情報をチェック