CSSで大変動！？Windows Vistaのサポート終了がWebに及ぼす影響は ｜ SiTest (サイテスト) ブログ

こんにちは、プロダクト開発チーム エンジニアの森永です。

以前のエントリ「ブラウザのこれまでの変遷と2017年の動向を考える」でも触れましたが、2017年4月12日をもってWindows Vistaのサポートが終了となります。それに伴い、クライアントPC向けのInternet Explorer バージョン9(以下IE9)もサポートが終了となります。Windows Server 2008でのIE9のサポートは2020年1月15日まで続きますが、実質的にIE9を業務で考慮する必要はほぼなくなったと言って良いでしょう。

Windows各バージョンのInternet Explorerのサポート期限についてはatmarkITの記事「一目で分かる、各Windows OSでのInternet Explorerのサポート終了時期」に詳しく記載されておりますのでこちらもご参照下さい。

Windows Vistaのサポート終了後は、クライアントPCでMicrosoftのサポートが有効なIEのバージョンは11のみとなります。

従いまして、これまでIE9を考慮しなければいけなかったHTML/CSS/JavaScriptでの制約もなくなるということになります。

特にCSSにおいては、IE9で使用できなかったがIE11で使用できるというプロパティが多数あり、Webサイト作成やWebアプリ開発に大きなインパクトがあります。

以下にその一部を紹介いたします。

まず真っ先に挙げられるものがFlexboxでしょう。
正式名称は「CSS Flexible Box Layout Module」で、W3Cに仕様草案が公開されています。
親要素(flex container)と子要素(flex item)を指定すると、親要素のサイズが変化した時などの子要素の位置、順番、サイズなどの調整やレイアウトが柔軟(flexible)に行えるようになります。

これまでであればfloatやpositionなどでレイアウトなどで手間がかかるものがFlaxboxを使うことによって劇的にコードが組みやすくなるケースも多いので、IE9のサポート終了以降は一気に広まるものと思われます。

Flexboxについての解説を行っている記事は多数ありますが、下記の2つがわかりやすいかと思います。また、簡単な使用例デモをCodePenにアップしました。

Flexbox解説記事

これからのCSSレイアウトはFlexboxで決まり！(Webクリエイターボックス)
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説(coliss)

Flexbox使用例

ナビゲーション
中央揃え
2カラム
レスポンシブによる方向切替

もう一つ大きなものとしてCSSアニメーションが挙げられます。

CSSで定義していた色、位置、大きさなどのプロパティを操作してアニメーションとしての動作を行うようにするもので、これまではjQueryなどJavaScriptを使わないとできませんでしたが、transform(2D/3D)、transition、aminationといったプロパティを用いてCSSのみで行うことができるようになるものがCSSアニメーションです。
これらのプロパティのうち、transform2D以外はIE9では非対応でした。

CSSアニメーション使用例

Flexbox同様に一例をCodePenにアップしました。幅、高さが一定間隔で変化するシンプルなものです。
CSSアニメーション サンプルデモ

また、弊社でもSiTestトップページなどでCSSアニメーションを使用しております(アニメーション開始のタイミングとなるイベントの検出等で一部JavaScriptを使用しています)。

CSSだけで行っているとは思えない素晴らしいものも多数出てきております。

CSSアニメーション参考記事

CSSアニメーション入門(Qiita)
これ全部CSS!?驚くほど自由自在なCSSアニメーション20選(Code部)

ここまで挙げたもの以外にも、linear-gradient(グラデーション)やtext-shadow(文字の影)など、IE9では使えなかったプロパティが今後広がっていくものと予想されます。

Windows Vistaのサポートが終了する4月12日以降、CSSを中心にWebサイトの世界が大きく変わっていくことになりそうです。