I had a moment of existential panic this week over an esoteric technical point
t do with out outsourced stylesheets: our builder has set the default box
model to not be content-box but border-box! The difference represents the
final end of the original vision of CSS as a content-outwards style language.
By content-outwards I mean the way that style sheets were originally conceived in the content-focussed committees of the W3C in ancient times. The idea is you start with a piece of text and then describe how you want it laid out, using a few CSS clauses like the following:
font-family: alegreya;
font-size: 12pt;
width: 36em;
Obviously here the 36em is intended to be the width of the text—the content of the box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tellus tortor, bibendum at sodales ut, convallis eget felis. Praesent volutpat pretium leo eget mollis. Donec et commodo urna, non maximus sem. Integer id dapibus sem, aliquam venenatis nunc. Vestibulum venenatis velit ex, nec lobortis magna bibendum in. Praesent placerat lectus in augue pharetra sodales at aliquet eros. Duis non posuere purus, id varius elit. Nullam mattis, sapien ac dictum vehicula, elit ex efficitur nisl, id dictum justo eros sed elit. Curabitur sit amet tortor quis ex efficitur blandit. Morbi urna eros, blandit at fringilla non, fringilla in eros.
Equally obviously, if you add a frame to the text then the width of the framed content will be wider than the width of the content. Because we have an infinite canvas we a free to add a frame to the text without worrying about running outof paper. The text might be framed using a CSS snippet like this:
padding: 2em 3em 4em;
border: 0.25em solid #900;
The resulting box is (0.25 em + 3 em + 36 em + 3 em + 0.25 em) = 42.5 em wide.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tellus tortor, bibendum at sodales ut, convallis eget felis. Praesent volutpat pretium leo eget mollis. Donec et commodo urna, non maximus sem. Integer id dapibus sem, aliquam venenatis nunc. Vestibulum venenatis velit ex, nec lobortis magna bibendum in. Praesent placerat lectus in augue pharetra sodales at aliquet eros. Duis non posuere purus, id varius elit. Nullam mattis, sapien ac dictum vehicula, elit ex efficitur nisl, id dictum justo eros sed elit. Curabitur sit amet tortor quis ex efficitur blandit. Morbi urna eros, blandit at fringilla non, fringilla in eros.
A lot of the quirks of CSS can be explained in terms of thinking of web pages as consisting mostly of text with a few style rules attached.
But designers don‘t worth that weay in practice. A designer looks at the viewport as a page of a set size, then allocates so much space for the header, so much for the side-bar, so much for the content, and so on. Having designed a layout, they imagine the text being poured in to the gaps they have left for it, thus layout-inwards. This is the paper-oriented model they learned from Quark XPress or Adobe Indesign—or, more, more likely, that the designers they learned from learned from, since the current crop of designers have never designed for paper.
It follows that having decided on a 960-px text column with 10-px padding, it is annoying for them to have to subtract 20 px from 960 px to arrive at the content’s width of 940 px. It is even worse if they have to somehow subtract 20 px from 60% if their apporoach to a liquid layout is to divide the page up in constant proportions. Occasionally this can require otherwise useless extra elements so you can set the width on one and the padding on the other or something.
Rather than creating a new property outer-width to mean the outer width of the box, the CSS standards people chose to add a new property that changes the
meaning of the existing width property:
font-family: alegreya;
font-size: 12pt;
width: 36em;
padding: 2em 3em 4em;
border: 0.25em solid #900;
box-sizing: border-box;
The browser than adjusts the size of the content to make the outer width correct.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tellus tortor, bibendum at sodales ut, convallis eget felis. Praesent volutpat pretium leo eget mollis. Donec et commodo urna, non maximus sem. Integer id dapibus sem, aliquam venenatis nunc. Vestibulum venenatis velit ex, nec lobortis magna bibendum in. Praesent placerat lectus in augue pharetra sodales at aliquet eros. Duis non posuere purus, id varius elit. Nullam mattis, sapien ac dictum vehicula, elit ex efficitur nisl, id dictum justo eros sed elit. Curabitur sit amet tortor quis ex efficitur blandit. Morbi urna eros, blandit at fringilla non, fringilla in eros.
Because of the way CSS works, the border-box rule may be nowhere near the
part of the CSS file you are currently looking at. It’s as if when you visit
an art gallery you need to check everywhere for a discreet notice saying
whether the sizes of paintings are of the canvas alone or include the frames. Adding outer-width and outer-height properties instead would have been much clearer.
Front-end developers get all excited about the border-box mode because it better
matches their layout-inwards approach. Paul Irish’s 2012 article (by a former
developer on HTML5 Boilerplate) seems to have started a movement
promoting this change, though at present neither normalize.css nor
HTML5 Boilerplate have made it default.
I think the exitensial angst is caused by the fact that as border-box gains
momentum I am going to have to re-examine 15 years’ worth of CSS experience
as the underlying fundamentals of what width and height mean are changed.