Jquery clearfix?

sikkuisikkuiです。

ここ最近は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に要素を作るので、その分表示速度が下がるんじゃないかという危惧。

時間ができたら、遊びで作ってみるかもしれません。

トラックバック(0)

このブログ記事を参照しているブログ一覧: Jquery clearfix?

このブログ記事に対するトラックバックURL: http://crebatec.info/mt4/mt-tb.cgi/1421

コメントする

 

WEB(ホームページ),DTP(パンフレット、ポスター、ロゴ)の株式会社CREBATEC

ホームページ、Webシステム、業務システムから、パンフレット、ポスター、名刺、ロゴ、キャラクター作成まで、御社のCI(コーポレート・アイデンティティ)をトータルでサポートし、企業価値を高めるお手伝いをさせていただきます。

クレバテック ブログをRSSに登録 RSSに登録

関連サイト