Re: Gradient syntax proposal

On Aug 14, 2009, at 10:31 AM, Tab Atkins Jr. wrote:

> 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

If you have named sides (like you do) and named corners (something  
like border-radius has in its 4 names), then you don't need to mention  
the opposite side at all. You also then don't need to use the bg- 
position coordinate system with its possibility of 4 lengths separated  
by another comma.

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