Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
You'll be seeing a lot of vendor prefixes in the exercises for this course. So let's take a minute to talk about what they're for and how I'll be using them in this course. Vendor prefixes are a way for browsers to support features before the spec for that feature has been finalized. Sometimes the early implementation of a feature is different from the final version, or the feature is only partially implemented early on. Prefixes are a way to let us know that features may not be 100% complete yet. They're also there to help us work around any slight differences in implementation from one browser to another while the feature is being finalized.
Vendor prefixes are often hotly debated in the industry. Love them or hate them, they are a necessary evil of authoring quality CSS that will work across multiple browsers. At the time of this recording, the most recent versions of Firefox, Opera, and IE support CSS animations without prefixes. However, slightly older versions of these browsers, even ones from just a few months ago, still require prefixes for animation support. In all of the examples, you'll see me starting out with only the WebKit version of the animation properties while I'm working on things and getting them where I want them.
By the final version I will always include all of my vendor prefixes. I'll write out the prefixes in the same order each time starting with the WebKit prefix version for WebKit browsers, then the moz prefix for Mozilla, the O for Opera, and finally the unprefixed property. The unprefixed property should always be included last so that their final implementation will override any experimental implementation. Thanks to the cascading nature of CSS, the last interpretable property listed will be the one used by the browser. All these prefixes certainly look like a lot to type. To help you with that, especially if you're writing the note by hand, I've included a snippet text file along with the exercise files for this course.
Each animation property you'll use will need to be prefixed. Your keyframe rules also need to be prefixed. So you'll end up with a long list of keyframe rules like this. Your unprefixed rules should always come last to keep your code nicely future-proof. As each browser vendor finalizes its implementation of the animation spec, they will move towards supporting the unprefixed version. I'll also be using some other newer CSS properties like transforms, and these will also require prefixes. So get ready to see a whole lot of prefixes, but don't worry, I promise to make things fun.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Your file was successfully uploaded.