だいぶ前に作っていたJavaScriptのコードに手直しをしようといろいろ作業。IE11で変更が加えられていた部分でひどく手間取った。原因の1つは「createStyleSheetが使えなくなっていたこと」だ。解決に至るまでのてんやわんやをメモ。
対象となるプログラム(プログラムA)のもとの仕様は、スタイルシートを指定するために、別途CSSファイルを読み込むという手順だった。しかし、ファイルのロードに時間がかかる。ファイルの容量自体は小さいのだけど、DNSルックアップが入るので、無駄な時間が発生する。それを抑えたい。コードに直接入れ込んでしまえば、そのコード自体のロード時間は伸びるけどトータルでは短くなるはず。そんな目論見。
で、以前別のプログラム(プログラムBとする)で使った手法をとることに。IEではcreateStyleSheetを使うことになる。その時に参考にしたのがこれ。
document.createStyleSheet で動的に CSS を生成 – IT戦記
以前と同じように試すと「’createStyleSheet’プロパティまたはメソッドをサポートしていません。」とか言われる。検索してみるとこんな記事に遭遇。
IE11から削除されたdocument.createStyleSheetによる不具合例
Internet Explorerは、Version 4からドキュメントのスタイルシートを作成するdocument.createStyleSheet()という関数を独自に実装しました。しかし、document.createStyleSheet()関数がInternet Explorer 11(2013年10月18日リリース、2013年11月7日よりWindows 7 / Windows Server 2008 R2向けにも提供)より削除されています。
ですって。あらら。
しかし、これを使った別のプログラムはいまだにIE11で動いてるんだけどなあ。という疑問が。
とりあえず、ブラウザの判別を加えてなんとかしようと思い、以前使った方法で試す。これはプログラムAを作った際に、途中で不要になりコメントアウトしていた部分を参照した。window.ActiveXObjectを使った方法だ。しかし、また問題が。
IE11ではwindow.ActiveXObjectによるブラウザ判別もできなくなっていたのだった。
IE11で変わったActiveXObject、attachEventやUser Agentに対応してみる | Zafiel
むむむ。
IE11から「window.ActiveXObject」がundefinedを返すようになりました。
とある。
じゃあ、先に触れたプログラムBではどうだったのか? 確認してみると、window.ActiveXObjectは使っていなかった。人の記憶はあてにならないものだ。
そこで使っていたコードはおそらくここにあるのと同じ方法であった。
[JS]user-agentを参照せずにIEの各バージョンを判定するシンプルなスクリプト | コリス
バージョンを判別するためにも使われるコードなのだが、これもIE11では使えなくなっていたのだった。おお。
「[if gt IE ‘+(++v)+’]」みたいなのをHTMLコードに入れて、その出力結果で判断するわけなのだけど、この手法自体がIE11では正常に動作しないという。ここにあった。
IEのバージョンベクタ記述例 – お墨付き!
バージョンベクタというんだそうだ。なるほど。IE11では「完全にバージョンベクタが廃止されたことがわかります。」ともある。
ということは。プログラムBがIE11でもちゃんと動いていたのは、以下の理由によることになる。
- ブラウザ判別でIEではないとされた
- Chromeなどと同じ方法を使う
- createStyleSheetではなく、createElement(‘style’)とappendChild()を使う
そんな流れ。たまたまうまくいっていたとしか言いようがない。我ながらずさん!
で、調べている途中でこんなにも遭遇。
♪NAI NAI NAI IEじゃない (c) シブがき隊
今回の問題の答えみたいのが、ここに詰まってた。
「IEかIEじゃないか」で振り分けるという形。 このような方法はIE11が出た今となってはさっさとやめた方がいいと思う。
ともある。さらに。
で、その解決方法は何も難しいことではなく(スクリプトを修正するのは手間かもしれないがw)、MS自身が言っているように、Web標準の使いたいメソッドやプロパティをサポートしているかどうか、で振り分ければいいだけの話。
なるほど。たいへん勉強になりました。
ということで、2歩ぐらい前進。まだまだ勉強が必要だ。
コメント