CSS CSS Layout Basics Getting Started with CSS Layout Using a Mobile First Approach

Elena Paraschiv
Elena Paraschiv
9,938 Points

caniuse/prefixes for border-box

Hey guys, In the article Box-Sizing by Nick I found this snippet of code that an author recommends to always use:

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

I have 2 questions.

  1. By following http://caniuse.com/#feat=css3-boxsizing support I dont see that we have to use vendor prefixes anymore.Is that the case nowadays?

  2. WHy do we have to also add *:before, *:after

Isn't enough to have a simple structure like *{ box-sizing:border-box; }

Thanks in advance!

2 Answers

Adam Hill
Adam Hill
7,487 Points

:before and :after are pseudo elements and therefore might not be covered by * (all), as every selector (div, span etc) can also have a :before or :after. As for vendor prefixes, caniuse is great for what's currently supported, but in real world usage you want to cover as many bases as possible (where I work we've only recently stopped supporting ie8 as standard as many corporate clients still had company wide intranets using it which also stopped uses installing chrome or upgrading ie).

Junrill Galvez
Junrill Galvez
2,824 Points
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

that is the updated best practice for global box-sizing based on this article http://www.paulirish.com/2012/box-sizing-border-box-ftw/

the browser prefixes can be added depending on which browser or browser you support. if you will click on show all on caniuse.com it will show that old browser version like firefox 2 will require -moz prefix for box-sizing to work.