IE11～＆IE9～使える系 CSS まとめ

HTML・CSS

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