Top

IE9とIE10のCSS対応の違いまとめ

2016年1月12日にいよいよ InternetExplorer8 を含むの各 OS での最新ブラウザ以外の公式フォローが終了します。

「IE9も終了だよ!」という間違った情報を聞いたりもしますが、IE9 に関しては Windows Vista(2017年4月まで利用可)で使える最新ブラウザとなるため InternetExplorer9 のフォローが終了するわけではありません。Vista は InternetExplorer10 以降のインストールが出来ません。

InternetExplorer

参考: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

shadow

#ex3 {
    text-shadow: 1px 1px 2px #333;
}

文字に影をつける text-shadow も IE9 は対応していません。IE9 は box-shadow の対応はできているので、こちらもいけそうな感じがするのですが IE10 以上の対応です。

transform 3D

rotateX

#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

この文章はカラム設定により InternetExplorer10 以上、もしくは、モダンブラウザの環境では3つのカラムにわかれます。幅が狭いのでとても読みにくいと思うのですが(笑)、CSSでこんな事も出来てしまいます。もっと流行れば面白いですね!

#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