CSSにて、IE(Internet Explorer)のバージョンによって挙動を変えるための記述方法を紹介します。
CSSでIEのバージョン毎に値を指定する方法
例えば、背景色の色をバージョン毎に変えたい場合は、以下のように記述します。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | .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などの位置を調整する時に活用できます。