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
今は昔、IEというブラウザありけり…
結論からいうと
- 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バージョン判定にあたり、参考にさせていただいたサイトです。どうもありがとうございました 🙂
