Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-transitions-1] Clarify priority transition-property over transition-timing-function and transition-behavior-value in transition #7897

Open
cdoublev opened this issue Oct 18, 2022 · 3 comments

Comments

@cdoublev
Copy link
Collaborator

cdoublev commented Oct 18, 2022

I'm surprised I cannot find a related issue or thread in the archive because transition exists since quite a long time, so I hope I have not missed any, or something in the spec.

In transition: ease, what should match ease? Obviously, everyone assumes it should match transition-timing-function and it does in all browsers (I think), but this match priority over transition-property does not seem defined, neither by the syntax or in prose.

Below transition definition table, the priority of transition-duration over transition-delay is defined. Below transition-property definition table, it is defined that an unrecognized property name as <single-transition-property> is valid, and that none and CSS-wide keyword are invalid.

Solution I am thinking to: move [ none | <single-transition-property> ] to the end of transition syntax and add in prose below transition definition table, that transition-timing-function has priority over transition-property.

Somewhat related: #6946

Aside: imho, something like <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> || <'transition-property'> for transition, and none | [all | <custom-ident>]# for transition-property (keeping in mind that # is ignored when parsing transition), would be much clearer and would illustrate what is defined in prose.

@Loirooriol
Copy link
Contributor

Seems there is interoperability that transition-timing-function has more priority:

var s = document.body.style;
s.transition = "ease linear";
[s.transitionTimingFunction, s.transitionProperty]; // [ "ease", "linear" ]

@tabatkins
Copy link
Member

Hm, this is well specified for 'animation' (https://drafts.csswg.org/css-animations/#animation), but it seems the same text doesn't exist in Transitions.

@cdoublev cdoublev changed the title [css-transitions-1] Clarify priority transition-property over transition-timing-function in transition [css-transitions-1] Clarify priority transition-property over transition-timing-function and transition-behavior-value in transition Aug 3, 2023
@cdoublev
Copy link
Collaborator Author

cdoublev commented Aug 3, 2023

Changed the title to include the new longhand transition-behavior. The issue has been discussed in the related PR.

I think dbaron is right that the order does not matter in | and || for parsing purpose. But you can either:

  1. allow transition-property to match ease and define that transition-timing-function has priority
  2. disallow transition-property to match ease

In case 1, ordering accordingly helps translating the priority rules defined in the prose.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants