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

2012/07/022014/05/12

code

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

<!--[if gte IE 8]>
IE 8 以上を使用しています</p>
<![endif]-->

上記のように、バージョンベクタを使用できない場合に、特定のIEのバージョンだけにCSSを適応するのにはどうしたら良いかと検索したら、「CSS hacks」というものを見つけました。

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

以下の２パターン？を見つけたのですが、詳しいところは私にはわかりません。
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 */
}