IEのバージョン毎に値を変化させるためのCSSハック

CSSにて、IE(Internet Explorer)のバージョンによって挙動を変えるための記述方法を紹介します。

CSSでIEのバージョン毎に値を指定する方法

例えば、背景色の色をバージョン毎に変えたい場合は、以下のように記述します。

.sample {
  background: #ffffff;
  background: #d3d3d3\9; /* IE10以下 */
  *background: #000000; /* IE7以下 */
  _background: #ff0000; /* IE6 */
}

:root .sample {
  background: #ccc\0/; /* IE9 */
}

.sample:not(:target) {
  background-color: #ffff00\9; /* IE9,10 */
}

IE10以下の場合は値の後ろに「\9」を、IE7以下の場合はプロパティの前に「*」を、IE6の場合はプロパティの前に「_」を入れます。

セレクタの前に「:root」を入れて値の後ろに「\0/」を追加することでIE9、セレクタに「:not(:target)」を追加して値の後ろに「\9」でIE9と10に対応できます。

あとがき

覚えておくと、古いIEでの対応が必要な時に結構役立ちます。例に挙げた背景色ではあまり使うことはないかもしれませんが、positionやmarginなどの位置を調整する時に活用できます。