HTML5とCSS3の現状を調べてみた

2010/08/22 21:41 | 0 Comments

HTML5とWebブラウザ

「Webの未来」と言われているHTML5がゆっくりではあるが、着実に盛り上がってきているようだ。ChromeとFirefoxはかなり実装が進んできていて、あとはie待ちという状態だったが、現在のie9プレビュー版をちょっと試してみたところ、それなりにがんばっているようだ。来月にはベータ版がリリースされるらしく、ie9のリリースによって主要ブラウザによる次世代ウェブへの対応が一通り出そろうことになる。ここらで主要なブラウザ（Opera除く！）のHTML5（とCSS3）の対応状況をちょっと調べてみることにした。

HTML5の現状

まず前提条件として、HTML5もCSS3も、まだ正式な標準として確定していないということだ。W3Cのサイトを見れば分かるけれど、たとえばCSS3はまだ多くがラストコールドラフト（標準の手前くらいの位置づけ）かワーキングドラフト（標準の「手前の手前」くらいの位置づけ）になっている。

そして、まだ正式な標準になっていない仕様に対してブラウザ側で対応するときは「ベンダープレフィックス」をつける、すなわち独自拡張と同じ扱いをすることになっている。たとえばChrome（WebKit）では、要素を回転させるときは「-webkit-transform: rotate(-5deg);」というような書き方をすることになる。transformが正式な標準になった時点で「-webkit-」というプレフィックスを取り除くことになるわけだ。

前に「CSS3だけでドラえもんを描いた」という記事があった。「-webkit-xxxx」などが多様されているのを見て、「WebKitとかFirefoxの独自拡張を使ってるだけじゃねえか！」という批判があったけど、あくまでCSS3のワーキングドラフトなどを先行して実装しているわけなので、完全な独自拡張というわけではない。（とは言っても、ワーキングドラフトを実装していないという理由で「だからIEはクソなんだ」とか書いているのはさすがにちょっとなあとは思うけど。）

ブラウザごとの実装状況

まずHTML5だけども、とりあえずチェックしてみたのは以下の4つ。ほかにもいろいろあるけど、とりあえず個人的にあったら便利かなーと思ったものを適当にピックアップしてみた。

調べてみたのはIE9のプラットフォームプレビュー、Firefox4のBeta3、Chrome5の3つ。SafariはChromeと同じWebKitベースなので、Chromeとだいたい同じだろうと考えてスルー。

次にCSS3。これは基本的には「CSS3 Click Chart by Impressive Webs」というサイトをIE9、Firefox4、Chromeで見てみた。あと、ベンダープレフィックスつきのCSSしか記述されていない箇所は、一部他のサイトを参照したりもした。

やはりWebKitベースのChromeが一番対応している。Firefoxもかなりいい感じだ。IE9は、対応は進んでいるようだけどやはりいまひとつ。ただ、IE9のテストページにAcid3とかCSS3 selectorテストにリンクを張っていることからも、今度こそ本気を出して標準に対応するつもりだと思われ、現時点でもすでになかなかいい得点になっている。CSS3対応もその調子でがんばってほしいものだ。

結論

結論としては、そろそろHTML5+CSS3への対応準備を始めてもいい時期には来ているのではないかと思う。とは言っても、HTML5+CSS3が正式な標準になるにはまだまだ時間がかかりそうだし、それを見越した対応が必要だろう。たとえば「Webアプリ側でブラウザごとにCSSを変換してあげる」ような感じだ。すべてのCSSファイルでベンダープレフィックスつきの宣言をズラズラ並べるのはスマートではないだろうし。