I can't tell you how much I enjoyed doodling in the margins while I read that article.
What article?
doodling
* { box-sizing: border-box } FTW
31–40 of 90 posts
Re: * { box-sizing: border-box } FTW
#32Earlier quoted context omitted.
Yeah, but why not lobby W3C to change their box model to a saner one?
That's what `box-sizing: border-box` is! You can't just change the default because that would break existing websites and the W3C's box model was adopted by every other browser.
Sure you can change the existing default, that's what people wanted IE to do.
Re: * { box-sizing: border-box } FTW
#33Where the traditional box model starts to make sense is with fixed-size elements, such as images. Adding padding to an element shouldn't alter the dimensions of the contents within the element.
Re: * { box-sizing: border-box } FTW
#34The W3C box model spec forms a set of consistent rules that make sense. It's not the spec that's wrong. Just because it doesn't fit with your original intuition doesn't make it wrong.
The W3C box model would only be useful if the W3C also provided a way to specify a width as "percentage of parent box width minus a fixed number of units" to compensate for the padding adding to the total width.
However, they did not, which means that in order to make a decent flowing layout, you have to change your document markup to insert artificial and otherwise unnecessary elements (DIV tags usually).
Thus the original model was flawed, did not make sense, and ultimately was not consistent with their own stated goals (separation of content and style).
[edit: FWIW petenixey said essentially the same thing, and what's really clever is that he said it first.]
Re: * { box-sizing: border-box } FTW
#35The W3C box model spec forms a set of consistent rules that make sense. It's not the spec that's wrong. Just because it doesn't fit with your original intuition doesn't make it wrong.
The W3C box model would only be useful if the W3C also provided a way to specify a width as "percentage of parent box width minus a fixed number of units" to compensate for the padding adding to the total width. However, they did not, which means that in order to make a decent flowing layout, you have to change your document markup to insert artificial and otherwise unnecessary elements (DIV tags usually). Thus the o…
[deleted]
Re: * { box-sizing: border-box } FTW
#36I didn't read the article, but love the mouse effects outside of the content area :D
The Firefox on my work desktop (7, Linux) slows to a crawl on that site, I suspect it's because of the doodle effect. Annoying gimmick, sorry.
Firefox canvas performance is a joke. You should upgrade to Chrome.
Re: * { box-sizing: border-box } FTW
#37The W3C box model spec forms a set of consistent rules that make sense. It's not the spec that's wrong. Just because it doesn't fit with your original intuition doesn't make it wrong.
It's not just an issue with intuition it simply makes it far harder to do many types of layout. One of the biggest failings of the W3C model was that you could not combine a percentage width with fixed margin. If you wanted a fluid layout but which still incorporated consistent margins it was impossible to achieve without an entirely unnecessary nesting of divs. Border-box completely eliminated this and poor old Micr…
Content-box eliminated this?
Re: * { box-sizing: border-box } FTW
#38Earlier quoted context omitted.
The Firefox on my work desktop (7, Linux) slows to a crawl on that site, I suspect it's because of the doodle effect. Annoying gimmick, sorry.
Firefox canvas performance is a joke. You should upgrade to Chrome.
Firefox (10, linux) performance is fine for me; it may be his browser version or something else.
Re: * { box-sizing: border-box } FTW
#39I love you Paul Irish. I was just complaining about this exact same issue about 3 days ago and when I found this article I was like YES HE AGREES WITH ME!
Especially when dealing with fluid layouts, this guy is a lifesaver
Re: * { box-sizing: border-box } FTW
#40As I pointed out on twitter http://twitter.com/#!/jhummel/status/169561232045649921 it seems that the * selector doesn't apply to pseudo elements. If you're going to take this route it might be a good idea to include *, ::after, ::before { box-sizing: border-box } to make sure everything is being sized the same.