Re: [csswg-drafts] [css-animations-2] Make animation shorthand syntax future-proof (#6946)

Given our existing disambiguation rules favoring an animation-name coming *last* (and the canonical order being written to support that), I don't think an option having animation-name coming *first* is possible actually.

We could still adopt @flackr's suggestion of the new longhands only being allowed *after* an unambiguous animation-name (that is, a keyword that's either not valid for any Animations 1 longhand, or one that is valid for a property but which has already had that property claim an earlier keyword, like in `ease-in ease-out`), but I feel like that's getting deep into the weeds of forcing authors to understand CSS parsing at a deep level. When possible we should make the parsing rules as natural and easy to understand as we can. (We're definitely stuck with a bad situation here regardless, but we should make it as painless as we can.)

This is why I favor some variety of optional prefix for the animation-name, and only allowing the Animations 2+ longhands *if* animation-name is written with this prefix.

We have a precedent for using the `/` for this kind of thing - a recent example being the color function syntax, but an older and probably more relevant example being the `font` shorthand, which uses a slash before the line-height component to distinguish it from the font-size component. There, the `/ <length>` can be arbitrarily reordered in the property, with the only constraint being that it needs to be paired with a preceding font-size.

The other possibility is using a keyword prefix. This has the advantage of probably being what we'll need to accommodate *more* custom-idents, like the timeline phase name - it might get added to the shorthand as `phase <custom-ident>`. However, by definition it'll be longer than the slash, which is less ideal for a required component.

@fantasai pointed out in the call that this "prefix an ambiguous value with a disambiguating keyword" currently has only been used in functions; it hasn't shown up in a property value yet, so we should make sure it's what we want before we establish the precedent.

So, my suggestion is that we allow the animation-name component to be prefixed with a `/`, make future custom-idents (like timeline phase) prefixed with a keyword, and fork the syntax accordingly: if animation-name is written without the `/` we only allow the Animations 1 properties (treating newer properties as reset-only), but if it is written with a slash we allow the whole set. This will encourage authors to migrate to the slashed syntax. We should also define that the slash is emitted by the default serialization in all cases.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6946#issuecomment-1233213342 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 31 August 2022 17:21:20 UTC