IEのサポート期限
まず、2018年11月現在サポート期間中なのはIE11のみです。IE10以前は2017年4月11日をもってサポート期間が終了しています。
厳密に言いますとWindows Server2008及び2012のIE9及びIE10はまだサポート期間内ですが、サーバー上でブラウジングすることはないので無視します。
IEのサポート終了日は原則対応するOSのサポート終了日と同じです。2017年4月11日はWindows Vistaのサポート終了日で、Windows Vistaに対応するIE9もこの時サポート終了となりました。
一方で、IE10はWindows7に標準搭載され、のちにWindows8にも搭載されましたが、その後IE11が登場すると、Windows7の標準IEをIE11に更新し、Windows8についてはWindows8.1に対してIE11に更新となりました。このためWindows8のサポート終了日にIE10もサポート終了となりました。
以降のWindows10ではEdgeと併せて、IE11も搭載されており、2018年11月現在、Windows7、Windows8.1、Windows10のIE11がサポート期間内です。
このため、通常は過去IEへの対応は必要ないといえます。しかしながらクライアントの意向であったり、業務システムのフロントエンドの場合には今だに過去IEへの対応が必要とされる場合があります。
過去IEに対応するためには、HTML5やCSS3の各種最新タグやスタイルが適用できないため、モダンブラウザと両方に対応するとなると相当の労力がかかります。
どうしてもやらなければならない場合、以下の方法で対応していきます。
暫定対応
html5shiv.js
html5shiv.jsはHTML5に未対応のブラウザに対し、HTML5の各種タグを利用できるようにするためのJavascriptライブラリファイルです。
html5shivは有志の方により無償、商用可、OSSのMIT License、GPL Licenseのデュアルライセンスで運用されています。
GitHubのhtml5shivサイト(https://github.com/aFarkas/html5shiv)よりダウンロードできます。
html5shiv.jsの使用例
HTML
<!--[if lt IE 9]>
<script src="./js/html5shiv.js"></script>
<![endif]-->
IE9未満。つまりIE8以前にはhtml5shiv.jsを適用するという意味になります。IE9以降はHTML5に対応しているのでこの書き方となります。
本格対応
各ブラウザで表示確認しながらブラウザごとの個別Javascript、CSSを適用
各ブラウザごと表示確認を行い、ズレ等が発生している場合に個別のJavascript、CSSを適用します。HTML内でのIEバージョンごとの分岐には以下のコンディショナルコメントを利用します。
ここまですれば完璧ではありますが、非常に時間がかかる、ある意味無駄な作業です。
コンディショナルコメントの使用例
～ ページの先頭 ～
HTML
<!--[if IE 6]><html lang="ja" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="ja" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="ja" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="ja" class="ie9"><![endif]-->
<!--[if IE 10]><html lang="ja" class="ie10"><![endif]-->
ページ先頭のHTMLタグでIEごとに適用するCSSクラスを振り分けます。
～ <HEAD>内 ～
HTML
<!--[if IE 6]><script src="./js/ie6.js"></script><![endif]-->
<!--[if IE 7]><script src="./js/ie7.js"></script><![endif]-->
<!--[if IE 8]><script src="./js/ie8.js"></script><![endif]-->
<!--[if IE 9]><script src="./js/ie9.js"></script><![endif]-->
<!--[if IE 10]><script src="./js/ie10.js"></script><![endif]-->
IEごとに適用するJavascriptファイルを指定します。