Re: [css3-transitions] Shorthand Property is too long with multiple CSS properties

On 31/12/11 15:56, Jon Ronnenberg wrote:
> Hi group.
>
> Thetransition shorthand property 
> <http://www.w3.org/TR/css3-transitions/#the-transition-shorthand-property-> is 
> neither intuitive or very short when it comes to defining several CSS 
> properties.
> E.G. transition: background-color 1s ease, color 1s ease;
> A far more intuitive approach would be to define several properties in 
> the [<‘|transition-property|’> part.
> I.E. transition: background-color, color 1s ease;
> As the Draft elaborate on transition-property; Value: none | all | [ 
> <IDENT> ] [ ‘,’ <IDENT> ]* it is fair to assume that this is also true 
> when it comes to the shorthand method. It is noted (in the Draft) that 
> the first value that can be parsed as a time is assigned to the 
> transition-duration. Hence allowing multiple properties before 
> transition-duration should not break existing implementations.
> //
>
> DISCLAIMER: I'm not a spec implementer but a front end developer (web 
> author). Any difficulties in parsing the above proposal haven't been 
> considered thoroughly. This discussion is only tested on the FF9 and 
> WebKit 535.7 implementations.
>
> Cheers, Jon.
>
> PS. Sorry if this is a re-post. I didn't subscribe properly the first 
> time I emailed.
You don't have to use the shorthand in the case you describe. Doing so 
is a bad idea as it's quite repetitive (like you pointed out). You can 
keep your code completely DRY by writing something like:
transition: 1s ease;
transition-property: background-color, color;

The syntax you propose *is* currently allowed actually, albeit with 
different semantics. The code:
     transition: 1s ease background-color, color;
is parsed as 2 transitions, with the transition for `color` having a 
duration of 0s and the default easing.  So, by making this change, 
existing implementations would break.
The fact that this is not very clear in the spec could be a spec bug though.

-- 
Lea Verou (http://lea.verou.me | @LeaVerou)