CSS Unused CSS Stages Flexbox and Multi-Column Layout Flexbox: Part 2

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

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

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

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.

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

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; }

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

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!