CHAPTER 1 ■ CSS3 FundAmEnTAlSbody {
background-image: linear-gradient(to bottom, rgb(167,9,246) 11%,
rgb(194,242,242) 56%);
}
However, because browsers cannot be forced to upgrade retroactively, it is still necessary to include the
earlier vendor-prefixed methods to enable support in older versions. In the case of gradients, this includes both
methods for Webkit-based browsers, which switched to supporting the now-standard method but kept the
vendor prefix for a time.
Convention dictates that the W3C method (the final, expected standard) goes last in the declaration, and
that vendor-prefixed versions precede it. The entire declaration for all browsers would be as follows:
body {
background-image: -o-linear-gradient(bottom, rgb(167,9,246) 11%,
rgb(194,242,242) 56%);
background-image: -moz-linear-gradient(bottom, rgb(167,9,246) 11%,
rgb(194,242,242) 56%);
background-image: -webkit-linear-gradient(bottom, rgb(167,9,246) 11%,
rgb(194,242,242) 56%);
background-image: -ms-linear-gradient(bottom, rgb(167,9,246) 11%, rgb(194,242,242) 56 %);
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)) );
background-image: linear-gradient(to top, rgb(167,9,246) 11%, rgb(194,242,242)
56%);
}
As browsers only pay attention to the CSS they understand, and ignore any CSS they don’t, Safari and
Chrome will read the -webkit line of the declaration appropriate to that browser version and implement it. Later
browser versions that understand the final version of the spec will read the last line instead.
It is entirely possible for browsers to support both prefixed and unprefixed CSS properties at the same
time. Rules for appearance in a declaration are read from left to right and top to bottom. In the case of a conflict,
rules specified later take precedence over those written earlier. Placing the W3C standard last in the declaration
ensures that it will always take precedence if the browser supports it.
While this code may appear somewhat daunting, it is immediately apparent that there is a great deal of
repetition within it. With the exception of the deprecated Webkit method, most of the CSS declaration could be
easily created by copying and pasting the first line and prepending vendor prefixes to the copies. There are also
tools and techniques for automatic generation of vendor-prefixed code, which I will discuss in Chapter 10.
In order to gain support for experimental CSS properties in a particular browser, you must include the
appropriate vendor prefix and value in your stylesheet. There are just two exceptions:
• The browser allows prefix aliases (discussed in the next section).• The browser follows the final W3C standard and does not require a prefix.Thankfully, properties and values for CSS Transforms, Transitions, and Animations have been broadly
agreed to since the inception of the modules; as of this writing, every current browser, implements the code the
same way, albeit with vendor prefixing.