Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there an “official”/standard CSS3 gradient syntax?

I know there is -webkit-gradient and -moz-linear-gradient. But what is the standard way of defining a gradient?

Like there is: -webkit-border-radius and -moz-border-radius and the standard is meant to be border-radius.

like image 351
Jonathan. Avatar asked Apr 12 '10 11:04

Jonathan.


3 Answers

An update for 2011, the Mozilla syntax is now the 'official' one, adopted by the CSS3 Image Values and Replaced Content Working Draft. Webkit has been updated to use this syntax too, and this has now been incorporated into the latest versions of Chrome and Safari.

like image 167
Yi Jiang Avatar answered Sep 20 '22 13:09

Yi Jiang


Not yet, the two examples you provided are the only coded gradients available as yet, as far as I know. Most CSS3 improvement is documented on CSS3.info

like image 37
Kyle Avatar answered Sep 18 '22 13:09

Kyle


It's good thing no browser has yet "standardized" on a linear-gradient syntax yet, since it changed between February 2011 and January 2012:

From CSS Image Values and Replaced Content Module Level 3

W3C Working Draft 17 February 2011

5.1.1. ‘linear-gradient()’ syntax

<linear-gradient> = linear-gradient(
[ 
  [ [top | bottom] || [left | right] ] 
  | 
  <angle>
,]? 
<color-stop>[, <color-stop>]+
);

W3C Working Draft 12 January 2012:

4.1.1. linear-gradient() syntax

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

To answer your question:

No, there is no standard way to specifying gradients.

This is because there is no standard

And even if you assume the "standard" is the "standard" that was in effect when you asked the question, then no browser supports the "standard" because the "standard" changed and no browser supports the new standard.

like image 38
Ian Boyd Avatar answered Sep 22 '22 13:09

Ian Boyd