Firefox 3.6 の HTML5 パーサーを試してみた
以前、Firefox 3.6 で実装が予定されている CSS についての記事を投稿したとき、ブックマークのコメントにて vantguarde さんから
CSSじゃないけれど、html5.enableをtrueにすればtext/htmlでSVGもつかえるよ！
とコメントをいただきました。せっかくコメントをいただいたので、Firefox 3.6 の HTML5 パーサーの動作を試してみました。
HTML5 パーサーは Firefox 3.6 β ではデフォルトで html5.enable が false になっています。これを有効にするにはロケーションバーに about:config を入力して、設定から html5.enable を true に変更します。HTML 5 パーサーを有効にすることで text/html の文書に SVG や MathML を混在させて表示できるようになります。
次のデモ 2つは HTML5 パーサーが有効な状態のときに表示を確認することができます。
text/html に SVG を埋め込んだデモ (HTML5 パーサーが有効な Web ブラウザー用)
text/html に MathML を埋め込んだデモ (HTML5 パーサーが有効な Web ブラウザー用)
HTML5 パーサーを有効にしたときの特徴は…
- text/html に SVG や MathML を埋め込むことができる
- 異なる名前空間の語彙に対する名前空間の宣言がいらない
- 一部の属性値は引用符で括らなくてもいい
- 空要素を閉じていなくてもパースエラーにならない (ただし、自身の後続に要素がある場合は閉じておかないとその子要素になってしまう)
といった具合でした。
例えば、HTML の文書に名前空間宣言をせずに SVG を埋め込み、circle 要素を閉じず、またその属性値を引用符で括らないで
<!doctype html>
<html>
<head>
<title>SVG in text/html</title>
</head>
<body>
<svg><circle cx=50 cy=50 r=50 fill=#f00></svg>
</body>
</html>のように書くことができました。埋め込みだけどなんかエクステンシブルな感じです。
いつの日か <canvas>, <svg>, <math> を使い分けたりする日がくるのかも。
HTML5 の SVG と MathML は 4.8.15 MathML と 4.8.16 SVG にいろいろ書いてあります。
トラックバックURI
http://www.yomotsu.net/wp/wp-trackback.php?p=550
この記事へのコメントはまだありません
コメントフォーム