IE10CSSハック-検証済み3つの方法

IE10では条件付きコメントが廃止

条件付きコメントというのは、HTML内に書かれるいわゆるこういうやつ

<!--[if 条件式 ]>
//中身//
<![endif]-->

「条件式」に合致するブラウザのみが（中身）に書かれたHTMLを読み込む事が出来ます。それ以外のブラウザは（中身）をコメントとして扱うのでスルーされる仕組みです。

例）：IE（インターネット・エクスプローラー）のみに反映させたい場合

<!--[if IE]>
//中身//
<![endif]-->

これは「IE」とだけ書いているので、つまりIEだけに読み込まれるよという書き方です。
※この機能はIE5から実装されたのでIE4以下は効きません。まあ、そんな古いのは、もはや存在しないとは思いますが。

ちなみにこの方法ではIEのバージョンを限定する事も出来ます。

例）：IE（インターネット・エクスプローラー）のバージョン6にのみに反映させたい場合

<!--[if IE6]>
//中身//
<![endif]-->

これによりIE6にのみ読み込まれます。※IE5（それ未満はもちろんそもそも非対応）及び、IE7以上でも読み込まれません。

IE9まではこれらの方法でIEだけ〜というCSSの指定が出来たのですが、IE10ではこれが廃止になります。ちなみにIEのハックはこれだけではありません。IE9までは有効だったそれぞれの方法を試してみましたが、IE10ではどうやら効かないようです。

IE10対応のCSSハックの方法

その1：メディアクエリを使用する方法

CSSに書き込む方法です。CSSファイルを複数作成したくない場合などに有効で、最も手軽な方法です。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
//ここにCSSを書く//
}

例）

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.sample {font-size:10px;}
}

初心者によくありがちなミスで、「{」と「}」が二重になるのは間違いだと思って消したり、もしくは「{」の直前に「.sample」を入れたりと、間違った書き方を見かけたりします。「{」と「}」は二重な状態で大丈夫です。

もちろんですが「.sample」ってのはただのサンプルのclassですから、ここはご自由に名前付けしてOKです。

IE10対応CSSハックの検証ページ｜その1

その2：Javascriptを使用してIE10にのみ専用のCSSを読み込ませる方法

まずはHTMLの

<script> 
if (/*@cc_on!@*/false) {
	var headHTML = document.getElementsByTagName('head')[0].innerHTML; 
	headHTML    += '<link type="text/css" rel="stylesheet" href="ie10.css">'; 
	document.getElementsByTagName('head')[0].innerHTML = headHTML; 
} 
</script>

4行目に注目してもらうと「href=”ie10.css”」とありますね。その前後は「IE10で見た時は…」だと思って下さい。この「href=”ie10.css”」の部分は任意で自分が名付けたCSSファイル名を記入しましょう。

IE10対応CSSハックの検証ページ｜その2

その3：Javascriptを使用してIE10にのみクラス属性（class）を付与して区別する方法

こちらもJavascriptを使用します。「IE10の場合だけ〜」というのは2つ目の方法と同じ発想です。「@cc_on!@」の記述、これによりIE10にだけ〜という区別が出来るのです。

おなじくHTMLの

<script>
if (/*@cc_on!@*/false) {
	document.documentElement.className+='ie10';
}
</script>

3行目に注目してもらうと「’ie10’」とあります。これにより、IE10においてのみhtml全体に「ie10」というクラスが付きます。

▼試しにIE10でソースを見てみます。

反転している箇所で「html class=”ie10″」と、htmlに「ie10」というクラスが付いていることが確認出来ます。もちろんこのクラスはIE10でのみ挿入されます。なお「ie10」というクラス名は適宜書き換えて自分にとって分かりやすい任意の名前を付けても良いでしょう。

この状態を作っておけば、あとはCSSにて

.ie10 .sample{
//ここにCSS//
}

と、このように書けばその内容がIE10にのみ反映される仕組みです。

IE10対応CSSハックの検証ページ｜その3

まとめ

CSSのハックは可能であれば使用しないことが理想です。

IEの表示（CSSの解釈の違い等で）のみが他のブラウザと違うという事はWEBサイト制作の現場においては慢性的な問題であり、これがIEに対しての大きな不満の1つです。これらを手軽に解決できる方法としてハックは重宝されますが、こういった方法は対処療法であると言えます。

根本的なHTMLの記述やCSSの書き方を見直せば使う必要のないものも多々見受けられます。本来的には不必要、あるいは別の方法尾で実施すれば不要である場合があるという意味で類似しているのは「!important」の多用ですね。

WEBサイトは最終的に形としてキレイに仕上がっていれば裏側のソースなどはある意味どうでも良いでしょう。しかし、こういう対処療法の多いサイトは新型ブラウザの登場のタイミング毎に手入れが必要になったり、定期的な更新作業時などの度に、余計に作業が増える傾向にあります。

CSSを改めて見た時に、ハックや!importantが多すぎるかな？と感じた場合、HTMLも含めてちょっと見直す機会にしてみてはいかがでしょうか。

CSS3デザインブック 仕事で絶対に使うプロのテクニック

posted with ヨメレバ

MdN編集部 エムディエヌコーポレーション 2012-03-21

Amazon

Kindle

楽天ブックス