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

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

  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 :)

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.

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.

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

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?

Thanks, issue resolved!

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.