width: auto のフロート
2003年3月26日(水曜日)
width: auto のフロート
CSS で画像以外のものをフロートしようとしたときに良くはまるのが、フロートには width の明示が必要という罠です。
10.3.5 Floating, non-replaced elements
If 'left', 'right', 'width', 'margin-left', or 'margin-right' are specified as 'auto', their computed value is '0'.
というわけで、非置換要素をフロートするときには width を明示的に指定してやらないと、width の算出値は 0 になります。幅 0 のものがフロートすることになりますが、なにしろ幅 0 ですからうまくありません。まず読めませんし。
ところが、これが IE で表示させると何故か幅 0 になりません。幅を適当に算出してくれて、ちゃんと読めるようにレンダリングしてくれたりします。実は昔、私も某所でこの罠にはまったのですが、当時は Mozilla などインストールしていなかったので、えむけいさんに指摘されるまで気がつかなかったという逸話があります。
そのとき思ったのは、「なるほど仕様的には非置換要素のフロートには width の明示が必要ですけれども、むしろ IE の挙動の方が嬉しいんじゃないのかしら」ということでした。width: auto だと幅 0 というのは、どう考えてもスタイルを指定した者の意図に反する結果にしかならないと思うわけなのです。
……とまあそんな事を思っていたのですが、実はそう思ったのは私だけではなかったようで、最近の CSS2.1 のドラフトを見ると、その部分はこんな記述になっています。
If 'left', 'right', 'margin-left', or 'margin-right' are specified as 'auto', their computed value is '0'.
If 'width' is specified as 'auto', the computed value is the "shrink-to-fit" width.
以上、CSS 2.1 Specification W3C Working Draft 28 January 2003 / 10.3.5 Floating, non-replaced elements より
つまり width は 0 ではなくて、"shrink-to-fit"、すなわち「ぴったりフィットするサイズに縮んだ」幅になります。"shrink-to-fit" という幅については、その後に続けて書かれています。
Calculation of the shrink-to-fit width is similar to computing the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, compute the available width: in this case, this is the width of the containing block minus 'left', 'right', 'margin-left' and 'margin-right'. (Omit 'left' and 'right' if they do not apply to this element.)
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
以上、CSS 2.1 Specification W3C Working Draft 28 January 2003 / 10.3.5 Floating, non-replaced elements より
Roughly と言っていますが本当に Roughly で、特に気になるのは、既にフロートがある場合について考慮していないということです。これ、何も考えずにそのまま実装すると、既存のフロートの横にフロートするとき、既存のフロートを無視して幅を決めることになってしまいます。
まあ常識的に考えれば、フロートは決して重ならないという掟なのですから、既存のフロートが存在しているときは、当然その分の幅は新たなフロートのためには利用できません。ですからその分も "available width" から差し引くべきでしょう。※ちなみに IE の挙動だとちゃんと引かれているようです。
今までの私の経験からすると、フロートの幅を auto にしたい時というのは、複数のフロートを横に並べて擬似的な段組にしたい時だったりするので、肝心のそのときの説明が無いというのは何ともなぁ、と思いました。まあ、これはまだワーキングドラフトなわけで、この辺りの説明が変わる可能性は高いですし、この仕様自体がどうなるか分からないわけですが……。
- 「width: auto のフロート」にコメントを書く
- 前(古い): /bakera/robots.txt
- 次(新しい): border の有無でマージン相殺が変わる
