Skip to content

[css-transitions] Serialization of transition with ambiguous longhand values #12467

@cdoublev

Description

@cdoublev

I closed #7897 because the definition of <custom-ident> in the spec actually ensures that transition: ease-in ease-out expands with transition-timing-function: ease-in and transition-property: ease-out.

However, serializing a shorthand value requires ordering its longhand values in canonical order. And the canonical order of transition longhands puts transition-property before transition-timing-function.

So I think warning about placing transition-property after any other longhand when appropriate, would be helpful.

But how should transition serialize when, for example, all its longhands are declared with their initial value, but transition-property is declared with ease?

(1) with transition: ease ease?

(2) Always serializing all longhand values, as with many shorthands in mainstream browsers, is simple but goes against the shortest serialization principle.

(3) I do not known if replacing an unknown transition-property with unknown or not all (like for invalid <media-query>) or none (which requires accepting in <single-transition-property>), would break back-compat.

Note: both Chrome and FF serialize transition: ease for the above case, which does not round-trip, noting that Chrome puts the value of transition-property last, like animation-name in animation, which is convenient to disambiguate <custom-ident> when reading grammars from left to right.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions