最新ブラウザのHTML5タグへの対応状況をまとめてみた

2009-07-03 オンラインに復帰します

最新ブラウザのHTML5タグへの対応状況をまとめてみた

ちょっとしたプログラムを書いて、各メジャーブラウザのHTML5タグへの対応状況を調べてみました。現時点でのHTML5仕様に含まれているタグが、ブラウザにUI要素として認識されるかどうかを調べただけです。これだけでは、HTML5の対応状況としては一部しか調べられませんが、一応の参考として。

間違いがありましたらご連絡ください。

具体的に行った調査方法は、記事の最後を参照してください。

	IE8	Chrome2	Chrome3(Beta)	Safari4	Firefox3.5	Opera10(Beta)
div	○	○	○	○	○	○
section	×	×	×	×	×	×
nav	×	○	○	○	×	×
article	×	×	×	×	×	×
aside	×	○	○	○	×	×
h1	○	○	○	○	○	○
h2	○	○	○	○	○	○
h3	○	○	○	○	○	○
h4	○	○	○	○	○	○
h5	○	○	○	○	○	○
h6	○	○	○	○	○	○
hgroup	×	○	○	○	×	×
header	×	○	○	○	×	×
footer	×	○	○	○	×	×
address	○	○	○	○	○	○
p	○	○	○	○	○	○
hr	○	○	○	○	○	○
br	○	○	○	○	○	○
pre	○	○	○	○	○	○
dialog	×	○	○	○	×	×
blockquote	○	○	○	○	○	○
ol	○	○	○	○	○	○
li	○	○	○	○	○	○
ul	○	○	○	○	○	○
dl	○	○	○	○	○	○
dt	○	○	○	○	○	○
dd	○	○	○	○	○	○
a	○	○	○	○	○	○
q	○	○	○	○	○	○
cite	○	○	○	○	○	○
em	○	○	○	○	○	○
strong	○	○	○	○	○	○
small	○	○	○	○	○	○
mark	×	○	○	○	×	×
dfn	○	○	○	○	○	○
abbr	○	○	○	○	○	○
time	×	×	×	×	×	×
progress	×	×	×	×	×	×
meter	×	×	×	×	×	×
code	○	○	○	○	○	○
var	○	○	○	○	○	○
samp	○	○	○	○	○	○
kbd	○	○	○	○	○	○
sub	×	○	○	○	○	○
sup	×	○	○	○	○	○
span	○	○	○	○	○	○
i	○	○	○	○	○	○
b	○	○	○	○	○	○
bdo	○	○	○	○	○	○
ruby	○	○	○	○	×	×
rt	×	○	○	○	×	×
rp	×	○	○	○	×	×
ins	○	○	○	○	○	○
del	○	○	○	○	○	○
figure	×	○	○	○	×	×
img	○	○	○	○	○	○
iframe	○	○	○	○	○	○
embed	○	○	○	○	○	○
object	○	○	○	○	○	○
param	○	○	○	○	○	○
video	×	×	○	○	○	×
audio	×	×	○	○	○	×
source	×	×	○	○	○	×
canvas	×	○	○	○	○	○
map	○	○	○	○	○	○
area	○	○	○	○	○	○
table	○	○	○	○	○	○
caption	○	○	○	○	○	○
colgroup	○	○	○	○	○	○
col	○	○	○	○	○	○
thead	○	○	○	○	○	○
tr	○	○	○	○	○	○
th	○	○	○	○	○	○
tbody	○	○	○	○	○	○
td	○	○	○	○	○	○
tfoot	○	○	○	○	○	○
form	○	○	○	○	○	○
fieldset	○	○	○	○	○	○
legend	○	○	○	○	○	○
label	○	○	○	○	○	○
input	○	○	○	○	○	○
button	○	○	○	○	○	○
select	○	○	○	○	○	○
optgroup	○	○	○	○	○	○
option	○	○	○	○	○	○
datalist	×	×	×	×	×	○
textarea	○	○	○	○	○	○
keygen	×	○	○	○	○	○
output	×	×	×	×	×	○
details	×	×	×	×	×	×
datagrid	×	×	×	×	×	×
command	×	×	×	×	×	×
bb	×	×	×	×	×	×
menu	○	○	○	○	○	○

調査方法

HTML5タグを使用したWebページをブラウザに読み込ませ、以下の方法で「タグがUI要素として解釈されている」かどうかの判定としました。

