Modernizr
HTML5 と CSS3 を使うのはいいんだけど
新しいものの宿命として、ブラウザの対応状況
特に IE の問題は避けて通れない。
今までも散々苦労してきたけど
今回は素敵なライブラリを発見した。
Modernizr
このようなテンプレートをありがたく利用させていただいているので
後述の手法以外にテンプレートに助けられている部分があるかも。
- 各ブラウザの HTML5 & CSS3 対応状況を調べる
- HTML5 に対応していない IE 8 以下に HTML5 をレンダリングする
っていう機能を持つみたい。
詳細はこちら。
Modernizr：Documentation（英語）
Modernizr Download
2011-06-08現在の最新は version 2.0 beta のようだ。
1.ｘ 系はオールインワンだったのに対して
2.ｘ 系は必要な機能を選択して
オリジナルファイルを作成できるようになっている。
DL してきた上記ファイルを然るべき場所へ配置。
当該 HTML ファイルへ以下を記述。
- <script src="js/modernizr.js"></script>
HTML5 Boilerplate には元々記述してある。
※ CakePHP で利用する場合には js/modernizr.js の前に / （スラッシュ）が必要。
CSS が適用されない
また、CSS ファイルに以下を加える。
- article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
- display: block;
- }
github：html5-boilerplate / css / style.css #L35-37
これで、無事に header タグが機能した。
私は、html5-boilerplate / css / style.css をそのまま利用させていただいているため
元々この記述が外部 CSS ファイル内に存在したが
この記述以外の部分を削ってみても、ちゃんと機能した。
背景画像について。
- body {
- background-size: 100% auto;
- }
と指定したら、IE 7 では当然の如く意味無し。
そこで
- <body class="backgroundsize">
とした上で
- body {
- background-color: #9999ff;
- }
- .backgroundsize body {
- background-image: url('img/bg.png');
- background-size: 100% auto;
- }
このようにしたら、見事 IE 7 と Firefox 4.x で仕分けしてくれた。
が・・・。
- .backgroundsize body {
これって、class=”backgroundsize” の中にある body タグっていう意味でしょ？
それなのに
- <body class="backgroundsize">
これに反応するのは・・・ん～よく分からない・・・。