Pro CSS3 Animation

CHAPTER 1 ■ CSS3 FundAmEnTAlS

problem: developers wanted their browsers to support these cool technologies today, without having to wait
for the long process of W3C recommendation, discussion, and final approval. Everyone knew the bitter lessons
of the browser wars of the 90s and the associated clash of conflicting technologies. How could browsers support
the very latest technologies proposed by their companies while making it clear that these new properties were
experimental, and without conflicting with official declarations from the W3C that might emerge later?
The solution proved workable, but controversial: CSS vendor prefixes.

CSS Vendor Prefixes

To allow CSS3 innovation by browser developers, the web development community agreed that each browser
would have its own unique prefix for proposed or experimental CSS properties (see Table 1-1).

■ Note The vendor prefixes shown here are not the only ones in existence, just the ones you will need for most

purposes. A complete list of vendor prefixes can be found at http://alrra.github.com/little-helpers/vendor-

prefixes/).

Every browser intended to support an experimental CSS property can do so by placing its own vendor prefix
in front of it. Note that these properties are nonstandard until they achieve final approval by the W3C. Until that
time, they are open to modification and interpretation both by vendors and the W3C itself. Both the property
name and the way its value is specified may change rapidly, even in the same browser, as different approaches
are considered and standards worked out. For example, up until the release of Safari 5.1/iOS 5.0, the Webkit
development team proposed the following as the way to do linear gradients in CSS:

body { background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.11, rgb(167,9,246)),
color-stop(0.56, rgb(194,242,242)) );

Other browsers implemented gradients in different ways. For example, here’s how it was done in Firefox:

body {
background-image: -moz-linear-gradient(bottom, rgb(167,9,246) 11%,
rgb(194,242,242) 56%);
}

These two approaches produced the same result in each browser; under contention was which was the
better way to code. In the case of gradients, the W3C took a third way, more closely related to the Firefox method:

Table 1-1. Unique Browser Prefixes

Prefix Browser

-moz-

-o-

Firefox

Opera

-webkit-

-ms-

Safari/Chrome/Konqueror

Internet Explorer 9+