【IE8】IE8でもcss3セレクタを諦めない!

リストなんかをマークアップする際に、下のようにリスト同士の境界を罫線で区切ることって、よくあるかと思います。

  • リスト1
  • リスト2
  • リスト3
ul li{
  border-bottom:1px solid #ccc;
}

しかし、よくありがちなのが、最後のリスト下部の罫線が不要なパターン。

  • リスト1
  • リスト2
  • リスト3

これは、こんな感じでcss3セレクタを使えば、一瞬で解決。

ul li{
  border-bottom:1px solid #ccc;
}
ul li:last-child{
  border-bottom:0;
}

しかし、そうは問屋が卸さないとしゃしゃり出てくるのがIE8です。IE8では「:last-child」等のcss3セレクタが使えません。そんな時、大いに助けてくれるのが「selectivizr.js」です!

ダウンロード


こんな感じで読み込むだけで、「:last-child」等のcss3セレクタを使用可能になります。
css3セレクタでマークアップが楽になるシーンはかなり多いと思います。IE8でcss3セレクタ使えない!と諦めていた方は、「selectivizr.js」でIE8でもcss3セレクタ対応のマークアップ生活をはじめてみてはいかがでしょうか。

Fundemicの最新情報をチェック!
>Fundemicの最新情報

Fundemicの最新情報

FundemicのFacebookページでは、
制作実績とTECHブログの最新情報を掲載しております。

CTR IMG