The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Gradients 131

The example at  radiates from the top-right corner and passes through
three color-stops over 15 percent of the box width, with the limit set by the
farthest-corner keyword. In example , I set the center of the gradient to the
left side of the box and the limit to the farthest corner, using a white-white
(solid) gradient for 10px and then a white-black gradient for 5px. Finally,
with example , I seem to have created a work of art! A white-black-white
gradient repeats over a very low radius of 2px, creating the interference
pattern you see here.

BroWSer SuPPorT And leGACy SynTAxeS

Although gradients have a checkered history, the good news is that the final

syntax is well implemented by web browsers. Chrome, Firefox, IE10+, Safari 7+

(including Mobile), and Android 4 .4+ support all of the properties without a

vendor prefix.

Older versions of WebKit (included in Safari 5 to 6 .1 and Android 4 .0

to 4 .3) support a transitional syntax for linear gradients, in which the gradient

direction is defined by where it comes from instead of where it goes to. This

rule uses the -webkit- prefix. The following listing compares the old, transi-

tional rule with the final one; the output from both is the same.

.old { background-image: -webkit-linear-gradient(left center, black,

white); }

.new { background-image: linear-gradient(to right center, black, white); }

If you need to support still older versions of WebKit (Android 3 .0 and

iOS 4 .3 and earlier), you’ll meet the original syntax, which was rejected by

other browser vendors for being too complex. In this original syntax, both

linear and radial gradients are defined with the gradient() value function, with

differing arguments. This listing shows the simplest linear and radial gradient

possible with this old syntax:

E { background-image: -webkit-gradient(linear, 50% 0, 50% 100%,

from(black), to(white)); }

E { background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100,

from(black), to(white)); }

Honestly, it would take too long to explain what’s going on here, espe-

cially for the radial syntax. My best advice is to not even consider using this

original syntax and instead to provide a graceful fallback to a solid background

color or an image instead. You’ll save yourself a lot of heartache that way.