• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン

2015/08/04

書いた人:
tanippa!
カテゴリ:
CSS
タグ
2,381 views

コーディングをしていると「あれ、これIE8で対応してたっけ…?」という状況がかなりありますよね。そこで今回は、IE8/9で使えるのか使えないのか紛らわしいCSSの機能を、覚えておいた方がいいメジャーな物に絞ってご紹介したいと思います。

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


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

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

CSS擬似クラス・擬似要素

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

IE8

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

  • :before
  • :after
  • :first-child

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

IE9

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

CSSプロパティ

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

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

リッチな見た目にする系

IE8 IE9
border-radius ×
box-shadow
text-shadow
opacity
gradients

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

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

動きを加える系

IE8 IE9
animation × ×
transform ×
transition × ×

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

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

その他

IE8 IE9
media query ×
box-sizing
background-size ×

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

以上

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

以上、たにっぱでした〜


この記事を読んだ人はこんな記事も読んでいます

<

>