本ページはプロモーションが含まれている場合があります
今回紹介するのはWeb制作の中でInternet Explorer（IE）の条件付きコメントが使用できない場合（禁止されている場合）にJavaScriptで対応する方法です。
●条件付きコメントとは？
条件付きコメントというのはIEで動作する、HTMLのコメント機能を利用した条件分岐ができる機能です。
簡単な例としてはIE６だけ読み込ませたい内容を書くには以下の様に書きます。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で置き換えることで対応できます。
あまりこうした制作の現場にぶつかりたくないですが、いざというときのために今回の対処方法を覚えておいてもよいのでは。
それでは。