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 Unused CSS Stages Flexbox and Multi-Column Layout Flexbox: Part 2

Posted by Marc Biggar
Marc Biggar
12,486 Points

Question about -webkit-

When using -webkit in CSS for example, applying flexbox, will that mean that my CSS will only work on Chrome and not other browsers?...Or am I completely missing the point.

5 Answers

Vlatko .
Vlatko .
2,526 Points
Vlatko .
Vlatko .
2,526 Points

-webkit- is a prefix that is specifically used for the browser Chrome, that's why it says it will only work on Chrome.

Other browsers have their own prefixes that need to be added in order to have it work on them. Here are some examples:

-webkit- // Chrome & Safari
-moz- // Mozilla Firefox 
-o- // Opera

Hope that helps.

Chris Wiley
Chris Wiley
11,327 Points
Chris Wiley
Chris Wiley
11,327 Points

Use the http://caniuse.com/ site that Guil recommends to figure out the prefix need per intended platform. He has said that up to 4 or 5 will need to be included in your web buildup for cross plat form access. It appears pretty universal at this point, but you have to know your audience.

Fernando Ramos
Fernando Ramos
4,369 Points
Fernando Ramos
Fernando Ramos
4,369 Points

I tired adding the -moz (Firefox), -o (Opera) and -ms (Microsoft) to the webkits but only Chrome seems to work for now with Flexbox. I have not tried Safari or any other browsers beside the 3 mentioned here.

Chris Wiley
Chris Wiley
11,327 Points

Are you putting the different browser in place of webkits? They don't stack and need their own line. Do you have an example of the code that isn't working to get a better idea of your description?

Fernando Ramos
Fernando Ramos
4,369 Points
Fernando Ramos
Fernando Ramos
4,369 Points

Yup, right here: .nav { display: -webkit-flex; display: -moz-webkit-flex; display: -o-webkit-flex; display: -ms-webkit-flex; -webkit-flex-direction: row; -webkit-justify-content: space-between; }

Chris Wiley
Chris Wiley
11,327 Points

Webkit is the designator for Chrome and Safari. Don't use it for other browsers. -moz-flex;, without the webkit when for Firefox, for example.

Fernando Ramos
Fernando Ramos
4,369 Points
Fernando Ramos
Fernando Ramos
4,369 Points

Oh right!! I see my goof now... I thought we could stack things though... I will play around with it but thanks for the heads up. I did try display: -moz-flex; and -moz-flex-direction: row; and -moz-justify-content: space-between; ...but it looks like it still doesn't work for Mozilaa. BTW, I just tried it with Opera and the stacking designators work as long as I used display: -o-flex; Thanks again!