IE6/7/8/9/10/11それぞれのバージョンのみに適用させるCSSハックまとめ

最近ではIE8のサポート終了などにより使う機会が減ってきましたが、それでも一部バージョンのみに対応させたいときもあるかと思います。そんな時に便利なのがCSSハックです。以下で紹介するソースコードは仮想環境上でしっかり確認していますので、大丈夫です。

CSSハック

この要素をCSSハックしたいと思います。

IE6のみ

.element 
{
  color: #000;
  _color: #666;  /* IE6のみ */
}

いまどきIE6に対応させるWeb制作者はいないと思いますが一応。プロパティの前に _ をつけます。

IE7のみ

.element 
{
  color: #000;
  *color: #777;  /* IE7以下 => 結果的にIE7のみ */
  _color: #000;  /* IE6のみ */
}

プロパティの前に * をつけるとIE7以下に効かせることができるので、さらにIE6のみ上書きすることでIE7のみに対応させることができます。

IE8のみ

.element 
{
  color: #000;
  color: #888\9;  /* IE10以下 => 結果的にIE8のみ */
  *color: #000;   /* IE7以下 */
}
.element:not(:target)  /* IE9以上 */
{
  color: #000\9;  /* IE10以下 */
}

値の末尾に \9 をつけるとIE10以下に効きます。次に * をつけてIE7以下を上書きさせることで、color: #888; はIE8/9/10のみに効くことになります。IE9/10を除くことができればIE8のみに対応できますね。そこで、:not(:target) をつけるとIE9以上に効きます。さらに、\9 を末尾につけることでIE10以下に効くので、IE9/10のみに効かせることができます。よって、IE8のみに効かせることができます。

IE9のみ

.element 
{
  color: #000;
}
.element:not(:target)  /* IE9以上 */
{
  color: #999\9;  /* IE10以下 => 結果的にIE9のみ */
}
@media all and (-ms-high-contrast: none)  /* IE10以上 */
{
  .element:not(:target) 
  {
    color: #000;
  }
}

:not(:target) と \9 でIE9/10だけに効きます。@media all and (-ms-high-contrast: none) でIE10以上に効くので、上書きされて color: #999\9; はIE9のみに効きます。

IE10のみ

.element 
{
  color: #000;
}
@media all and (-ms-high-contrast: none)  /* IE10以上 */
{
  .element 
  {
    color: #100\9;  /* IE10以下 => 結果的にIE10のみ */
  }
}

@media all and (-ms-high-contrast: none) でIE10以上の効かせることができ、\9 でIE10以下に効かせることができます。よって、IE10のみに効かせることができます。

IE11のみ

.element 
{
  color: #000;
}
*::-ms-backdrop, .element  /* IE11のみ */
{
  color: #110;
}

*::-ms-backdrop をつけるとIE11のみに効かせることができます。

IE6〜IE11まで同時にCSSハック

.element 
{
  color: #000;
  *color: #777;  /* IE7以下 (上書きされて結果的にIE7のみ) */
  _color: #666;  /* IE6のみ */
}
.element 
{
  color: #888\9;  /* IE8のみ */
}
.element:not(:target) 
{
  color: #999\9;  /* IE9,10 (上書きされて結果的にIE9のみ) */
}
@media all and (-ms-high-contrast: none) 
{
  .element:not(:target)  /* 詳細度の関係でこっちにも:not(:target)つける */
  {
    color: #100;  /* IE10,11 (上書きされて結果的にIE10のみ) */
  }
  *::-ms-backdrop, .element:not(:target)  /* 詳細度の関係でこっちにも:not(:target)つける */
  {
    color: #110;  /* IE11のみ */
  }
}

全部同時に使うときは、CSSの詳細度に注意しなければいけません。