概要 IE用の条件付きコメントは便利ですがCMSの機能などでテンプレートに記述しても削除されてしまう場合はJavaScriptで置き換えましょう

20150530-IEの条件付きコメントをJavaScriptに置き換える-01

今回紹介するのはWeb制作の中でInternet Explorer(IE)の条件付きコメントが使用できない場合(禁止されている場合)にJavaScriptで対応する方法です。


●条件付きコメントとは?

条件付きコメントというのはIEで動作する、HTMLのコメント機能を利用した条件分岐ができる機能です。

簡単な例としてはIE6だけ読み込ませたい内容を書くには以下の様に書きます。IE6で独自に適用したいスタイルシートやJavaScriptの読み込みをすることが可能です。

<!--[if IE 6]>
 ここはIE 6だけが読み込みます
<![endif]-->

なお、この機能は、便利な機能ですがIE10で廃止されました。



●条件付きコメントをJavaScriptで置き換える

たとえば、IE8(Internet Explorer 8)以下で、HTML5の要素を有効にして、メディアクエリーを有効にしようとこんなコードを使いたいとします。

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->


しかし、諸般の事情で条件付きコメントが使用できない場合は、JavaScriptで置き換えることで対応できます。



やっていることは最初にIEのバージョン判定を行い、次にドキュメントにscriptのタグを追加する処理を行って、実行しています。

<script>
/* https://w3g.jp/blog/tools/js_browser_sniffing */
/* IE9以下の処理 */
if (document.uniqueID && typeof window.matchMedia == "undefined") {
    (function(d) {
        var pc = d.createElement('script');
        pc.type = 'text/javascript';
        pc.charset = 'utf-8';
        pc.async = false;
        pc.src = 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js';
        var s = d.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(pc, s);
    })(document);
    (function(d) {
        var pc = d.createElement('script');
        pc.type = 'text/javascript';
        pc.charset = 'utf-8';
        pc.async = false;
        pc.src = 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js';
        var s = d.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(pc, s);
    })(document);
}
script>



●スタイルシートを読み込む場合は?

スタイルシートを読み込ませたい場合は、function()〜の部分を以下の様にします。

ドキュメントにlinkタグを追加して読み込ませています。

例はBootstrapのCSSを読み込む場合です。

    (function(d) {
        var pc = d.createElement('link');
        pc.type = 'text/css';
        pc.rel = 'stylesheet';
        pc.src = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css';
        var s = d.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(pc, s);
    })(document);



●他のIEのバージョンの対応

他のIEのバージョンの対応は「if (document.uniqueID && typeof window.matchMedia == "undefined") 」と書かれている部分の条件を変更することで対応できます。

条件はスクリプトの中にも書いてありますが、以下のページを参考にすればよいでしょう。


なお、IE6以下に対応するには「if(typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined")」です。



●まとめ

条件付きコメントが使えない状況はそんなにないかと思いますが、CMSでテンプレートや記事のHTMLが一定のものに制限されている場合、条件付きコメントを書いても保存時に消えてしまう(もしくは書き換えられてしまう)ことがあります。

そうした場合の対処方法は、今回の様にJavaScriptで置き換えることで対応できます。


あまりこうした制作の現場にぶつかりたくないですが、いざというときのために今回の対処方法を覚えておいてもよいのでは。


それでは。



●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索