« リンク&引用のためのブックマークレットを修正 | トップページ | innerHTMLを書き換えようとしたらInvalidって言われる »

2014年9月10日 (水曜日)

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歩ぐらい前進。まだまだ勉強が必要だ。


|

« リンク&引用のためのブックマークレットを修正 | トップページ | innerHTMLを書き換えようとしたらInvalidって言われる »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/60293795

この記事へのトラックバック一覧です: IE11でcreateStyleSheetが使えなくなってた&ブラウザ判別の問題:

« リンク&引用のためのブックマークレットを修正 | トップページ | innerHTMLを書き換えようとしたらInvalidって言われる »