IE11でcreateStyleSheetが使えなくなってた&ブラウザ判別の問題

 だいぶ前に作っていたJavaScriptのコードに手直しをしようといろいろ作業。IE11で変更が加えられていた部分でひどく手間取った。原因の1つは「createStyleSheetが使えなくなっていたこと」だ。解決に至るまでのてんやわんやをメモ。
 対象となるプログラム(プログラムA)のもとの仕様は、スタイルシートを指定するために、別途CSSファイルを読み込むという手順だった。しかし、ファイルのロードに時間がかかる。ファイルの容量自体は小さいのだけど、DNSルックアップが入るので、無駄な時間が発生する。それを抑えたい。コードに直接入れ込んでしまえば、そのコード自体のロード時間は伸びるけどトータルでは短くなるはず。そんな目論見。


 で、以前別のプログラム(プログラムBとする)で使った手法をとることに。IEではcreateStyleSheetを使うことになる。その時に参考にしたのがこれ。
 document.createStyleSheet で動的に CSS を生成 – IT戦記はてなブックマーク - document.createStyleSheet で動的に CSS を生成 - IT戦記
 以前と同じように試すと「’createStyleSheet’プロパティまたはメソッドをサポートしていません。」とか言われる。検索してみるとこんな記事に遭遇。
 IE11から削除されたdocument.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で変わったActiveXObject、attachEventやUser Agentに対応してみる | Zafiel
 むむむ。

IE11から「window.ActiveXObject」がundefinedを返すようになりました。

 とある。
 じゃあ、先に触れたプログラムBではどうだったのか? 確認してみると、window.ActiveXObjectは使っていなかった。人の記憶はあてにならないものだ。
 そこで使っていたコードはおそらくここにあるのと同じ方法であった。
 [JS]user-agentを参照せずにIEの各バージョンを判定するシンプルなスクリプト | コリスはてなブックマーク - [JS]user-agentを参照せずにIEの各バージョンを判定するシンプルなスクリプト | コリス
 バージョンを判別するためにも使われるコードなのだが、これもIE11では使えなくなっていたのだった。おお。
 「[if gt IE ‘+(++v)+’]」みたいなのをHTMLコードに入れて、その出力結果で判断するわけなのだけど、この手法自体がIE11では正常に動作しないという。ここにあった。
 IEのバージョンベクタ記述例 – お墨付き!はてなブックマーク - IEのバージョンベクタ記述例 - お墨付き!
 バージョンベクタというんだそうだ。なるほど。IE11では「完全にバージョンベクタが廃止されたことがわかります。」ともある。
 ということは。プログラムBがIE11でもちゃんと動いていたのは、以下の理由によることになる。

  • ブラウザ判別でIEではないとされた
  • Chromeなどと同じ方法を使う
  • createStyleSheetではなく、createElement(‘style’)とappendChild()を使う

 そんな流れ。たまたまうまくいっていたとしか言いようがない。我ながらずさん!
 で、調べている途中でこんなにも遭遇。
 ♪NAI NAI NAI IEじゃない (c) シブがき隊はてなブックマーク - ♪NAI NAI NAI IEじゃない (c) シブがき隊
 今回の問題の答えみたいのが、ここに詰まってた。

「IEかIEじゃないか」で振り分けるという形。 このような方法はIE11が出た今となってはさっさとやめた方がいいと思う。

 ともある。さらに。

で、その解決方法は何も難しいことではなく(スクリプトを修正するのは手間かもしれないがw)、MS自身が言っているように、Web標準の使いたいメソッドやプロパティをサポートしているかどうか、で振り分ければいいだけの話。

 なるほど。たいへん勉強になりました。
 ということで、2歩ぐらい前進。まだまだ勉強が必要だ。

コメント