IEは古いバージョンでもセキュリティ対策のアップデートが公開され、最新のセキュリティ環境で利用することができました。
マイクロソフトはこの姿勢を見直し、今後は最新バージョンのIEのみをアップデートすることとなりました。これにより、IE8・IE10がサポート対象外となります。
ホームページ管理者や開発者にどのような影響があるかを調べてみます。
マイクロソフトの公式な発表の中身をまとめてみます。
IEの最新バージョンはIE11なので「IE11以外はサポート外」なのかと思いがちですが、サポート対象に含まれているWindows VistaではIE11がインストールできないため、Vistaでの最新バージョンであるIE9もサポート対象になっています。
また、ここではWindows Server 2012の最新バージョンがIE10と表記されおり、IE9～11の3つがサポート対象なのかと思いますが、マイクロソフトの別の案内ではIE9とIE11のみが強調されています。IE10がサポート対象なのかどうかは不明ですが、少なくとも一般人向けのOSにおいては、IE9・IE11のみがサポート対象であると認識すれば良いでしょう。
| バージョン | 今後のアップデート |
| IE8 | × |
| IE9 | ○ Vistaの最新 |
| IE10 | × |
| IE11 | ○ Windows7、Windows8.1の最新 |
以前ブログに書いた「PC・モバイル(スマホ)混合ブラウザシェアランキング」からIE部分を抽出し、更に今回のサポートポリシー変更によるシェアの移動を勘案して将来のシェアを予想してみます。
単位はパーセント、パソコン・スマホの全アクセスを100とした場合の割合です。
サイトA・BはいずれもレスポンシブウェブデザインによりPC・スマホの両アクセスに対応しており、Aはモバイル、BはPCからのアクセスが多い傾向があります。
| 2015/6のシェア | 2016/1以降の予想 | |||
|---|---|---|---|---|
| サイトA | サイトB | サイトA | サイトB | |
| IE6 | 0.04 | 0.1 | 0.04 | 0.1 |
| IE7 | 0.13 | 0.4 | 0.13 | 0.4 |
| IE8 | 0.53 | 1.42 | 0.13 | 0.4 |
| IE9 | 0.7 | 2.88 | 1.1 | 3.9 |
| IE10 | 0.95 | 2.88 | 0.13 | 0.4 |
| IE11 | 9.33 | 20.38 | 10.15 | 22.86 |
既にサポートの切れているIE6・IE7のユーザーが一定数残っていることからも、今後もIE8・IE10の利用者が残ると思われます。これをIE7のシェアと同じ割合とし、残りのIE8ユーザーがIE9へ、同じくIE10ユーザーがIE11へ移行したと想定した試算です。
PC・モバイルの全アクセスを100とした場合、モバイル・Mac・Windowsの他ブラウザ（Chromeなど）からのアクセスを差し引いたIEのシェアは1～3割です。
その中でも、IE8・IE10のシェアは1.5～3%超と大きくないため、ブラウザシェアへの影響は少ないといえます。
しかし、CSSをIE8に対応させていた開発者にとって、今回のサポートポリシーの影響は非常に大きなものです。これについては次項で説明します。
ここでは、以前ブログに書いた「ベンダーprefixの要否まとめ」を参考に、IE8・IE10がサポート対象外になり、IE9がサポート対象に残留した今回のポリシー変更がCSSコーディングに及ぼす影響をまとめてみます。
IE8では利用できなかったCSSプロパティや疑似要素などのスタイルをまとめます。
| IE8 | IE9～ | ||
| メディアクエリ （レスポンシブ対応） | × | ○ | |
|---|---|---|---|
| rgbaによる色指定 | × | ○ | |
| CSSプロパティ | opacity *1 | × | ○ |
| background-size | × | ○ | |
| background複数指定 | × | ○ | |
| box-shadow | × | ○ | |
| border-radius | × | ○ | |
| transform :rotate :scale :skew | × | ○ | |
| 疑似要素 | :first-child | × | ○ |
| :last-child | × | ○ | |
| :first-of-type / :last-of-type | × | ○ | |
| :nth-child / :nth-of-type | × | ○ | |
以下、それぞれについて解説します。
IE8からIE9への移行が瞬時に完了するわけではなく、IE6・IE7・古いSafariなどのブラウザを利用しているユーザーが一定数いることから、以下に解説することの実行の是非と時期については十分に検討する必要があります。
表示幅に合わせてスタイルを動的に変化させることが可能なメディアクエリが全ブラウザで利用可能となります。
元々、スマートフォンではメディアクエリを認識できたため影響は少ないように思いますが、メディアクエリの記述方法に影響が出ます。
メディアクエリのオススメの書き方で説明していますが、これまでの記述方法では、
#css {PC向け}
@media (max-width: 1020px) and (min-width: 768px) { #css {狭いブラウザとタブレット向け} }
@media (max-width: 767px) { #css{スマホ向け} }
のようにPC向けを基準としていました。これは、IE8をカバーするためにまずIE8を含んだPC向けの記述を行い、メディアクエリを認識できるその他のブラウザ用の記述を後から上書きしていたからです。
しかし今後は、
#css {スマホ向け}
@media (min-width: 768px) and (max-width: 1019px) { #css{狭いブラウザとタブレット向け} }
@media (min-width: 1020px) { #css {PC向け} }
のような記述も可能となります。
PCよりもモバイルからのアクセスの方が多い現状では、モバイルファーストのこちらの方が自然な記述のように思えます。
rgba(128, 128, 128, 0.5)のようにして透過度アルファチャンネルを含んだ色指定が全ブラウザ対応となります。影響大です。
IE8ではrgbaの色指定を無視して透明にしてしまうため、暗め透過色に白のテキストを載せている場合にIE8で判読できなくなり、必ずこれをフォローする必要がありました。今後はその必要がありません。
透過色を重要な場所に利用できるようになり、表現の幅が広がります。やむを得ずopacityで代用していた部分をrgbaで表現できます。
要素全体を透過させるopacityは、通常はfilter: alpha(opacity=50); や -ms-filter: "alpha(opacity=50)";といった旧IE用の定義を併記していましたが、これが不要になります。
background-size:cover; background-size:contain;などをbackground-imageと組み合わせることで背景画像を描写領域に合わせて自動調整できる便利な機能が全ブラウザ対応となります。
background-sizeは、メディアクエリとの親和性が良く広く利用されています。
100x100pxの領域に300x300pxの画像をbackground-size:coverと合わせて利用すると、スマートフォンを中心に普及が進む高精細なディスプレイで画像がきれいに表示されるメリットがあります。しかし、background-size未対応のIE8では画像の一部しか表示されまずフォローが必要でした。
background-imageやbackground-positionなどはカンマ区切りで複数指定が可能です。これにより、複数画像の配置、画像を重ねるレイヤー表現、animationと連動させたスライド表示などが可能です。
未対応のIE8用に別途必要だったフォローが不要になり、複数指定を利用して重要な表現をしてもユーザービリティを損ないません。
影を付けるbox-shadow、角丸を実現するborder-radius、要素を回転させたり歪めたりと形状を変えるtransformも全ブラウザ対応となります。
表や箇条書きでストライプの表現を実現するなど使いどころの多いnth-child / nth-of-typeが全ブラウザ対応となります。
text-shadow、グラデーション（gradient）、transition、animation、border-imageを利用する場合は、以前としてIE9用のフォローが必要です。
細かいバグからの解放はあるものの特に影響はありません。border-imageの適用範囲が若干増えます。