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

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

IEのバージョン毎に値を変化させるためのCSSハック
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

スポンサードリンク

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

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

style.css
.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などの位置を調整する時に活用できます。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。