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 Transitions and Transforms Getting Started with CSS Transitions Creating Your First Transition with transition-duration

Stefaan Quackels
Stefaan Quackels
5,720 Points
Posted by Stefaan Quackels
Stefaan Quackels
5,720 Points

Prefixes -moz-, -webkit-, -ms-, -o- everytime you do a transition?

Do you need to use prefixes like -moz-, -webkit-, -ms-, -o- everytime you do a transition? If so, all of them? Do you need to add those for transforms too?

7 Answers

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points
  1. ShouldIPrefix should be of some use to you, it has a list of what needs prefixes
  2. You can check browser compatibility at CanIUse. This is a great resource to see what browser and version supports what :)
Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

Hi Stefaan, it's generally good practice to add these prefixes as it will let you add new CSS features onto your site while having the comfort of knowing that all the browsers that you prefixed will support these styles . This can also be very helpful when different browsers can sometimes implement properties in slightly different ways.

Brendon Butler
Brendon Butler
4,254 Points
Brendon Butler
Brendon Butler
4,254 Points

The reason you use all of them is so that every web browser, and older versions of them gets the same instructions on how to format the webpage.

Alex Sell
Alex Sell
19,355 Points
Alex Sell
Alex Sell
19,355 Points

Atom is the text editor that I use. This is a really useful package for vendor prefixing:

https://github.com/sindresorhus/atom-autoprefixer

Or if you prefer Sublime:

https://github.com/sindresorhus/sublime-autoprefixer

Stefaan Quackels
Stefaan Quackels
5,720 Points
Stefaan Quackels
Stefaan Quackels
5,720 Points

Thanks for the replies.

Two more questions: 1.) For what other properties should I also use these prefixes besides transition properties? Should I, for example, also add these prefixes for transforms? 2.) Where can I check browser compatibility?

justdave
justdave
31,518 Points
justdave
justdave
31,518 Points

If you want to save yourself a lot of headache and time, check out a taskrunner + https://github.com/postcss/postcss and autoprefixer. It will automatically do the lookup and add or remove prefixes as required. Big timesaver and crushes most browser compatibility problems.

edit: I just realized this post is a year old, but better late than never so my reply stands.