IE10にも対応したCSSハックを記述したい件

はい、問題児のIEです。

今回はIEにも対応したCSSハック方法です。

色々と方法はあるのですが、今回はメディアクエリを使った方法についてご紹介したいと思います。

何故メディアクエリかって？

それはズバリ！簡単だからです！ｗｗ

というのが、IE10では条件付きコメントが廃止となっています。

なので、以前の様にHTML内に

<!--[if 条件式 ]>
ここに内容を記述
<![endif]-->

といった書き方が出来ません。というか推奨されません！

あと、メディアクエリの場合普通にCSSに書き込むだけなので、Javascript云々、面倒な手法をとらなくても簡単に利用することが出来るのでお勧めかと…。ｗ

では、メディアクエリを使用した具体的なハック方法ですが、以下の記述をCSSに追加するだけです。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.hogehoge {background:#fff}
}

これでIEのみ、背景色が白となります。

初見、ちょっと違和感を感じる記述方法ですね…。（汗）

{} が二重で定義してあるし…。

しかしながら、これで正解の記述ですので、その違和感は無視してください！ｗ

IEって、色々と問題児だったけど、この期に及んでも更に問題を抱え続けるという…。

もう少し、モダンブラウザとしての自覚を持って欲しいものですね…。

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