IE6/IE7/IE8/IE9/IE10に別々のスタイルシートを適用する「CSS hacks」

  • 投稿 : 2012-07-02
  • 更新 : 2014-05-12

バージョンベクタを使えないときは、「CSS hacks」?

<!--[if gte IE 8]>
IE 8 以上を使用しています</p>
<![endif]-->
上記のように、バージョンベクタを使用できない場合に、特定のIEのバージョンだけにCSSを適応するのにはどうしたら良いかと検索したら、「CSS hacks」というものを見つけました。

アメブロの場合、CSSの中身しか触れないので「CSS hacks」を使う検討をして、実際うまくいったのですが使用するのはやめました。

以下の2パターン?を見つけたのですが、詳しいところは私にはわかりません。
BloggerやWordpressのテンプレートでも「CSS hacks」ぽい記述は以前から見かけてたのですが、あまりよくわかっていませんでした。

その1

selector {
  background-color: red;     /* ハックなし */
  background-color: green\9; /* IE8以下 */
  *background-color: blue;   /* IE7以下 */
  _background-color: yellow; /* IE6 */
}
selector:not(:target) {
  background-color: black\9; /* IE9 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  selector {
    background-color: white; /* IE10 */
  }
}

参考
IE用CSSハックの簡単な書き方とIE10への対応 | web codery


その2

#element {    
  color:orange;
}
#element {
  *color: white; /* IE6+7, doesn't work in IE8/9 as IE7 */
}
#element {
  _color: red;   /* IE6 */
}
#element {    
  color: green\0/; /* IE8+9  */
}

:root #element { color:pink \0/; } /* IE9 */
参考:
IE9 - IE10pp4 CSS Hack
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ | コリス


その3

body {
    color: red; /* all browsers, of course */
    color: green¥9; /* IE8 and below */
    *color: yellow; /* IE7 and below */
    _color: orange; /* IE6 */
}
body:not(:target) {
    color: black¥9; /* IE9 */
}
参考:
IE6/IE7/IE8/IE9のCSSハック: 小粋空間
edelweiss: Internet Explorer (IE) 9 プレビュー版でCSSハックをいろいろ試してみた。
Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters | Nettuts+
10 Dirty Internet Explorer CSS Hacks You Might Not know | Queness




スポンサーリンク