現在、A!＠attripさん発で話題になっている｢たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS｣という記事読みましたか?
Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。
Photo:html5 By michael pollak
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から登場したタグを、未対応ブラウザでも認識させることができるようになります。
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の読み込みを忘れずにやっておくことをおすすめしますよ。