Vendor prefixes and browser support

- You won't be seeing any vendor prefixes written in the exercise files for this course. But that's not to say they aren't needed entirely. At the time of this recording the most recent versions of IE Edge, Firefox, Chrome, Safari, and others all support CSS transitions, CSS animations, and CSS transforms in their un-prefixed version. You can see here on caniuse.com the listings for each. CSS transitions are all green with no prefixes indicated and the same goes for CSS animation, CSS 2D transforms, and even CSS 3D transforms.

That's really great news. However older versions of these browsers, even ones from just a few months ago still require prefixes to support transitions, animations, and transforms. So in a production environment you will need to consider your prefixes. And the best way to do this is to have your prefixes dealt with automatically as part of your build process. Personally I like to use something like Autoprefixer in my production work. It works behind the scenes to add the necessary prefixes when you compile your CSS file. CSS-Tricks has a really great article here explaining what Autoprefixer is and how it works.

If you're using something like CodeKit, which is what I like to use, you can set up Autoprefixer to apply prefixes for specific browsers and decide how far back you'd like to go in the support of your prefixes. Autoprefixer uses the caniuse.com API to keep up to date and be sure it's only printing out the prefixes that you actually need. This helps keep your final production code from getting unnecessarily cluttered. All in all it's a really great tool. Regardless of how you choose to handle your vendor prefixes visit caniuse.com from time to time to keep up on which prefixes are needed and for which browsers.

It's a really great source to keep up to date on all of these things.