For designing web sites, it is a breath of fresh air. Now that Vanadium has officially dropped support for IE7 and older browsers, we can finally start using the CSS box-sizing property. The property has been around for a while, supported in IE8 and newer, but to maintain compatibility with IE7 and older browsers, it had to be avoided until now.
History
In the late ’90s, the W3C specification determined that when the dimensions of a box were explicitly set, they should apply to the content area (the area that could contain text), not the padding, and not the borders (see the diagrams on CSS-Tricks). It wasn’t an intuitive model, and wasn’t applied to any other aspects of box positioning; if you set the position of an absolutely positioned element, for example, it was still relative to the outer border of the box, not the content area. Microsoft ignored the W3C specification and continued to make Internet Explorer size all boxes relative to the outer border, while other browsers, like Firefox and Safari adopted the specification. This resulted in great headaches for developers, and the proliferation of those wonderful website badges “This site is best viewed in [insert browser name here].”
See the full history on Wikipedia
I always hoped that Microsoft would win this dispute and the W3C would change the specification, but unfortunately it went the other way, and with IE6, Microsoft finally changed their rendering engine to match the specification (in standards mode). The specification wasn’t ideal, but at least CSS would now start to look similar in all of the major browsers. The Box-sizing article on CSS-Tricks and the * { Box-sizing: Border-box } FTW article by Paul Irish explain some of the problems this model causes.
Current
Around 2008, many browsers, including IE8, introduced the box-sizing property, where designers could choose the box-model to use for each individual box, which is a brilliant solution to the problem. And with a simple CSS statement we have the option to apply it to all elements, and get back to designing with a box model that makes sense.
It is currently a candidate for the CSS 3 specification, and one that certainly deserves to be added.
Comments are closed