[IE対策] php条件分岐で、モダンブラウザとIEとでHTMLを出し分ける

ホームブログコツ[IE対策] php条件分岐で、モダンブラウザとIEとでHTMLを出し分ける

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マジ勘弁 今は昔、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 = $body_class." is-ie8";
	include("ie8.css.php");
} elseif(is_ie9()){
	$extension = ".svg";
	$browser = "ie9";
	$body_class = $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バージョン判定にあたり、参考にさせていただいたサイトです。どうもありがとうございました 🙂

ツイート Facebookでシェア