IE・・・判定方法に最も苦慮したブラウザ。UI要素として解釈されないタグは、CSSを定義してもstyleプロパティに反映されない、と言うIEのクセを利用しています。
Firefox・・・判定は簡単。DOM要素のtoStringメソッド（document.getElementById('ID').toString()）を呼び出すと、UI要素として解釈されないタグは「[object HTMLUnknownElement]」と表示されます。
Opera・・・Firefoxと同じ。
Safari、Chrome・・・同じWebkitベースのブラウザ。実は、UI要素かどうかの完璧な判定方法が未だに分かっていません（知ってる人居たら教えてください）。現在は、DOM要素のtoStringメソッドで表示されるDOM インターフェース名が、HTML5仕様と一致しているかどうかを判定しています。仕様に従っていないインターフェース名のところもある（例えばqタグは仕様だとHTMLQuoteElementだが、WebkitだとHTMLBlockquoteElement）ので、そうした部分は手作業で表を調整しました。

まとめ

やっぱり、IE8の対応状況が残念ですね。video,audio,canvasと言った目玉のタグが全然使えません。

Operaもここらへん使えないみたい？でも、こちらの記事とか見る限りHTML5には興味津々のようなので、対応される日は近いのではないでしょうか。

今回の調査では、フォーム関連の変更（バリデータや、input要素のtypeが増えてたり）がわからないので、近いうちに再調査しようと思います。

ソースはこちら。

Permalink | コメント(4) | トラックバック(5) | 23:23

コメント一覧

javascripter 2009/07/04 00:13 Safar、Google ChromeiでUI要素かどうか判定するのは
document.createElement("rb").constructor == HTMLElement
のようにすればいいと思います。UI要素と認識されていなければtrueです。

nanto_vi 2009/07/04 02:16 「UI要素」というのがどういう意味かわかりませんが、Safari、Chrome、Firefox はソースコードが公開されているので、それを見れば対応している要素もわかります。

http://trac.webkit.org/browser/trunk/WebCore/html/HTMLTagNames.in
http://mxr.mozilla.org/mozilla-central/source/parser/htmlparser/public/nsHTMLTagList.h

ただし、これらは開発版の最新のソースコードであり、Safari 4.0 系、Firefox 3.5 系に相当するバージョンのものはそれぞれ以下になります。

http://trac.webkit.org/browser/branches/Safari-6528/WebCore/html/HTMLTagNames.in
http://mxr.mozilla.org/mozilla1.9.1/source/parser/htmlparser/public/nsHTMLTagList.h

見れば大体見当がつくように、Safari (おそらく Chrome も) は nav、aside、hgroup、header、footer、dialog、mark、ruby、rt、rp、figure 要素に対応していません。

また、IE は sub、sup、rt 要素に対応しています。rp 要素に関しては http://msdn.microsoft.com/en-us/library/ms533029%28VS.85%29.aspx に載っていませんが、rp 要素の内容を表示しないことなどから対応していると思われます。

なお、以上で「対応している」といったのはあくまでその要素がブラウザにとって既知であるという意味に過ぎません。ブラウザがその要素を HTML 5 に添った形で実装しているかは別問題です。

> id:javascripter
それでは span 要素等も「UI要素と認識されていな」いことになってしまいます。

hito_hpp 2009/07/04 16:39 DOM上で定義されている要素であるかどうかを見るのに何の意味があるのでしょうか。
たとえばruby要素ですが、現時点では、IEしかまともにサポートしていません。
Chromeのvideoとaudio要素の実装は非常に不安定で、まだ実用段階に達していません。

Syunpei 2009/07/06 07:21 > javascripterさん
> nanto_viさん
貴重なご助言ありがとうございます！ブラウザの挙動から自動的にHTML5対応状況を割り出せないかと考えていましたが、ソースコードも合わせて確認してみます。

> hito_hppさん
ご意見ありがとうございます。
「HTML5仕様書で規定されているタグがどのブラウザでどれくらい使えるのか？」を調べてみたかったと言う、個人的な興味からの調査ですので、ご容赦願えれば、と思います。

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。

トラックバック - http://d.hatena.ne.jp/Syunpei/20090703/1246631018

リンク元

IT-Walker on hatena

2009-07-03 オンラインに復帰します

最新ブラウザのHTML5タグへの対応状況をまとめてみた

調査方法

まとめ