Adding Presentational Styles - CSS3 Foundations - page 66

In Chapter 1, I mentioned that some of the CSS3 modules are incomplete and at various stages prior to reaching the
Recommendation status.
With many of CSS3's modules still being written, browser vendors are constantly updating their
browsers to better support CSS3's new features. The more they can implement, the more they and their users can test
and provide feedback on, so it is very important for a browser to keep up with the latest web technology.
To make implementing experimental features as safe as possible, it was decided that each browser should have its
own prefix to be placed before a CSS property. That way, if two browsers do implement a feature in a different way,
that feature viewed in one browser doesn't appear broken in the other; they both refer to the same feature but may
have their own unique implementation of it. When a feature becomes official, the vendor-prefixed property then be-
comes obsolete, and the official property is relied on instead.
So, what exactly are vendor prefixes and how do you use them?
One example of an experimental property is transition-duration , which you will learn to use in Chapter 14.
A transition-duration declaration may be written like so:
transition-duration: 2s;
This is the official property name that is described in the CSS3 Transitions module. However, as at the time of writ-
ing, that module is a Working Draft, for the safest implementation, transition-duration should be written
with a vendor prefix for each browser, like so:
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
These vendor prefixes apply to the following browsers:
• -webkit- — Google Chrome and Apple Safari (they use the WebKit Layout Engine)
• -moz- — Mozilla Firefox
• -ms- — Microsoft Internet Explorer
• -o- — Opera
The vendor-prefixed properties should be followed by the official, unprefixed property, which ensures that when this
property does become official, the standardized property will be used—instead of the vendor-specific one.
In the preceding example, the same property is repeated five times. If you're anything like me, typing it that many
times sounds like a hassle. It's important to use vendor prefixes, though!
You can be thankful that there are free tools that allow you to write only one vendor prefix during development, and
they will fill in the rest for you. When you use vendor prefixes throughout CSS3 Foundations , write one only for the