Last Updated: February 25, 2016
·
607
· peiche

The best css evar

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

W3C really screwed up the box model. This will make your webs better. (It doesn’t work in IE7, but why are you still supporting it anyway?)

5 Responses
Add your response

I dont understand what you did mean about W3C screwed up. W3C dont like Box Sizing?

over 1 year ago ·

The default box sizing is content-box, which in my opinion is counter-intuitive. When I specify the width of an element, I'd expect it to be the entire visible element, including padding and border. The traditional box model, to me, makes more sense.

over 1 year ago ·

Side note, IE6 is border-box by default. IE7 changed it to follow W3C standards eventually. Perhaps one of those times IE got it right. They're quite the hipster it appears. ;)

over 1 year ago ·

Yes, and since IE7 does not support the box-sizing property, there's no way to fix it. :)

over 1 year ago ·

I wouldn't say W3C screwed up. IE6 was using border-box and switched to content-box eventually in IE7. The other browsers were all using content-box back then and W3C standards embraced content-box. When IE7 came along, they flipped to content-box, but it doesn't provide a box-sizing CSS property which became essential 5 years later (IE7 is released in 2006). As Paul mentioned, it does seem more intuitive to have it border-box after all. It is hard for W3C to envision this is going to be the way people prefer things so many years ago too; I'm just glad there's a box-sizing attribute to give more options to developers.

over 1 year ago ·