blog
IE8でもBourbonのNeatを使えるようにする方法
この記事は書かれてから1年以上経過しており、内容が古い場合があります。
今回は小ネタの紹介。BourbonのNeatをIE8対応させる方法についてです。 モダンな環境を維持しつつ多くはないけれど未だに根強く残るIE8に対応する機会があったのでメモとして残しておきます。
selectivizrを使ったCSS3セレクタサポート
Githubに記載されているBrowser Supportを見るとselectivizr を使うことでIE6〜IE8では実装されていないCSS3のセレクタを使えるようになります。@mediaはサポートしていないようなので別のライブラリで対応する必要がありますね。
selectivizrはダウンロードしてきて使っても良いですし、Bower（selectivizr-new）も利用できるようです。
<head>
...
<!--[if lt IE 9]>
<script src="/assets/js/libs/selectivizr-min-c8809cbd.js"></script>
<![endif]-->
</head>
注意点
注意点としてspan-colums(x)の終わりの要素のマージンを消してやらないといけないので@include omega();を必ず指定しなければなりません。@include outer-container;を指定している要素にpaddingやborderを指定する場合はbox-sizingに注意してください。
.content {
@include outer-container;
.main-content {
@include span-columns(9);
}
.sidebar-content {
@include span-columns(3);
@include omega(); // <-
}
.main-contnet-below {
@include span-columns(9);
}
.sidebar-content-below {
@include span-columns(3);
@include omega(); // <-
}
}
MediaQueriesのサポート
MediaQueriesに対応するにはcss3-mediaqueries-jsかRespond.jsが使えます。どちらのライブラリが良いのかはこちらを参考にcss3-mediaqueries.js VS respond.js。
6月全然書けていなかったのでこれを気にまた書き始めるつもりです。
以上、小ネタの紹介でした。