Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by 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,492 Points
Adam Hill
Adam Hill
7,492 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
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.