Modernizr

Posted by muchag | CSS3,HTML5,JavaScript | 2011-06-08 (水) 16:24:08

HTML5 と CSS3 を使うのはいいんだけど
新しいものの宿命として、ブラウザの対応状況
特に IE の問題は避けて通れない。

今までも散々苦労してきたけど
今回は素敵なライブラリを発見した。
Modernizr

【環境】
[HTML5 テンプレート] HTML5 Boilerplate
[CSS3 テンプレート] html5-boilerplate / css / style.css

このようなテンプレートをありがたく利用させていただいているので
後述の手法以外にテンプレートに助けられている部分があるかも。

概要
  • 各ブラウザの HTML5 & CSS3 対応状況を調べる
  • HTML5 に対応していない IE 8 以下に HTML5 をレンダリングする

っていう機能を持つみたい。

詳細はこちら。
Modernizr:Documentation(英語)
 

DL

Modernizr Download
2011-06-08現在の最新は version 2.0 beta のようだ。

1.x 系はオールインワンだったのに対して

2.x 系は必要な機能を選択して
オリジナルファイルを作成できるようになっている。

 

導入
modernizr.js

DL してきた上記ファイルを然るべき場所へ配置。

当該 HTML ファイルへ以下を記述。

  1. <script src="js/modernizr.js"></script>

HTML5 Boilerplate には元々記述してある。

※ CakePHP で利用する場合には js/modernizr.js の前に / (スラッシュ)が必要。
CSS が適用されない
 

HTML5 タグ

また、CSS ファイルに以下を加える。

  1. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  2.   display: block;
  3. }

github:html5-boilerplate / css / style.css #L35-37

これで、無事に header タグが機能した。

私は、html5-boilerplate / css / style.css をそのまま利用させていただいているため
元々この記述が外部 CSS ファイル内に存在したが
この記述以外の部分を削ってみても、ちゃんと機能した。
 

CSS3 要素

背景画像について。

  1. body {
  2.     background-size: 100% auto;
  3. }

と指定したら、IE 7 では当然の如く意味無し。

そこで

  1. <body class="backgroundsize">

とした上で

  1. body {
  2.     background-color: #9999ff;
  3. }
  4. .backgroundsize body {
  5.     background-image: url('img/bg.png');
  6.     background-size: 100% auto;
  7. }

このようにしたら、見事 IE 7 と Firefox 4.x で仕分けしてくれた。
 

意味不明

が・・・。

  1. .backgroundsize body {

これって、class=”backgroundsize” の中にある body タグっていう意味でしょ?

それなのに

  1. <body class="backgroundsize">

これに反応するのは・・・ん~よく分からない・・・。

CSS3,HTML5,JavaScript | 2011-06-08 (水) 16:24:08 |

リセット CSS

Posted by muchag | CSS3,HTML5 | 2011-06-02 (木) 2:00:24

無設定のスタイルはブラウザの標準スタイルが適用されるため、
リセット用のCSSを適用してブラウザの標準スタイルを無効にする必要がある。

HTML5 & CSS3 の環境において、このリセット用の CSS はいくつかあるらしい。

HTML5 Doctor

Google:html5resetcss

CSS3,HTML5 | 2011-06-02 (木) 2:00:24 |

HTML 5 & CSS 3 ブラウザ対応状況

Posted by muchag | CSS3,HTML5 | 2011-05-31 (火) 19:18:55

FindMeByIP:HTML5 & CSS3 Support

CSS3,HTML5 | 2011-05-31 (火) 19:18:55 |