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つ。ほかにもいろいろあるけど、とりあえず個人的にあったら便利かなーと思ったものを適当にピックアップしてみた。

・localStorage
http://p2b.jp/demo/localStorage2.html
・Canvas
IE9のテスト用サイト。
http://ie.microsoft.com/testdrive/Performance/FishIE%20tank/Default.html
http://ie.microsoft.com/testdrive/Performance/AsteroidBelt/Default.html
・WebWorker
http://html5.web.fc2.com/html5/api/worker1.html
・WebSocket
http://bloga.jp/ws/jq/wakachi/mecab/ruby.html

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


IE9(Preview)Firefox4(Beta)Chrome5
localStorage対応対応対応
Canvas対応対応対応
WebWorker非対応対応対応
WebSocket非対応対応対応
video要素対応対応 対応
やはりIE9はもう少しがんばって欲しいが、とりあえずlocalStorageとCanvasは使う気でいてよさそうだ。ちなみに、video要素は動画フォーマットの互換性という問題もあり、クロスブラウザにするのは少し手間がかかりそうだ。

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


IE9(Preview)Firefox4(Beta)Chrome5
box-sizing対応対応対応
border-raduis対応対応対応
text-shadow非対応対応対応
box-shadow対応対応対応
Multiple Columns非対応対応対応
rgba対応対応対応
transform:rotate非対応対応対応
border-image非対応一部対応対応
transition非対応対応対応
Outline Offset対応対応対応
Resizing対応対応対応

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

結論

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

このエントリーをはてなブックマークに追加
名前 (必須)
コメント (必須)
確認文字 (必須) ひらがなで「ども」と入力してください。(スパム防止用)