IE9とIE10のCSS対応の違いまとめ
2016年1月12日にいよいよ InternetExplorer8 を含むの各 OS での最新ブラウザ以外の公式フォローが終了します。
「IE9も終了だよ！」という間違った情報を聞いたりもしますが、IE9 に関しては Windows Vista（2017年4月まで利用可）で使える最新ブラウザとなるため InternetExplorer9 のフォローが終了するわけではありません。Vista は InternetExplorer10 以降のインストールが出来ません。
参考：Internet Explorer サポートポリシー変更の重要なお知らせ
参考：VistaへのIE10のインストールはできるのですか？
ただ、IE9 をフォローすべきかどうかという問題はまた別の問題になります。現状 Vista 利用者はほぼおらず、よって IE9 利用者もほぼいないわけです。
しかし、公式がまだフォローしている以上、消えてなくなるという事はないので IE9 もフォローしたい場合問題となってくる CSS の対応の違いをまとめてみます。全て CSS3 のプロパティとなります。
transition
#ex1 {
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
}
#ex1:hover {
background-color:#E91E63;
}
色をだんだんと変更したりする、いわゆる「アニメーション」関係のプロパティです。マウスを hover させた際なんかに使うことが多いです。
IE9までは一切対応しておらず、IE10からの対応となってます。
animation
#ex2 {
animation: anime 0.5s ease 0s infinite alternate;
-webkit-animation: anime 0.5s ease 0s infinite alternate;
}
@keyframes anime {
0% {
width: 50px;
}
100% {
width: 150px;
}
}
@-webkit-keyframes anime {
0% {
width: 50px;
}
100% {
width: 150px;
}
}
transition の対応ができていないので、当然 animation の対応も IE9 は出来ておりません。IE10以上の対応です。
text-shadow
#ex3 {
text-shadow: 1px 1px 2px #333;
}
文字に影をつける text-shadow も IE9 は対応していません。IE9 は box-shadow の対応はできているので、こちらもいけそうな感じがするのですが IE10 以上の対応です。
transform 3D
#ex4:hover {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
transition と組み合わせて使うことが多い transform です。
2D 関係は IE9 から対応していますが、立体的な変化となる 3D、よく使われるのは rotateX、rotateY などの回転系に関しては IE10 以上の対応となります。
gradient
#ex5 {
background-image: linear-gradient(to right, #2196F3, #E91E63);
background-image: -webkit-gradient(linear, left center, right center, from(#2196F3), to(#E91E63));
}
グラデーションも IE9 は対応しておりません。linear-gradient（直線的なグラデーション）と radial-gradient（円形のグラデーション）がありますが、どちらも IE10 からの対応となります。
プロパティ、値の書き方は各ブラウザ異なるので注意してください。
columns
#ex6 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
マルチカラム、段組構造を作るプロパティです。あまり使われているのを見ないプロパティですが、IE10 以上であればベンダープレフィクスが必要なブラウザもありますが使うことが出来ます。
参考ページ
調べ落としがあるかもしれませんが、これでおそらく全てです。IE9 も使えると思って勘違いしないように注意しましょう。
各プロパティの詳しい利用方法については下記の参考ページをご参照ください。
参考ページ：
Can I use
MDN - transition
MDN - animation
MDN - text-shadow
MDN - transform
MDN - linear-gradient
MDN - columns