Re: [css4-images] Color stop syntax

Btw my suggested syntax wasn't exactly correct. It should use the && operator, not the || one, since both parts are required, i.e.:

<color-stop> = <color> && [ <percentage> | <length> ]{0,2}
<angular-color-stop> = <color> && [ <percentage> | <angle> ]{0,2}

About the midpoint, I really like fantasai’s suggestion. It’s much clearer, and it’s very easy to discover, even accidentally. In fact, I was wondering how such syntax should be handled, and this looks like a great way to handle it.

I was also thinking that although the current syntax for two color stop positions is easy to define, it might not be very easy to understand. Perhaps it could be made more readable by introducing a hyphen between the two positions, since they do denote a range. Example:
background: linear-gradient( white 33%, gray 33% 66%, black 66% );
 — vs —
background: linear-gradient( white 33%, gray 33% - 66%, black 66% );

Of course it would need to have mandatory whitespace on either side, to avoid ambiguity with negative numbers. Something like this:
<color-stop> = <color> && [ <percentage> | <length>  [ S+ "-" S+ <percentage> | <length> ]? ]?
<angular-color-stop> = <color> && [ <percentage> | <angle> [ S+ "-" S+ [ <percentage> | <angle>]  ]? ]?

Just a thought, I’m not even sure about it myself.

Lea Verou
W3C developer relations
http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou






On Oct 16, 2012, at 06:47, Dirk Schulze wrote:

> 
> On Oct 15, 2012, at 8:27 PM, Rik Cabanier <cabanier@gmail.com> wrote:
> 
>> On Mon, Oct 15, 2012 at 7:20 PM, Dirk Schulze <dschulze@adobe.com> wrote:
>>> To the order of stop color and stop offset. If Lea run into this problem on a live demo, it also means that browsers don't allow switching the order. If we change the spec here, it will most likely incompatible with current browsers (as long as they don't implement it). I wonder if we may not have enough tests for CSS3 Images. And if it changes, it may should go into CSS3 Images before it gets recommendation and not in CSS4 Images.
>>> 
>> 
>> I'm unsure what you mean. The order of the color stops has to be
>> lowest to highest. Fantasai is proposing to add extra colorstops that
>> signal the midpoint, not to switch the order.
> I am answering to the following suggestion:
> 
> To be specific, I don’t understand why these:
> <color-stop> = <color> [ <percentage> | <length> ]{0,2}
> <angular-color-stop> = <color> [ <percentage> | <angle> ]{0,2}
> 
> are not instead:
> <color-stop> = <color> || [ <percentage> | <length> ]{0,2}
> <angular-color-stop> = <color> || [ <percentage> | <angle> ]{0,2}
> 
> which does not change the order of the stops, but the syntax of the stops. Sorry if I was not clear enough.
> 
> Dirk
> 
> 
>> 
>> What happens if a stop doesn't specify a color, is it supposed to
>> ignore it or does the gradient become invalid?
>> I tried WebKit and Mozilla and they no longer rendered the gradient at all.
>> 
>> Rik
>> 
>>> On Oct 15, 2012, at 6:14 PM, Rik Cabanier <cabanier@gmail.com> wrote:
>>> 
>>>> On Mon, Oct 15, 2012 at 6:06 PM, fantasai <fantasai.lists@inkedblade.net> wrote:
>>>>> On 09/23/2012 07:20 AM, Lea Verou wrote:
>>>>>> 
>>>>>> It’s only a pair now, in the future it might be extended to allow for more
>>>>>> things.
>>>>>> For example, Rik Cabanier recently suggested in a discussion we had that
>>>>>> it might
>>>>>> be useful to allow an optional midpoint, like Adobe products traditionally
>>>>>> supported.
>>>>>> Of course, in that case, a specific relative order would be necessary,
>>>>>> since they
>>>>>> would both be of the same type.
>>>>> 
>>>>> 
>>>>> I want to suggest handling that as a color stop without a specified color,
>>>>> and having that mean 'average the two colors before/after me'. That *is*
>>>>> equivalent to having a "midpoint", isn't it?
>>>>> 
>>>> 
>>>> That is correct. Woud that syntax be backward compatible?
>>>> What happens today if you don't specify a color?
>>>> 
>>> 
> 
>

Received on Tuesday, 23 October 2012 16:07:41 UTC