- 2007年5月26日 11:42
- XHTML CSS
clearfixの決定版を作るについてコメントしたのですが、なぜか僕のTypeKeyが認証失敗になってしまい、がんばって書いた文章がお伝えできず、消すのももったいないからこっちに書きます。
こんにちは。 僕も以前、clearfixの記述について、なぜあんなに複雑なのか疑問に思いました。CASE10の記述がfloatのclearに必要な最低限の記述とし、ピリオドやvisibility,heightは必要無いんじゃないかとさまざまなブラウザーで検証したのですが、contentで何かを記述しないとボックスが生成されずに正常にクリアできないブラウザーがありました。そして、生成したボックスを消すために、visibilityやheight:0が必要になりました。
モダンブラウザの中でも特にモダン（笑）なものに限ればCASE10だけで大丈夫のようです。ただやはりこういったものは出来るだけ多くのブラウザで同じ結果になったほうが喜ばしいので、ややモダンではないモダンブラウザを考えるとどうしても冗長になってしまいますね。
ああ、むくわれた。全ては上のコメントの通りです。
ホップ本でも「親ボックスの高さを算出させる方法」を7ページ使って解説しているのですが、この原稿を書くときに「本家clearfixの記述には絶対無駄がある！」と睨んで色々検証しました。
まず、contentプロパティになぜピリオドを入れるのかですが、たしかFirefox1.x(凄い細かいバージョン)かNNでは、空白でもなんでも何かを記述しないとボックスが生成されずにclearできませんでした。そして、記述した文字を消すために、height:0が必要になりました。 ところがheight: 0だけでは消えないブラウザがあり、visibility:hiddenが必要になって… と、 結局本家の記述とまったく同じになりました。 NN6.xとFirefoxの1.x(凄い細かいバージョン)で問題があったことだけは覚えています。
どのブラウザがいつのバージョンのときにピリオドがないと有効にならないのかどうも思い出せないので、contentプロパティの値を空にしたclearfixを使ったページを張っておきます。3つの黄色いボックスが青い線に囲われていないブラウザがあったら…それだ!! (本当はもう一度ちゃんと調べてきちんとした答えを出したいのですが、時間と環境がありません。すみません ぺこぺこ)
もう１つ
clearfixはclassにしてHTML文書に埋め込むよりも、CSS内で対象となる要素をセレクタにもってきて内容をに当てて使ったほうが便利です。
div#content:after,
div#utilities:after,
ul#globalNavi:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
- Newer: Vicunaのキーカラーを一発調整するCSSモジュール
- Older: CSSNite LP, Disc3 行ってきたよレポート
