【clearfix編】Web文書のグレースフルデグラデーションをムキになってやってみる

『Web文書のグレースフルデグラデーションをムキになってやってみる』の続きです。『CSS Generated Content 編』に続きます。

3行でまとめ

1. 最初期の clearfix の content : "." は Gecko 1.3~1.5 用。この他にも初期 Gecko 限定の指定があります。
2. モダンな clearfix の content : " " は Opera 9~11 と contentEditable 要素の組み合わせで発生する隙間を回避する。"." でも回避できるがより副作用の少ないこちらが採用されている。但し height:0 などでも隙間は消える。
3. ここまでの調査を踏まえた究極の clearfix を紹介します。

1. Web文書のグレースフルデグラデーションをムキになってやってみる
2. clearfix 編
   1. 究極のclearfixを探る
   2. 先行する記事
   3. 検証ページ
   4. 検証結果
   5. ここまでを元にした僕的究極 clearfix
   6. リンク集
3. CSS Generated Content 編

1. 究極のclearfixを探る

clearfix には最初期のものから、時々の主要ブラウザにターゲットを絞って記述量をスリム化したものまで、複数のバージョンが紹介されています。

僕が今回求める clearfix は対応ブラウザを最大にしつつ、初期のブラウザで発生した問題を回避する為の content : "." や " " が不要なブラウザについては "" を使用するものです。

このような着眼で ".", " " が必要なブラウザと、これを上書きする CSS ハックを調査しました。

2. 先行する記事

まずは次の先行する記事のお陰で "." と " " の由来が判明しました。

"."の由来は古いGeckoエンジン

content がスペースや空だと float をクリアできないのは、Netscapeだった。7.1で確認しているので、それより古いバージョンでも同様だろう。ただし、ここで検証したような親ボックスに border または padding を設定したケースでは、float がクリアされてしまうため見逃してしまったのだ（検証ページはこちら）。

"." は古い Gecko エンジン用の指定でした。しかも親ボックスのスタイルによって問題の発生の有無が異なるとのことです。先人の検証が無ければ、とても自力で見つける自信はありません。

" "の由来はPrestoエンジン

1. The space content is one way to avoid an Opera bug when the contenteditable attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that are clearfixed.

---

The use of content:" " (note the space in the content string) avoids an Opera bug that creates space around clearfixed elements if the contenteditable attribute is also present somewhere in the HTML. Thanks to Sergio Cerrutti for spotting this fix. An alternative fix is to use font:0/0 a.

" " で回避できる問題は Presto Opera でテキスト編集機能をトリガーに発生するとのことでした。Opera のテキスト編集機能は9以降でサポートする為、比較的新しいブラウザで起きている問題です。テキスト編集機能にはほとんど触っていない為、こちらも先人の検証が無ければとても自力で見つける自信はありません。

3. 検証ページ

検証ページは github ページで公開しています。また検証ページの当該 CSS は次になります。

モダンブラウザ用clearfix

#clearfix-general:after {
    content    : "";
    height     : 0;     /* for Gecko 0.9~1.7.5 & Opera 9~11 */
    display    : block; /* for Gecko ~0.9 & Opera */
    visibility : hidden;
    clear      : both;
}

レガシーブラウザ用clearfix

Gecko ~1.2.1用

#iclearfix-gecko12
    position : relative; /* for Gecko 1.0.2 */
}
#clearfix-gecko12:after {
    content : "";
    clear   : both;
}

Gecko 0.6~0.9, 1.3~1.7用

#clearfix-gecko17:after {
    content     : ".";   /* for Gecko 1.3~1.5 */
    height      : 0;     /* for Gecko 0.9~1.7.5 */
    display     : block; /* for Gecko & Opera */
    visibility  : hidden;
    clear       : both;
}

4. 検証結果

:after 疑似要素に content:"." を要求するのは Gecko 1.3~1.5 迄でした。ちなみに先に挙がった Netscape 7.1 は Gecko 1.4 になります。この他にも特定の環境で必要なプロパティがありました。詳しくは続くコード中のコメントで確認ください。

Opera 9~11 と contentEditable 要素の組み合わせで親ボックスに隙間ができる問題も確認できました。これはモダンブラウザ用の clearfix に既にある height:0 で解消できたので content:" " は不要でした。

5. ここまでを元にした僕的究極clearfix

僕的究極 clearfix に登場するプロパティは position:relative; を除いて先の引用した『clearfixの決定版を作る』で紹介されている Movable Type のデフォルトスタイルシートと同じです。但し、ある環境で必要な指定が他の環境で悪影響するケースがあるため、CSS ハックを駆使しています。

モダンブラウザ用clearfix

Internet Explorer 8 以上、Gecko 1.6 以降、Opera 7.0 以降、Safari 3.0 以降であればこれでいけます。

.ultimate-clearfix:after {
    content     : "";
    height      : 0;     /* for Gecko 0.9~1.7.5 & Opera 9~11 */
    display     : block; /* for Gecko and Opera */
    visibility  : hidden;
    clear       : both;
}

Gecko 1.5 以下用のclearfix追加コード

Gecko 1.5 以下に対応する場合には次の CSS ハックで上書きしていく。Gecko 1.6~1.7 にも "." が当たりますが丁度よい CSS ハックが無いので一旦諦めます。ちなみに Firefox 1.0 は Gecko 1.7 です。

/* override Gecko ~1.8.1 */
@media \0 all {
    .ultimate-clearfix {
        position : relative; /* for Gecko 1.0.2 , or absolute */
    }
    .ultimate-clearfix:after {
        display : inline; /* 1.0.2 で隙間が出来るのを回避 */
    }
    /* override Gecko 1.2~1.8.1 */
    _:lang(x), .ultimate-clearfix:after {
        content     : ".";   /* (1) for Gecko 1.3~1.5 */
        display     : block; /* (2) for Gecko 1.3~1.5 */
        font-size   : 1px;   /* (3) for Gecko 1.2.1 (1)(2) で発生する隙間を小さく */
        line-height : 0;     /*     for Gecko 1.2.1 (1)(2) で発生する隙間を小さく */
        height      : 0.1px; /*     for Gecko 1.4   (3) で高さが消えるのを回避 1.4.2 では発生しない */
    }
    /* override Gecko 1.8~ */
    @-moz-document url-prefix() { .ultimate-clearfix:after { content : "" } }   
}

おまけでOpera 6.2.3用のclearfix追加コード

Opera 6.06 で頭にできる隙間を小さくする。Opera 9.54~, Safari 3.2 で隙間が出来るので注意が必要です。

.ultimate-clearfix:before {
    content : "";
    display : table;
}

6. リンク集

1. Gecko バージョンとアプリバージョンの対照表
2. browser strangeness 大量の CSS ハックの検証ページ