International box-sizing Awareness Day

It’s February 1st today, which I’ve decided to declare International box-sizing Awareness Day. In honor of, you guessed it, the most humble and undersung, yet awesome and useful CSS property: box-sizing.

The date corresponds to Paul Irish’s post where he introduced the concept of using it on every single element on the page. We’ve talked about it around here a few times as well.

Here it is, in all it’s glory:

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

The default value for box-sizing is content-box, which is what we are overriding here. There is also a padding-box value but… kinda useless if you ask me. We’ll get to what this means shortly.

Notice we’re using the * selector to select all elements, as well as making pseudo elements use the same model, which otherwise wouldn’t be selected by the * selector alone.

Here’s the browser support situation. “-” = “this version and down”. “+” = “this version and up”.

*, *:before, *:after {
  /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
  -webkit-box-sizing: border-box; 

  /* Firefox (desktop or Android) 28- */
  -moz-box-sizing: border-box;

  /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
  box-sizing: border-box;
}

In the fairly near future we won’t need any prefixes at all for it, but I like to just leave that kind of thing to Autoprefixer.

Why all the HOO-RAH?!

It makes working with boxes so super duper much nicer.

When you set the width of an element, that’s the width that it is. If you set the width to 25%, it will take up 1/4 of the horizontal space available in its parent element. That’s it.

That’s not always the case. With the default box-sizing, as soon as an element has either padding or border applied, the actual rendered width is wider than the width you set.

Actual width = width + border-left + border-right + padding-left + padding-right

The math is bad enough, but when combined with percentages (or any mixed units, really) the result is impossible to do in your head and, more importantly, ends up being some useless number that you can’t do anything with.

You might think of it this way: with box-sizing: border-box the padding and border press their way inside the box rather than expand the box. The result is a box the exact width you set it to be and can count on.

Columns is a particularly useful case, but this comes in useful all the time and becomes one of those things that just makes CSS development better.

Remember to read Paul’s original post which covers some more ground like performance (don’t worry about it), jQuery (don’t worry about it), and third-party content (easy to fix).

Happy International box-sizing Awareness Day! Maybe next year we can get organized about it and all wear groovy square sunglasses or something.