Improved box-model reset

[JohnAlbin]

@garrettw Looks great! I'll fix the failing tests.

[garrettw]

Oh, I just realized that I didn't put the ideal two colons on those pseudo-element selectors. However, if you want to maintain IE8 compatibility, I can just leave it as is.

[JohnAlbin]

I tried this new box-sizing inheritance method on my last project. And, unfortunately, I ran into a really hard-to-track down bug because of it.

If you use the <details> element on your page, Chrome will treat all of its children as having box-sizing: content-box.

https://caniuse.com/#search=details confirms this bug:

In Chrome, when using the common inherit box-sizing fix (http://www.paulirish.com/2012/box-sizing-border-box-ftw/) in combination with a <details> element, the children of the <details> element get rendered as if they were box-sizing: content-box;. See: http://codepen.io/jochemnabuurs/pen/yYzYqM

When you experience this problem it is not at all obvious that the problem is due to the <details> element, either. I thought a CSS regression from my team was more likely than an obscure browser bug.

So my choice is to:

1. keep what we have; meaning devs will need to occasionally override for pre-built components that assume content-box.
2. Or to switch to this new method; meaning devs will occasionally run into very hard-to-debug problems. :-\

[garrettw]

Would it not work to just add a specific fix for that issue?

details * {
    box-sizing: border-box;
}

I just tested it in that codepen and it seemed to do the trick. That being said, from a performance perspective, I know that selector may not be optimal, so maybe there's some way to refine it but you get the gist.

[JohnAlbin]

details * {
    box-sizing: border-box;
}

is equivalent (but with higher specificity) than

* {
    box-sizing: border-box;
}

And has the same issue that our existing CSS has.

[JohnAlbin]

So, if we want the same box-sizing: inherit; property for children of details, we would need to modify the CSS to:

html,
details > * {
  box-sizing: border-box;
}

*, *:before, *:after,
details > * *,
details > * *:before,
details > * *:after {
  box-sizing: inherit;
}

vs. what we have now:

* {
  box-sizing: border-box;
}

[garrettw]

Well, I'm fine with whatever you think is best then.

[JohnAlbin]

6 years later and this browser bug is still unfixed. :-p