なるべくcssで表現したいなと思うのですが、そういえばIEで使えないんだった…となることがよくあります。
良く使うものでたまに引っかかるCSSプロパティー・セレクタをまとめてみました。
目次
CSSプロパティー
border-radius
- IE8以下で×
box-shadow
- IE8以下で×
text-shadow
- IE9以下で×
background-size
- IE8以下で×
opacity
- IE8以下で×
解決したい！
解決したい場合には『CSS3 PIE』にお世話になります。使える要素は
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image
大まかな使い方は公式からダウンロード後解凍したら、『PIE.htc』を任意の場所におきます。
そして今回は例えば『border-radius』を指定したい場所に
div.box {
background:#FF3300;
border-radius:5px;
behavior:url(パスの指定を忘れずに/PIE.htc);
}
のように入れるだけです。
『background-size』については以前の記事でご紹介した『background-size』を使用します。
セレクター
:first-child / :last-child
- IE8以下で×
その時に便利な擬似クラスですがIE8以下で使えません。
nth-child()
- IE8以下で×
例えばリストを使う時に『:nth-child(2)』では2番目のみに適用、li:nth-child(odd)は奇数、li:nth-child(even) では偶数に適用など、便利な擬似クラスです。
解決したい！
上記については解決こちらも以前の記事でご紹介した『yuga.js』を使用します。公式サイトの最後にあるのですが、『yuga.js』をいれることで最初の要素にはfirstChild、最後の要素にはlastChildをいれてくれます。
また、数字での指定はないですがodd・evenも自動でつけてくれます。
今回はこのあたりで。
