Paul Irish on HTML element widths being inclusive of padding at all times. That is to say if I define my box as 200 pixels wide then it should stay at a total of 200 pixels, no matter what I use for its padding value.

The money shot is as follows:

* { /* apply a natural box layout model to all elements */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

Also, an interesting read on using * and its impact on performance.

You might get up in arms about the universal * selector. Apparently you’ve heard its slow. Firstly, it’s not. It is as fast as h1 as a selector. It can be slow when you specifically use it like .foo > *, so don’t do that. Aside from that, you are not allowed to care about the performance of * unless you concatenate all your javascript, have it at the bottom, minify your css and js, gzip all your assets, and losslessly compress all your images. If aren’t getting 90+ Page Speed scores, its way too early to be thinking about selector optimization.

As with most CSS, there’s no one-size-fits-all choice for this. At times it makes sense (it’s used on the WordPress.com Theme Showcase, selectively though) and at other times it doesn’t.

I like it, though.

Head over to Irish’s site to weigh in or drop a comment here with your thoughts.

320 and up by Andy Clarke takes on the notion that when using responsive design with media queries small devices load assets they don’t need. This technique uses a tiny stylesheet first, and loads larger assets only when needed.

For those that fancy doing web design and debugging on Webkit browsers, here is a recently announced round of improvements.

I personally shall appreciate the fact that color values are rendered as originally written —if desired—, which should make experimenting and copying from the browser to the original stylesheet much easier, by preserving the chosen code style. The style presentation and persisting changes add-ons are equally neat.