Observations on the CSS3 Box-Sizing Property and How Designers Use Style Sheets

Recently, I became aware of CSS3’s box-sizing property. This property can have two values, content-box and border-box. The content-box value is what we’re all used to. It causes the selected box’s dimensions to be sized by setting the specified width of the box equal to the width of the content area of the box. Any horizontal borders or padding that the box has is then added to the content area’s width. The border-box value sets the selected box’s width equal to the content area and any horizontal borders and padding, effectively subtracting the width of the padding and border from the declared width in order to calculate the content area’s width.

In other words, the border-box value to the box-sizing property makes the selected box use Internet Explorer’s non-standard box model. At least, it was non-standard until it became part of the CSS3 spec. The spec even notes this itself, saying “This is the behavior of width and height as commonly implemented by legacy HTML user agents for replaced elements and input elements.”

This is somewhat annoying, because this means that rather than fix their “Web browser,” Microsoft can now say that their browser supports this property of CSS. In the end however, I do see the necessity of the property for compatibility reasons, as much as that necessity (caused by one browser vendor’s lack of support for Web standards) bothers me.

The most direct application of this technique comes in the form of making two child elements who have borders and/or padding fit precisely within one larger parent element whose width is flexible. For example, making floated, columnar layouts.

So while taking all this in I took some time to familiarize myself as best I could with Firefox’s implementation, the -moz-box-sizing property, and its effects. Some of my observations:

  1. Most interesting uses for three column liquid layouts (or more). Two column layouts can use a (more complicated) balancing of float: left and float: right to achieve a similar effect in a liquid layout, though a small, variable amount of space between columns is nearly unavoidable.

    Also, experienced designers usually keep a certain degree of whitespace in their layouts, making such tightly fitted floats largely unnecessary and/or impractical implementations for certain designs. (I.e., positioning would be a more appropriate solution.)

  2. Border-boxes offer no help for linking the height of a box to the height of its neighbor. Considering this is the biggest failing of CSS-based columnar layouts to date, I would stick with an accessible table where absolutely necessary, which can be and often is sized just like a border-box.

  3. When confronted with left-floated boxes such as in the case of a columnar layout, IE/Win versions that use the border-box method of calculating width and height will drop a tightly-fitted floated box below its neighbor on a window resize. This creates either a trippy experience or cause for frustration depending on your mood. Considering this property is at least partially intended to help IE/Win, that’s quite an embarassing thing to have happen, methinks.

  4. All in all, I’m still not convinced of the necessity of this property, except to support IE. While it can certainly be a useful “option” when attempting to create (arguably simplistic) column layouts using strictly semantic markup and CSS, tables are still going to be necessary in some designs. In the situations where they are not, a combination of existing techniques can still be used to achieve any desired effect.

Furthermore, this certainly doesn’t help make CSS a more approachable topic for Web designers who are new to the technology. The single largest obstacle to CSS’s widespread adoption are the many various and often extreme browser bugs and quirks present in the majority of browsers. When a CSS newbie begins writing some stylesheets, they are greeted with horrendous results thanks to these misbehaving browsers. I know of several Web design projects that have begun using stylehseets, only to abandon all but their most basic capability due to frustration on the designer’s part. Some CSS concepts are not easy to grasp for beginners, the box model being one of them, and I am not fond of the idea of presenting designers with yet more differences in the way their pages can be rendered.

Moreover, most CSS beginners I have encountered use a GUI such as Dreamweaver or GoLive to create their stylesheets. In this case, a question arises for the developers of these interfaces: how do I visually show which kind of box-sizing is being used for this particular box on the screen? Do I show a little icon in the corner of the box’s display? Do I hide it in a dialog box?

In my opinion, these interfaces are not very good for creating style sheets. There is currently no application whith which you can actually draw, with your mouse, a rectangle of padding onto an element. You have to type a number into the “Padding” input box and then select the unit you’d like to use from a drop down menu. Designers do not think this way. Coders and programmers do. But coders and programmers aren’t the ones who really need CSS. Designers do. And they need their tools and their web browsers to speak their own language to them.

3 replies on “Observations on the CSS3 Box-Sizing Property and How Designers Use Style Sheets”

  1. nice commentary – happenned across your blog, while searching on the topic so figured i’d take the time to comment. just entered the web design industry myself, and now wrestling with the box-sizing thing as i develop a clients site. any thoughts on why they chose not to allow the use of this specification alongside min-width (or max or height)? while i’m here i guess, i should mention i’m not so sure about css being something for “designers”; how many REAL designers do you know who have even the tiniest bit of coding (or it’s philosiphies) in their blood? not only this, but how would you really develop css fluently without understanding the standards and coding principles behind it? as a result, i’m certain all apps give their css “gui” component as lip-service rather than a real attempt at full functionality hence am not surprised in their lack of usability…

  2. box-sizing is specifically a CSS3 property, but both min- and max-width and height are part of CSS2.1. The issue is simply that some Important Exceptions exist as to which browsers support those properties. ;)

    I agree that the CSS interfaces on GUI apps are still bad, of course. I’d really love to see one that’s more like Photoshop or Illustrator, but I’m not a very visual person.

Comments are closed.