ariyasacca

▼ [雑記][Software]IE8 Standards modeでVMLを使いたいとき

以下、覚え書きです。

一般的に、Internet Explorerでベクトルグラフィックスを扱いたい時はVMLを使います。

これをInternet Explorer8のStandards mode（標準モード）で使う時には、気をつけないといけない点があります。

参考資料

• とほほのVML入門
• SummerWind - IE8のレンダリングモードに関するまとめ

とほほのVML入門サンプルを2つのモードで実装した例

参考資料のレンダリングモードを参考に、meta要素でそれぞれIE=7, IE=8を指定して、とほほのVML入門のサンプルをJavaScriptで実装したのが以下のページです（IE以外のブラウザでアクセスしても何も起きません）。

• VML Test (IE7 Standards mode)
• VML Test (IE8 Standards mode)

先日リリースされたIE8正式版で閲覧すると、前者は線が描画されますが、後者は線が描画されません。違いはmeta要素の指定だけです。

CSSのスタイル宣言が原因

どうしてモードの違いで動かなくなるのかさっぱり分からなかったんですが、

• IEBlog : Site Compatibility and IE8

上の記事の「Generic CSS Prefix Selectors」と云う見出しの付いたところに書いてありました。

「v\:*」っていうv\:に続く全てに対する宣言は使えなくなっているので、個別に宣言しろってことみたいです。

さっきの例だと、

ss.cssText = "v\\:*{behavior:url(#default#VML)}";

これはIE8 Standards modeでは解釈してくれないので、v:lineとv:polylineを使いたければ、

ss.cssText = ["v\\:line", "v\\:polyline"].join(",") + "{behavior:url(#default#VML)}";

それぞれ宣言してやる必要があるようです。試しにやってみたらIE8 Standards modeでも線が出ました。

IE8はかなり良いブラウザに仕上がってると思うんですが、今までのバージョンで動いていたものがいきなり動かなくなって困る事例が、これからポツポツと出て来るのかなぁという感じです。

2009-03-22追記

レンダリングモードごとのdocument.compatModeの値も気になって調べたのでメモっときます。

// IE8 Standards mode
(document.documentMode === 8)
(document.compatMode   === "CSS1Compat")

// IE7 Standards mode
(document.documentMode === 7)
(document.compatMode   === "CSS1Compat")

// Quirks mode
(document.documentMode === 5)
(document.compatMode   === "BackCompat")

各モードの名前の通りの結果となりました。

IE8でもQuirks modeの時は、引き続きレイアウト計算には注意が必要ですね。

参考

• DOCTYPE 宣言による Property の違いについて : 独断と偏見の何でもレビュー

▼ [雑記]名古屋美少女図鑑ほしい！

新潟発のフリーペーパー美少女図鑑。

• フリーペーパー［美少女図鑑］

2009年4月に、こいつの名古屋版にあたる名古屋美少女図鑑が創刊されるみたい。ぬおおお！　これはほしい！

「限定20,000部」で「名古屋市の中心市街にて無料配布」とのこと。競争率が高そうだなぁ・・・。

ヤフオクで探したら案の定、他の都市で既刊の冊子が幾つか見付かった。

参考

J-CASTニュース : 「美少女図鑑」に載りたい！　普通の女の子の応募殺到 |