menu

Web制作のTipsとかアレコレ。

jQuery2系の利用に際し、IE10対策ついでにブラウザ判別をPHPに変更。

2013.12.19

最近、ツールチップとかフローティングメニューとか、モーダルウインドウとか、そんな小物はライブラリ使わずにちょろちょろっと書く習慣がついてしまったのですが、その流れで、何となくjQueryも2.0系にしていきたいと思うようになりました。
特に強い理由があるわけでもないのですが。

で、2系はIE8以下のブラウザをサポートしないため、利用に際してはその辺を考えてやらないといけません。
すなわち、IE8以下では1.10.2を、IE9以上とモダンブラウザでは2.0.3を、というふうに、読み込むjQueryを変えてやる、と。

それで、オレオレテンプレートをそのように変更することにしました。

head内でのjQuery本体読み込みで、

<!--[if lt IE 9]>
<script src="js/jquery-1.10.2.min.js"></script>
<![endif]-->
<!--[if gte IE 9]>
<script src="js/jquery-2.0.3.min.js"></script>
<![endif]-->
<!--[if !IE ]>
<script src="js/jquery-2.0.3.min.js"></script>
<![endif]-->

と、IE9未満、IE9以上、IE以外、という風に条件分岐をして、で、IE10の開発者ツールでそれぞれ正しいバージョンが読み込まれているか確認したところ、何故かIE10だけjQueryが読み込まれていない。

Google先生に聞いてみると、どうやらIE10では、この条件付きコメントが廃止されたとのこと(正確には、IE10の標準モードとQuirksモードで廃止となった)。

こりゃ知らなんだ。

ってことで、うまくやる方法を考えたんですけど、まあブラウザ判別して読み込むものを分けたらいいじゃない、という結論に達したので、jsと、ついでにcssもブラウザによって分けることにしました。
判別したいブラウザは、IE6/7/8は個別に、IE9以上とモダンブラウザはひとくくりで、と。そんなアバウトな感じで。

このオレオレテンプレは、HTML5+レスポンシブ対応ってことにしてるので、オールドIEでは読み込まないといけないファイルが他にもあります。
ということで、そういったものも一緒に分類してみました。

browsers.php

<?php
$agent = getenv( "HTTP_USER_AGENT" );

switch (true) {
    case(preg_match('/MSIE 6/', $agent)):
	$browser_js = array( 
	  'js/html5shiv.js', 
	  'js/selectivizr.js', 
	  'js/css3-mediaqueries.js', 
	  'js/jquery-1.10.2.min.js',
	  'js/DD_belatedPNG_0.0.8a-min.js'
	);
	$browser_css = array('css/ie6.css');
	break;

    case(preg_match('/MSIE 7/', $agent)):
	$browser_js = array( 
	    'js/html5shiv.js', 
	    'js/selectivizr.js', 
	    'js/css3-mediaqueries.js', 
	    'js/jquery-1.10.2.min.js',
	);
	$browser_css = array('css/ie7.css');
	break;

    case(preg_match('/MSIE 8/', $agent)):
	$browser_js = array( 
	    'js/html5shiv.js', 
	    'js/selectivizr.js', 
	    'js/css3-mediaqueries.js',  
	    'js/jquery-1.10.2.min.js',
	);
	$browser_css = '';
	break;

    default:
	$browser_js = array( 
	    'js/jquery-2.0.3.min.js',
	);
	$browser_css = '';
}

まあ、もっとうまいやり方があるのかも知れませんが、とりあえずこんな感じで。
で、テンプレパーツのheader.phpはこんな感じ。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta keyword="">
    <meta description="">
    <title>Document</title>
<?php
    if(is_array($browser_js)){
        foreach($browser_js as $js){
        echo "<script src='".$js."'></script>\n";
        }
    }
?>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="shortcut icon" href="favicon.ico" >
    <link rel="stylesheet" href="css/style.css">

<?php
    if(is_array($browser_css)){
        foreach($browser_css as $css){
        echo "<link rel='stylesheet' href='".$css."'>\n";
        }
    }
?>
<!--[if IE 6]>
    <script>DD_belatedPNG.fix('img');</script>
<![endif]-->
</head>

こうですね。

browsers.phpでいろいろブチ込んだファイルのうち、
・html5shiv.jsはCSSより前に読み込まないといけない
・ie7.cssやie6.cssは共通であるstyle.cssより後に読み込まないといけない
ということで、こういう順序での記述です。

で、最後に、jQueryの読み込みをCDNに変更して、CDNのサーバーが落ちた時のための自前ファイルの読み込み記述を追加して、いったん完成。

<script>
    window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>');
</script>

さすがにここでも条件分岐するのも面倒だったので、このケースに限り1.10.2.min.js縛りです。

これでIE各バージョンのモードに切り替えながら確認。
それから、CDNのURLをデタラメに書き換えて、ちゃんと代替ファイルの読み込みが行われることを確認。

はい完成。

コレ作りながら、XHTMLのバージョンも作っとかないといけないなぁなどと思ったり。
とりあえず今日はここまで。

Comments

  1. そもそも、その条件付きコメントはIE外でチェックされない奴しか書いてないですかヤダー
    ホントはこう書く

    • まさかエスケープされずにサニタイズされるとは思わなかった。
      半角大なり半角小なりの代わりに全角大なり全角小なりで書きます。
      <![if !IE]>ホントはこう書く<![endif]>

  2. @human より:

    Jun Maeda様
    ありがとうございます!参考にさせていただきます!

please leave your comment...

▲ Page Top