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 Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

vendor prefix

l know this but forgot. what css properties do you need to write vendor prefix for? is there a site for generating them and do you need vendor prefix when using foundation or when writing css in Sass?

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Required vendor prefixes change depending on the browsers you want to support.

Here is a great article explaining many different ways to deal with them.

Personally, I use Autoprefixer, It's amazing.

http://css-tricks.com/how-to-deal-with-vendor-prefixes/

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

thanks for that and can you pass us a like to check autoprefixer put please? l have just seen it but wondered if there any need to use prefix at all when using bootstrap as it says in the guithub repo that autoprefixer in used in bootstrap meaning it comes packed with it?

Michael Thomas
Michael Thomas
10,910 Points

Hey Kevin, I'm really confused now, I just used Autoprefixer and it added some prefixes for me, great! But it also stripped some out, mostly my css3 transition prefixes, I thought I was doing a good thing by including those because I've seen them elsewhere and just assumed it would make the transitions work on older versions of IE ect...

Michael Thomas
Michael Thomas
10,910 Points

Just checked out the Autoprefixer githup page - says the default set to past 2 versions of each browser...

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

If vendor prefixes are considered "old", it'll remove them. If you have legacy code, or need to turn this feature off, you can. In general, it's aim is to make your codebase smaller by not including prefixes that are generally not needed because that browsers market is almost nothing.

Here is how you turn that off: https://github.com/postcss/autoprefixer#outdated-prefixes

Michael Thomas
Michael Thomas
10,910 Points

Wow that was fast!! Yeah I just looked at caniuse.com, indeed, all of those prefixes aren't needed anymore - so I'm going to keep it in there. Thanks Kevin!

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Sounds good. The default settings are usual pretty good for most sites.

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

A site generating them ? I don't think so, but I know there is a plugin generating all the prefixes for you if needed. I've never used it on my side. It's called -prefix-free. You can check the support of CSS3 properties among browsers on website such as canIuse.

You can have a list of all the vendor specific properties here

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Prefixr will generate the necessary vendor prefixes. You just need to copy and paste.

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

that apps got a funny behave dont know if its my browser but it wont paste now in the input field