Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

* { box-sizing: border-box } FTW

paulirish.com

Post reply on HN
Print view View original

61–70 of 90 posts

Re: * { box-sizing: border-box } FTW

#61

Post by mladenkovacevic »

paulirish wrote: post #47
vegardx wrote: post #46

Was I the only one that for some reason got a Youtube-video that all of a sudden popped up and started playing a short video about ESPN being hacked or something? Might have been a glitch of some sort, but I'd suggest OP should check his source code to see if he hasn't been compromised of some sort.

omg hacked! Nah it's cool. I wired that up. The unicorns konami trigger that was featured in the video was introduced by my blog so it's a bit of an homage or something. Thxthx.

Hey for some reason I can't add your Google Reader Frontend feed collections to my subscriptions. Clicking on the "Subscribe" buttons doesn't produce any result. Win XP and Chrome here.

Re: * { box-sizing: border-box } FTW

#62

Post by bzbarsky »

kbolino wrote: post #34
themstheones wrote: post #9

The 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…

At this point the W3C is in fact working on providing such a thing. "width: calc(50% - 20px)".

Works in Firefox and IE. At some point WebKit will catch up, I assume.

Re: * { box-sizing: border-box } FTW

#63

Post by mikepurvis »

josscrowcroft wrote: post #56

This article was an eye-opener - I write CSS all the damn time and hadn't even clocked box-sizing yet. I don't wanna know how many hours I've spent calculating widths-after-padding(-but-wait-it's-different-on-both-sides) and commenting the CSS so other developers know why this element is width: 169px even though the container is 200px... Not to mention: textarea { width:100%; padding:20px; oh shit. }

Wow, yeah. For years I've been using the container-div idiom, where the outer one sets the width, and the inner one imposes border and padding against a width: auto.

This may take some getting used to.

Re: * { box-sizing: border-box } FTW

#65

Post by davej »

rmc wrote: post #32
davej wrote: post #20

Earlier quoted context omitted.

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.

If individual vendors mess up when implementing the spec from the standards body (which they are a member of) then they should have to clean up their own mess. IE did eventually change the default in IE6 and added quirks mode for compatibility with websites designed for Even if the majority of people preferred the IE5.5 box model, it didn't follow the spec and it is therefore wrong. We have standards specifications on the web to maintain cross-browser compatibility; if browser vendors don't follow them then whats the point?

Re: * { box-sizing: border-box } FTW

#66

Post by funkah »

tambourine_man wrote: post #12
agscala wrote: post #8

Earlier quoted context omitted.

People were lobbying for IE to change in order to make it consistent with the rest of the browsers, not necessarily because it was worse.

Yeah, but why not lobby W3C to change their box model to a saner one?

Points to TFA

Re: * { box-sizing: border-box } FTW

#67

Post by jakelear »

AUmrysh wrote: post #45
zerd wrote: post #31

Earlier quoted context omitted.

What article? doodling

I don't know what I did, but after I doodled a bit and scrolled the page around using the middle mouse button, this youtube video popped up over the page: http://www.youtube.com/watch?v=E6x_-xKl-Fg Also the konami code makes the same sort of unicorns appear that were on the video.

Drawing a star causes the video to appear.

Re: * { box-sizing: border-box } FTW

#68

Post by funkah »

robgibbons wrote: post #33

Where 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.

Good point. Maybe the best thing then is to add a rule for "img" or maybe ".fixed-size" with "box-sizing: content-box" right after after the "*" rule.

Re: * { box-sizing: border-box } FTW

#70

Post by kbolino »

bzbarsky wrote: post #62
kbolino wrote: post #34

Earlier quoted context omitted.

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…

At this point the W3C is in fact working on providing such a thing. "width: calc(50% - 20px)". Works in Firefox and IE. At some point WebKit will catch up, I assume.

I'm glad to hear that, but it's long overdue and the border-box model already solves the same problem with less markup (and most importantly, without creating an implicit dependency between the padding and width styles).
Post reply on HN