Re: Gradient syntax proposal

On Fri, Aug 14, 2009 at 12:10 PM, Martin
McNickle<mmcnicklebugs@googlemail.com> wrote:
> On Fri, 2009-08-14 at 09:34 -0500, Tab Atkins Jr. wrote:
>> Am I missing anything?  Am I making anything too complex?  Are there
>> ways to improve this/make it simpler/make it prettier?
>
> Given that a large number of these gradients will be simple
> vertical/horizontal ones, you could make the following simplification:
>
> <gradient-line>:
> [
>  <angle> [inner | outer]?
> |
>  [ left | right | top | bottom ] [ left | right | top | bottom ]?
> |
>  <bg-position>, <bg-position>
> ]
>
> where the second keyword is now optional.
>
> When the second keyword is omitted, you assume the opposite side.
>
> So:
>
> background: linear-gradient(top, yellow, blue);
> background: linear-gradient(top bottom, yellow, blue);
>
> are equivalent as are:
>
> background: linear-gradient(right, yellow, blue);
> background: linear-gradient(right left, yellow, blue);
>
> The syntax for producing a simple vertical/horizontal gradient is now very succinct.

Ooh, good idea.  That also makes it congruent with the corner syntax,
where you just specify one corner and the opposite is assumed.  I've
changed the proposal to reflect that.

~TJ

Received on Friday, 14 August 2009 17:31:56 UTC