sikkuiです。
ここ最近はCSS3 selectorをIE8.jsなどは使わず、Jqueryで実装しています。
実際IE8.jsを入れたとしても、使いたいのはnth-child(),[attr^="value"],:afterぐらいなので、レンダリングスピードを上げるならJqueryで単発的に実装すれば良いし、さまざまな効果や表現も非常に差があるのでJqueryで。
そしてJqueryを使用していて、最近思ったのが「Jquery clearfix」。
clearfixとはTony Aslett氏が考え出した方法で、
CSSでfloatを指定している場合、明示的にfloat解除できる要素がない場合、親の要素にCSSをかけ、CSSの空のボックスを作ってしまい、そこにclear:bothをかけてしまうという手法。
だたしIE6,IE7ではCSSで空のボックスを作ることができないので、現在はバグを利用して、float解除をおこなっています。そのバグの対処法も、min-height:1%やzoom:1;、display:inline-blockなど様々。
なので、IEのclearfixは本当のclearfixとは言い難いので、Jqueryでこれができないか、考え中です。
実際のやり方としては、Jqueryで連続するfloatの要素をeachか何かで探し出して、floatのlast-childにafterでclear:bothのかかった<div>要素を出すという方法。
モダンブラウザのclearfixをJqueryでやっただけという発想ですが、面白いんじゃないかと。
メリットとしては、floatの要素を自動でfloat解除してくれる。そして、IEでちゃんとしたclearfixをかけられる。
デメリットとして、floatを探してlast-childに要素を作るので、その分表示速度が下がるんじゃないかという危惧。
時間ができたら、遊びで作ってみるかもしれません。
このブログ記事を参照しているブログ一覧: Jquery clearfix?
このブログ記事に対するトラックバックURL: http://crebatec.info/mt4/mt-tb.cgi/1421
コメントする