Gradient syntax, old and new; cross-browser prefix differences


Webkit (used by Safari and Chrome) implemented gradients first and used a certain syntax. Mozilla implemented them next and used a different syntax the W3C had just codified. During this time experimental browser prefixes were used on these commands...

...there's a lot of code out there that was written for webkit when it first came out and if the browser writers code to the W3C spec then all that code out there in the wild breaks and no browser writer wants to hear "it doesn't work in your browser and works in other ones" so in many browsers the WebKit prefix is also supported. This gets wacky, fast, and in over 40 years of dealing with computer specification I have to say this is the most fucked up example I know of. But, take heart, it's merely exceedingly annoying, and not fatally flawed: you can make stuff that works. But whether it works in other browsers depends on what you do.

All modern browsers (as of this writing: Fall 2013 - Opera 18, Mozilla 20, Chromium 30) all support unprefixed gradient commands and adhere to the W3C spec for gradients. But, they also support other forms of the commands with browser specific prefixes to the commands. Some browsers support up to 3 different prefixes of some commands and only one for others. It's a bit confusing

But if you need code to run on an older platform, or are trying to port old code an it's not working and seems confusing, you've run into browser prefix hell and need to understand the differences in syntax and semantics of the various flavors of gradient implementations. Relax, I've done that hard work, all you have to do is read it an it turns out a) it's not that bad, it's only a few places and b) all documentation by all browser manufacturers is flat out wrong. A lot of it is right but there are critical errors: no, your browser doesn't do what you said it just did. This is understandable, the gradient stuff is one of the most complex bits of CSS nastiness there is. It is frankly, bizarre. 

<gradient> = [ 
	<linear-gradient> | <radial-gradient> | 
	<repeating-linear-gradient> | <repeating-radial-gradient> ]

<linear-gradient> = linear-gradient(
	[ [ <angle> | to <side-or-corner> ] ,]? 
	<color-stop>[, <color-stop>]+
)

<side-or-corner> = [left | right] || [top | bottom]
 
<radial-gradient> = radial-gradient(
  [ [ <ending-shape> || <size> ] [ at <position> ]? , |
    at <position>, 
  ]?
  <color-stop> [ , <color-stop> ]+
)
OPERA

The same as the spec.

the -o- prefix used by opera uses exactly the same syntax as the unprefixed commands and it's not clear when you would ever actually need to use the Opera specific prefix.

The Opera prefixed versions of the gradient commands are exactly identical to the unprefixed ones, and it's the only browser prefix where this is true.


MOZILLA

Different from the current spec

The Mozilla prefix -moz- identifies the gradient commands as implemented by Mozilla. These are different than the current spec. Direction and angles are different and the syntax is different.


WEBKIT

Radically different from the current spec

There are two forms of WebKit gradient commands, old and new. Both are very different from the current standard in several ways in both syntax and semantics. It it vastly different from the current spec in the old form and only mildly different in the newer form, about the same as Mozilla.


MS

Microsoft Internet Explorer

And then there's Microsoft's IE: I have no idea, I won't use IE.

If somebody sends me data I'll post it here. Old versions of IE had gradients but not with gradient syntax, they used some filter nonsense and is a real pain, but it's covered in David Walsh's article about it, and good luck all who sail in her and may God have mercy on your souls.

Modern versions of IE are more sane.