ie9.jsを使うと出来ること、出来なくなること。

CSS javascript

最近ie9.jsを活用することが少々あるので、
いまさらながらまとめです。

配布場所

ie7-js
http://code.google.com/p/ie7-js/で配布されています。

デモはhttp://ie7-js.googlecode.com/svn/test/index.htmlで見れます。

使い方

head内に

と貼り付けるだけです。フッターに貼ると誤作動起こす場合がたまに合ったような気がします。

できるようになること

E > F
子セレクタ。直下の子要素にのみ適応するやつ。
E + F
隣接兄弟セレクタ。Eのすぐ下隣に居る弟要素。
E ~ F
間接セレクタ。E以降の弟要素全て。
.class1.class2
クラスの重複指定
:hoverの修正
a以外にも効くようになります。
[attr],[attr=”value”],[attr~=”value”],[attr|=”value”],[attr^=”value”][attr$=”value”],[attr*=”value”]
属性セレクタ全般
:before,:after
擬似要素。
:checked,:disabled,:empty,:enabled,:indeterminate,:first-of-type,:last-child,:last-of-type,:not(),:nth-child(),:nth-last-child(),:nth-last-of-type(),:nth-of-type(),:only-child,:only-of-type,:root,:target
CSS3の擬似クラス
opacity
透明度がfilter要らずで効くようになります。もちろん内部的にはfilterを使っているのですが。
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video
HTML5で追加された要素にCSSが当たるようになる。html5.jsとかhtml5shiv.jsを同時に読み込む必要はありません。
透過PNGへの対応
ファイル名をhoge-trans.pngにすると動作します。
もしくは、

とすると全てのPNGに対して有効になります。

出来なくなること。注意すべきこと。

まぁ便利なのですが、そうそう美味いだけの話というのはなかなか無いもので。

CSSハックが一部使えなくなる。

個人的にはこれが一番大きいような気がします。

  • * html
  • *:first-child+html

等のセレクタを使うようなハックは動作しなくなりました。まぁセレクタの挙動とかをFixするものなので当然なのでしょうけれど。。。
なので、ただ読み込んだだけで全てがうまくいくようなものではないようです。

重くなる

ただでさえ、IE6等は重いのに、さらに重くなります。いまどきIE6が動いてるPCは古いですしね。
特に、

等は全てのPNGが対象になるので、PNGをたくさん使うような場合はこの記述は避けたほうが懸命かと思います。

:before,:after

擬似要素を使うとき、どうやらここに1行分の高さを持った要素が生成されるようです。
なのでclearfix等を擦るときはしっかりheight:0にしないとデザインがおかしくなることがあります。
また、擬似要素を生成するとき、

のような要素を生成するので、このクラスを指定してスタイルを当てることもたまには使えるかもしれません。

新たに生成された要素にHTML5のタグがある場合

Ajaxなどを使っている場合に起こるのですが、
新しく生成されたHTML5要素には、やっぱりCSSが当たりません。
この場合は、
HTML 5 innerShiv
http://jdbartlett.github.com/innershiv/
などでやっつけるか、html5要素にcssを当てないだとか、html5要素をそこだけ避けるといったことが必要です。

ザーッと書き並べてみましたけど、どうでしょう。
自分が痛い目に合った記録みたいになってますね。

Google AppsもIE7のサポート打ち切りを決めたようなので、早くIE8,IE9等に移行して頂ければ幸いです。切に願っています。
Internet Explorer 8
http://www.microsoft.com/ja-jp/windows/products/winfamily/ie/function/default.aspx

Internet Explorer 9 のダウンロード
http://windows.microsoft.com/ja-JP/internet-explorer/downloads/ie-9/worldwide-languages

mautic is open source marketing automation