Internet Explorer ()
1年ぶりに、IE8対応必須案件をやりました 汗 no more XP…
サポート切れOS/ブラウザでのネット接続は如何なものか というところは置いておいて、やりましたハイ
当初、「共通のHTMLで」モダンブラウザからIE8までカバーしようとして調整に苦しみましたが、表題の方法=条件分岐で「HTMLを出し分ける」ことが、急がば回れ的な解決法となりました。
また、近い将来 IE11で同じようなことになるんじゃないかな? と思いますので(参考:進化が止まったIE、Web開発の足かせに@日経XTECH 2019/01/15)そこを含めての覚書を記します。
追記:この記事書いた3日後…Microsoftから公式に「IEやめれ」アナウンスが(^_^;
マイクロソフト、企業にInternet Explorerの使用をやめるよう要請。
「IEは技術的負債もたらす」@engadget日本版 2019/02/08

結論からいうと
- IE8,9 は別モノと割り切る。同一HTMLで、モダンブラウザからIE8までカバーしようとしない。
- phpでIE8,9 を判定する関数を作り、任意の箇所、任意のタイミングで条件分岐できるようにしておく。
- 調整上懸案となる部分では、モダンブラウザとIE8,9とで別々のHTMLを書き出すようにする。
WordPressの wp_is_mobile() のように、is_ie8()、is_ie9() という関数で条件分岐させ、HTMLを出し分けたり、includeファイルを変える、という方法です。
また、近い将来のために、is_ie11() という関数も作っておきました。
コードと使用例
php(関数定義)
普通のphpサイトならhead内でincludeするファイルに記述、WordPressならfunctions.php に記述。<?php // --------------------------------------------- // IE8以下判定 function is_ie8() { if(preg_match('/(?i)msie [1-8]\./',$_SERVER['HTTP_USER_AGENT'])) { $is_ie8 = true; } else { $is_ie8 = false; } return $is_ie8; } // --------------------------------------------- // IE9以下判定 function is_ie9() { if(preg_match('/(?i)msie [1-9]\./',$_SERVER['HTTP_USER_AGENT'])) { $is_ie9 = true; } else { $is_ie9 = false; } return $is_ie9; } // --------------------------------------------- // IE11判定 function is_ie11() { if(preg_match('/(?i)trident/',$_SERVER['HTTP_USER_AGENT'])) { $is_ie11 = true; } else { $is_ie11 = false; } return $is_ie11; } ?>
HTML本体(使いどころの例)
全般的な使いどころとしては、body にクラスを付けてCSSでの制御をやりやすくしたり、IE8では .svg ではなく .png の拡張子にしてやる、ブラウザ別のCSSを読み込む、など
<?php //IE8,9 or not if(is_ie8()){ $extension = ".png"; $browser = "ie8"; $body_class .= " is-ie8"; include("ie8.css.php"); } elseif(is_ie9()){ $extension = ".svg"; $browser = "ie9"; $body_class .= " is-ie9"; include("ie9.css.php"); } else { $extension = ".svg"; $browser = "modern"; } ?> </head> <body class="<?php echo $body_class; ?>"> <!-- 中略 --> <img src="./img/hoge<?php echo $extension; ?>" class="<?php echo $browser; ?>" alt="hoge">
局所的な使いどころ:ごっそりと別のHTMLを書き出す
実案件で特にハマったのが、スライダー(カルーセル)の設定・調整でした。当初、IE8でも動くbxsliderで全てのブラウザ・デバイスをカバーしようと試みましたが、兼用での妥協点で調整することは、モダンブラウザやiPadでの使い勝手を犠牲にすることにもなりました。
IE8,9 のみbxsliderとし、それ以外はSwiperを使うという切り分けをすることで、「IE8,9のために多くを犠牲としない」UI/UXとすることが出来ました。
<?php if(is_ie9()) { include("./slider-ie89.php"); } //bxslider使用 else {include("./slider-modern.php");} //Swiper使用 ?>
背景 と 愚痴
- 下請け案件、デザインpsd支給
- ビジュアル要求は完全に今風。flexbox/モダンブラウザ前提でしょうコレ…
- 正直IE8対応とか無理があるんじゃないっすかコレ…
という状況から生まれたTipsでした (^_^;
Thanx to
IEバージョン判定にあたり、参考にさせていただいたサイトです。どうもありがとうございました 🙂