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

Posted by Simon Parker
Simon Parker
Courses Plus Student 4,160 Points

Is the Webkit property only to make the code user friendly for Safari?

I have just finished watching the module on Flexbox in the CSS Layout Techniques course. I just want to check I am understanding things correctly. At times in addition to the flex property being used webkit was entered as well. Am I right in thinking this is to make it friendly for the Safari browser?

3 Answers

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

You are correct. When you use any flexbox properties, you need to add webkit vendor prefixes to everything to add support for Safari.

.flex {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  flex-direction: column;
}

A tool you should look into using is Autoprefixer. As its name implies, it will automatically add vendor prefixes to all properties so that you don't have to worry about adding them and (more importantly) maintaining them. I've only started using it recently, but it has been awesome.

Simon Parker
PLUS
Simon Parker
Courses Plus Student 4,160 Points
Simon Parker
Simon Parker
Courses Plus Student 4,160 Points

Thank you.

From the example you have given above you have two CSS lines for the same property. I presume you need both for browser compatibility?

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Yes; you need to add webkit vendor prefixes to all the flexbox properties in order to support Safari.

Simon Parker
PLUS
Simon Parker
Courses Plus Student 4,160 Points
Simon Parker
Simon Parker
Courses Plus Student 4,160 Points

Thanks for your help with this :).