2016年1月12日 (米国時間) で、
マイクロソフトによる旧バージョンの IE のサポートが終了し、
Windows 7、8.1 では IE 11 のみがサポート対象 となります。
（一部 Windows Vista などでは IE9 もサポート継続されますが、
IE8 は完全にサポートやセキュリティ・アップデートが終了します。）
［参照］
Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft
https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/
今まで IE7、8 対応の案件を多く担当していたため、
正直、新しい CSS について把握しきれていません。
そこで、新規案件でバリバリ使いたい IE11 以降で使える CSS の一部をまとめてみました。
記事の後半では、Windows Vista などでのみ引き続きサポートされる
IE9 でも使える CSS の一部をまとめています。
［参照］
Can I use... Support tables for HTML5, CSS3, etc「IE 7,8,9,10,11」
http://caniuse.com/#compare=ie+7,ie+8,ie+9,ie+10,ie+11
IE11 で使えるようになる代表的な CSS
装飾関係
●CSS Animation
アニメーション関係全般。
※「ベンダープレフィックス（接頭辞）」が不要になります。
＞＞マウスオーバーで動作するアニメーションサンプル（6種類）
https://www.tam-tam.co.jp/tipsnote/sample/umeda/151124/
●CSS Gradients
グラデーション（水平・垂直・放射状）。
※Android 4.4～、Safari・iOS 7.0～
●CSS3 Border images
囲み罫を画像で表現。
●Flexible Box Layout Module
ものすごく簡単にレイアウトができる「フレキシブルボックス」を使用できます。
●SVG filters
SVGオブジェクトに「にじみ」や色操作など、Photoshop っぽい効果を使用。
［参照］
[SVG] filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法 ｜ memocarilog
http://memocarilog.info/webdesign/7676
IE9 で使えるようになる代表的な CSS
角丸
.sample {
border-radius: 10px;
}
※「ベンダープレフィックス（接頭辞）」が不要になります。
透明度
/* 50%で表示 */
.sample {
opacity: 0.5;
}
※「ベンダープレフィックス（接頭辞）」が不要になります。
疑似クラス（「:last-child」など）
最初の要素に適用する「:first-child」は古いバージョンでも使えましたが、
最後の要素に適用する「:last-child」も使えるようになりました。
また、
「何番目」「奇数/偶数」などにも対応しています。
/* 基本 */
.sample {
margin-left: 10px;
}
/* 最初の要素のみに適用 */
.sample:first-child {
margin-left: 0;
}
/* 最後の要素のみに適用 */
.sample:last-child {
margin-left: 0;
}
/* 3番目のみに適用 */
.sample:nth-child(3) {
margin-left: 0;
}
/* 3の倍数（3、6、9…）のみに適用 */
.sample:nth-child(3n) {
margin-left: 0;
}
/* 奇数のみに適用 */
.sample:nth-child(odd) {
margin-left: 0;
}
/* 偶数のみに適用 */
.sample:nth-child(even) {
margin-left: 0;
}
これで、
数列×数行のボックスを並べる際、適当な余白を追加するための
「一番右端にだけ別の class を追加する」などという手間も必要なくなります。
背景画像の詳細設定
スマホサイトではすでに一般的に使われていますが、IE9以降でも使えるようになります。
［参照］
background-sizeプロパティについてまとめ | Tips Note
https://www.tam-tam.co.jp/tipsnote/html_css/post6015.html
/* 値を指定した場合は、忠実にその値で設定される。（縦横比は無視） */
.sample {
background-image: url("sample.png");
background-size: 50% 50%;
}
/* フルスクリーンに画像を使用できる。表示領域をはみ出した部分は非表示。（縦横比は保持） */
.sample {
background-image: url("sample.png");
background-size: cover;
}
/* 表示領域に対して、背景画像全体が表示される。（縦横比は保持） */
.sample {
background-image: url("sample.png");
background-size: contain;
}
単位
vh、vw
ブラウザのビューポートを 100% とした時に対する相対的な単位です。（v = Viewport）
・vh： ビューポートの高さ
・vw： ビューポートの幅
・vmin： ビューポートの幅と高さのうち、値が小さい方
・vmax： ビューポートの幅と高さのうち、値が大きい方
/* 要素をページの高さいっぱいにする */
.sample {
height: 100vh;
}
※「vw（ビューポートの幅）」は、html・body の幅よりも大きくなるため、
使いどころが若干難しいです。（下記ページ参照ページ）
［参照］
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス
http://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html
rem
フォントサイズを指定するとき、「em」「%」「px」などを使って指定することがありますが、
「rem」という新しい単位を使用することで、設定がとても簡単になります。
（「rem」とは、「root」+「em」という意味。root要素（html要素）に対して相対的に指定することができます。）
［参照］
CSS3の「rem」でフォントサイズ指定
https://www.tam-tam.co.jp/tipsnote/html_css/post1466.html
IE7、8 対応を切ることで使えるようになった機能はまだまだたくさんあります。
ぜひいろいろ試してみてください！