Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Transitions and Transforms Getting Started with CSS Transitions Creating Your First Transition with transition-duration

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

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,242 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

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

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?

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.