IE9.jsで実現するシンプルなclearfixとその他の恩恵
この記事は賞味期限切れです。(更新から1年が経過しています)
既に広く知られているであろう、IE9.jsは、
新旧IEの差異を(出来るだけ)埋めてくれる素晴らしいスクリプトです。
今日のお話は、IE9.jsで実現出来るシンプルなclearfixと、
このスクリプトで実際どんな恩恵が受けられるかの備忘録です。
cf) ie7-js – Project Hosting on Google Code
シンプルになったclearfix
念の為スクリプトのロードも記載しておきます。
IE用の条件分岐コメントを外すと他のブラウザでエラーが出ますのでご注意を。
(これも内部で条件分岐して頂けると大変幸せだなぁ)
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->
そしてこちらがシンプルになったclearfixのコード。
.clearfix:after{
content:"";
clear:both;
display:block;
height:0;
}
余計なハックを用いず、一種類のセレクタだけでクリーンに書けます。
IE9.jsにより、旧IEでも擬似クラス「:after」が使えるようになったおかげです。
もちろん、「:before」も使えます。
その他のIE9.jsの恩恵
ボックスサイズの計算法の統一化
ボックスサイズの解釈はIE6の方がわかりやすいと思う
で触れたとおり、IE6はボックスサイズをborder-widthとpaddingを含めた値として解釈します。
が、IE9.jsを導入する事で、IE6も他のブラウザ同様の計算法に修正してくれます。
border-boxの方が計算しやすいとは言え、統一してくれるに越したことはありませんね。
first-child, last-childの実現
IE6は言わずもがな、
IE7/8はfirst-childには対応しているものの、last-childは使えません。
IE9.jsはこれら全てにfirst/last-childを提供してくれます。
HTML5の新要素にも対応してくれる
header/nav/article/section等、HTML5で追加された新要素は、
IE~8ではhtml5.js等の力を借りないとCSSを適用する事が出来ませんでした。
IE9.jsは同様の処理も行ってくれちゃいますので、html5.jsをロードする必要がありません。
ie7-squish.js
別途ie7-squish.jsをロードする事で、
ダブルマージン等のIE6のお馴染みのバグを幾つか修復してくれます。
さらに詳細は公式で。
cf) IE7.js Test Pages
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/ie7-squish.js"></script>
<![endif]-->
まとめ
IE7jsライブラリの存在は知っていたのですが、予想以上の働きをしてくれる模様。
作者に感謝すると共に、改めて世界中の技術者がIEに頭を悩ませているんだなと実感させられます。
無数の開発者が一丸となってIEという共通の課題を…胸が熱くなりますね。
コメント