IEのコンディショナルコメントを書くときのバージョン指定は不要だ!説

2014.3.11 HTML

<![if lte ie ●~]–>とか<![if gt ie ●~]–>とか要らなくね?
と思う今日このごろ、satohmsysです。

 

コンディショナルコメントって、レスポンシブデザインでサイトを構築する際に(個人的には)かなり必要とする手法があるのですが
ブラウザチェックで古いバージョンでのレンダリングを確認する際に、正確に読み込んでいない?ようで、自分の中でひとつの結論に至ってしまいました。

コンディショナルコメントとは。

Microsoft Internet Explorerによって解釈されるHTMLソースコード中にある条件付きのステートメントである。条件付きコメントは、マイクロソフトのInternet Explorer 5ブラウザーで初めて登場し、バージョン9までサポートされた。なお、バージョン10以降はこの機能は廃止され、他のブラウザと同様、単なるコメントとして扱われる事となった[1]。よって、「IEそのものを検出する」コメントは「IE9以下を検出する」コメントと同義になる。
Wikipediaより

 

IE8以下にはhtml5shivやIE9.jsとかcss3.jsとかを読ませて、ブラウザのバージョン間でのレンダリングの差異を埋めてみたりしています。

あとは、CSSの表現をしやすくするために、<body>タグのid分けをするといったところでしょうか

 

 

今回も同様の目的でコーディングしIEのドキュメントモードを変更、以下のソースを含んだページをプレビュー。

<!--[if lte ie 8]><body id="suck" <?php body_class(); ?>><![endif]-->
<!--[if gt ie 8]><body id="suck-9" <?php body_class(); ?>><![endif]-->
<!--[if !ie]><!--><body <?php body_class(); ?>><!--<![endif]-->

Internet Exploler コンディショナルコメント

 

これでIE8でのレンダリングとなったはず。

 

Internet Exploler コンディショナルコメント

 

う~ん…IE9以上に適用されるように振り分けたidが付いてしまっています。

 

ちなみに今回のサンプルのコンディショナルコメントの意味

<!--[if lte ie 8]><body id="suck" <?php body_class(); ?>><![endif]-->

IE8を含む、それより過去のバージョン<body id=”suck” class=”~~”>となる

 

<!--[if gt ie 8]><body id="suck-9" <?php body_class(); ?>><![endif]-->

IE8を含まない、それ以降の新しいバージョン<body id=”suck-9″ class=”~~”>となる

 

<!--[if !ie]><!--><body <?php body_class(); ?>><!--<![endif]-->

IE以外のブラウザ<body~>となる

 

なので、1番めに挙げた<body id=”suck” class=”~~”>になるはずが、いくらやっても結果は変わらず…

 

 

そこでこんな記事にたどり着きました。
IE10からコンディショナルコメントを廃止 | マイナビニュース

 

IE10以降だと、<!–[if gte ie 9]>とか<!–[if gt ie 9]>で当てはまることになるのですが、実際の所そうではなくて、
イチバン最後に挙げた、

 

<!--[if !ie]><!--><body <?php body_class(); ?>><!--<![endif]-->

IE以外のブラウザは<body~>となる

こちらの扱いに該当する、といった内容(だと思う)。

 

ということは、<!–[if gte ie 9]>とか<!–[if gt ie 9]>の指定は結局IE9しか当てはまらないことになります。

で、今回謎のIE災害に悩まされた僕の場合、「IE8だけ」を差別化しても、「IE9以上」を差別化した指定と同等という結果になってしまっているため
それならIE9とIE8は同じid、jQueryプラグインを読ませておけばイイ。と考えました!

そしてIE10以降に関しては、コンディショナルコメントで差別化されるという概念自体が無いため、
今までのように

<!--[if gte ie ●]>~~<![endif]-->
<!--[if gt ie ●]>~~<![endif]-->
<!--[if lt ie ●]>~~<![endif]-->
<!--[if lte ie ●]>~~<![endif]-->

こうしてバージョンを指定することに意味はないんじゃね?そう感じたわけです。

 

というわけでこれからレスポンシブデザインを実装していく場合には

<![if ie]>
	<script src="html5shiv.js"></script>
	<script src="IE9.js"></script>
	<script src="respond.js"></script>	
<![endif]-->

<![if ie]><body id="InternetExploler"><![endif]-->
<![if !ie]><!--><body id="otherBrowser"><!--<![endif]-->

 

などとすると端的で良さそうかな、という話でした。

というかプレビューの方法に問題がありそうな気がしますが…どなたか詳しい方いらっしゃったらご教授くださいませm(_ _)m

 

 

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。