HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。
Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。
IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。
もう少し具体的に書くと、ie9.jsを組み込むことで、
position:fixed;に対応max-width、max-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.js、css3-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="<script>" title="<script>" /><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="<script>" title="<script>" /><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="<script>" title="<script>" /><![endif]-->
この3つのjavascriptを読み込むようにすればOK。
これでIE8以前のブラウザでも、HTML5とCSS3に対応しつつ、レスポンシブデザインにも対応させることができます。
というわけで、HTML5でWebデザインを組んでいる場合は、html5shiv.jsの読み込みを忘れずにやっておくことをおすすめしますよ。