W3C home > Mailing lists > Public > www-style@w3.org > August 2009

Gradient syntax (was Re: [CSSWG] Minutes and Resolutions 2009-08-12)

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>
Message-ID: <20090813194832.GA30602@pickering.dbaron.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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:20 GMT