- From: L. David Baron <dbaron@dbaron.org>
- Date: Thu, 13 Aug 2009 12:48:32 -0700
- To: "www-style@w3.org" <www-style@w3.org>
On Thursday 2009-08-13 20:08 +1200, Robert O'Callahan wrote:
> background: linear-gradient(top, white, bottom, #666);
> or even
> background: linear-gradient(top, bottom, from(white), to(#666);
Another possibility here is to place the commas a little
differently:
background: linear-gradient(top white, bottom #666);
which would allow reintroducing multiple stops relatively simply:
background: linear-gradient(left red, 16% orange, 32% yellow,
48% green, 60% blue, 76% indigo,
right violet);
under rules where the first and last stops would be specified
differently from the ones in the middle. I'm not sure if that
asymmetry makes things more or less confusing, though.
In other words, the syntax could be something like this grammar
(ignoring whitespace):
gradient : <linear-gradient> | <radial-gradient>
linear-gradient: 'linear-gradient(' <linear-stop> ',' [ <mid-stop> ',']*
<linear-stop> ')'
radial-gradient: 'radial-gradient(' <radial-stop> ',' [ <mid-stop> ',']*
<radial-stop> ')'
linear-stop: <color> && <point>
radial-stop: <color> && <radius> <point>
mid-stop: <color> && <percent>
(In this, && is our new shorthand for both-values-required, but in
either order.)
(I put the <radius> before the <point> for ease of parsing.)
<mid-stop> could also optionally omit the percentage to imply that
it's halfway between the (syntactically) adjacent stops.
-David
--
L. David Baron http://dbaron.org/
Mozilla Corporation http://www.mozilla.com/
Received on Thursday, 13 August 2009 19:49:08 UTC