IE8/9で使える・使えないメジャーなCSSの機能まとめ

これからはHTML5だ！CSS3だ！と言われてから大分経ちますが未だに切れないIE8/9。コーディングをしていると「あれ、これIE8で対応してたっけ…？」という状況がかなりありますよね。

そこで今回は、IE8/9で使えるのか使えないのか紛らわしいCSSの機能を、覚えておいた方がいいメジャーな物に絞ってご紹介したいと思います。

CSS擬似クラス・擬似要素

まず、CSSの擬似クラス・擬似要素（:first-childとかコロンが付くやつ）に関してまとめたいと思います。

IE8

IE8ですが、ほとんど使えません。メジャーな物で、使える物は下の３つです。

• :before
• :after
• :first-child

マイナーな物も含めればもう少しあるのですが、自分はとりあえず上の3つに関してはよく使うので覚えておくようにしています。

IE9

IE9ですが、全部使えます。「:nth-last-child」やら「:only-child」やらマイナーなやつも使いたい放題です。

CSSプロパティ

では次に、CSSのプロパティに関してまとめたいと思います。

こちらは系統毎にまとめてご紹介します。

リッチな見た目にする系

「△」は「filter(-ms-filter)」プロパティで実現が可能な物です。

border-radiusに関してはIE8ではどうしようもないので、IE8では角は丸くならないものと通すか画像で行くかどちらかですね。

動きを加える系

こちらはIE8/9ともにほとんど対応していません。アニメーションはjQuery必須になりますね。

かろうじてtransformがIE9で対応しているくらいです。

その他

結構知らない人も多いのですが、「box-sizing」は何気にIE8が対応しています。

以上

ここらへんを意識していないと、後からIEチェックした時に使えない機能を使っていた事に気づいてやり直し！なんてことが発生しかねないので注意しましょう！

以上、たにっぱでした〜