▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Bert Bos | Understanding the CSS box model
To view: switch to full screen
With Javascript: Press A
This talk explores the limits of level 2 of the box model (and thus potential requirements for level 3). Examples include leading, centering and vertical text.
Bert Bos (W3C)▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
1994: CSS (with Håkon Wium Lie)
1995-now: W3C (CSS, I18N, HTML, XML, MathML)
Based in Sophia-Antipolis, France
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
I'd like to learn as much from this talk as you, if not more ☺
Of course, I don't have to tell you who you are. But maybe what I expect from you.
I'm assuming I have in front of me people who are experts, who know at least as much about CSS as myself, and who, moreover, have ideas about what should still be added to CSS.
In other words, if the next slides talk about proposed extension of CSS in level 3, then I'd like to hear from you what you think those extensions should be, exactly.
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
The CSS specification uses a number of terms in specific ways. It is usually not necessary to know them to be able to use CSS, but this presentation deals with the limits of CSS and thus it is handy to have a few precise terms to be able to talk about them.
As CSS is used on more types of pages, on bigger and bigger screens and for more and more different languages, the limits of the current box model appear. Text in columns isn't always typographically correct, Some often demanded effects are difficult or impossible to achieve, and vertical text (as for Japanese, but also on the spine of a book, for example) is not possible at all.
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Boxes have top, right, bottom and left.
Margin area always transparent, sometimes collapses.
A text in the CSS model consists of rectangular boxes. Around the content (text or something else) is the padding area with the same background as the content. Around that is the border, also with the same background, but with a separate foreground style. And around that is the margin, which is transparent.
The margin roughly specifies the minimum distance to the surrounding boxes, but the rules for how margins of neighboring boxes interact (“collapse”) are complex.
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
The width of a box is subject to constraints that depend on the kind of box: block, inline, or replaced. The parameters that go into the calculation are the parent's width (or more precisely: the containing block), the margins, borders, padding and any explicitly specified width.
For blocks, the sum of the margins, borders, padding, and content width must equal the parent's content width. This can lead to over-constrained (too many parameters specified) or under-constrained (too few parameters specified) situations. Various rules determine which parameters are ignored or get default values.
The normal situation is that the user determines the width (via the window size) and the designer determines the indent. But sometimes the designer can set the width, too, e.g., to align text to images of a certain size.
De intrinsieke dimensies van een box worden in niveau 2 niet precies gedefinieerd (wel in niveau 3). Maar het meest interessant voor deze presentatie zijn de blok-elementen.
In alle gevallen moet de vergelijking gelden, of de breedte expliciet is gespecificeerd of niet. Als de breedte is vastgelegd in een stijlregel, wordt één of beide marges automatisch aangepast. Maar de normale situatie is dat de breedte niet is gespecificeerd en de marges wel.
Marges kunnen negatief zijn. Een element kan dus breder zijn dan z'n ouder.
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Top and bottom margins collapse in certain cases
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Floats are boxes that are taken out of the flow and moved to the left or right side of the current flow. A float doesn't reduce the width of any block boxes, but it does reduce the width of any line boxes that would otherwise overlap the float.
Floats, unlike blocks in the normal flow, have a width that is based on their content, not on their margins and parent's size. The term (which will become a CSS keyword in level 3) we use for the width of a float is “fit content,” which is the intrinsic size, but limited by the available space.
Floats normally do not reduce the width of any block boxes, only of line boxes, but there is an exception. CSS level 2 has some explicitly vague wording that says that boxes with a non-initial 'overflow' value may become narrower as a result of a float that would otherwise overlap them. Level 3 should define exactly what happens.
This exception is the result of another browser bug. It's not clear yet how this will be defined in level 3.
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Inline elements → inline boxes → line boxes
Possibly repeat to find better line breaks,
possibly add letter spacing ditto
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Widespread browser bugs…
This line is left aligned
This line is also left aligned
This line is left aligned.
This line is right aligned
This line is also right aligned.
This line is right aligned.
This line is centered
This line is not centered in many browsers anno 2008
This line is centered
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = parent width
solve for auto:
auto + … + auto = P
◀━━━━ ━━━━▶ ◀━━━━ ━━━━▶ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Question: how to center an image?
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
▼
Lorem
ipsum dolor sit amet consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
▲
div {display: table; height: 10em; width: 100%} p {display: table-cell; vertical-align: middle}
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Solutions in CSS level 3?
margin-top: any
?
position:
center
?
position: relative
on parent
block-align: middle
?
'Any' would be like a stronger version of 'auto'. It prohibits margin collapsing and is flexible both in the vertical and in the horizontal direction.
A new value for 'position' would make the element an absoltely positioned element and center it both horizontally and vertically in its containing block. It requires that that parent not only has a height, but also has a 'position' value other than 'static'.
A new property might cause confusion with the existing 'vertical-align' property.
Generalizing 'vertical-align' to apply to all block-level elements might break some pages that currently set 'vertical-align' and don't expect it to apply. Also, some of the values of 'vertical-align' would be ignored for blocks.
Currently, if the 'height' is set, the element's bottom margin doesn't collapse with the bottom margin of its last child. If there is a vertical alignment property, then it depends on its value which margins are prohibited from collapsing: bottom (if children are top-aligned), top (if children are bottom-aligned), both (if the children are centered).
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
p { margin: 1em auto; width: 12em }
… 18em… 24em … 16em
<p class=p1>Lorem ipsum dolor sit… <p class=p2>Ut enim ad minim veniam… <p class=p3>Duis aute irure dolor…
The three examples consist of the same four paragraphs with the same style rules, but the last one has one paragraph that is not centered.
This is a problem with the way horizontal centering of blocks is defined in level 2, which is in turn the result of limits in implementations. The working group decided not to wait for their fix.
The next slide shows what the problem is.
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
What to do?
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum.
Better solutions possible?
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
For Japanese and Chinese (Mongolian is a bit harder still…)
For purpose of stacking blocks: same as horizontal after 90° rotation
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
'text-align: left'
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
'text-align: right'
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
'text-align: center'
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
'text-align: justify'
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Left margin lost next to float:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
3 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
p { overflow: hidden }
Why might you want that below?
img { float: left } ... <p><img alt=... src=image1> A relatively short text. <p><img alt=... src=image2> Another short text.
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Floats don't count for height of block
overflow: hidden
?
p:after {...; clear: left}
?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Adding a 'clear' to the paragraphs helps to align the images to the left and start each paragraph at the same height as its image, but it doesn't help to make the yellow background high enough to include the image.
There are two tricks to make the floats count for the height of the paragraph: use a value for 'overflow' other than the initial value 'visible', or add generated text after the paragraph that clears the image. Make sure that generated text is invisible and its height is zero.
Both methods have their downsides. 'Overflow' is normally used for other purposes, and maybe you don't want to hide the overflow on the sides. Also, collapsing of margins with children is prohibited if 'overflow' is anything else than 'visible'.
':after' has downsides, too. Maybe you also wanted to use it for some real text…
▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸ ▸
Solutions in CSS level 3?
overflow:
with-floats
?
height: with-floats
?
min-height:
floats
?
Most possible solutions are not very intuitive or make the interaction of other properties very complicated.
Håkon's idea for “Cascading HTML Style Sheets” and my implementation of a style language for SGML with context-sensitive selectors led quickly, after October 1994, to a system with the main features of both and the syntax of neither.
CSS has been developed since 1995 by W3C. That has resulted, among other things, in specifications for CSS level 1 and level 2. At the moment the working group in W3C is working on several modules for level 3 and a revision of level 2.
As for me, I have, among other things, set up the internationalization activity of W3C and participated in the standardization of HTML and XML. At the moment I'm coordinator for both CSS and MathML.
But you have read the programme, so I'm not telling you anything new…