Intent to Ship: CSS @starting-style Rule

[Rune Lillesveen]

Contact emails

fut...@chromium.org

Explainer

https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md

Specification

https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule

Summary

Allow authors to start CSS transitions on first style update CSS transitions do not trigger transitions from initial styles on the first style update for an element, or when the display type changes from 'none' to some other type. That is done to avoid unexpected transitions from initial styles. If the author wants to start a transition from the first style update, that can now be done by applying styles from within a @starting-style rule. If there is no pre-existing style for an element, but there are selectors inside @starting-style rules that match the element, a style is computed with rules inside @starting-style matching, before the actual style is computed without @starting-style rules matching. Any differences in computed style for transitioned properties will trigger transitions between the styles with and without @starting-style rules applied. Example which starts a background-color transition from green to lime on the first style update for a div: div { transition: background-color 0.5s; background-color: lime; } @starting-style div { background-color: green; } }

Blink component

Blink>CSS

TAG review

https://github.com/w3ctag/design-reviews/issues/829

TAG review status

Pending

Risks

Interoperability and Compatibility

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/833)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/210)

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

Debuggability

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.live/css/css-transitions/starting-style-cascade.html
https://wpt.live/css/css-transitions/starting-style-name-defining-rules.html
https://wpt.live/css/css-transitions/starting-style-rule-basic.html
https://wpt.live/css/css-transitions/starting-style-rule-none.html
https://wpt.live/css/css-transitions/starting-style-rule-pseudo-elements.html
https://wpt.live/css/css-transitions/starting-style-size-container.html

Flag name

#enable-experimental-web-platform-features

Requires code in //chrome?

False

Tracking bug

https://crbug.com/1412851

Measurement

https://chromestatus.com/metrics/feature/popularity#CSSAtRuleStartingStyle

Estimated milestones

Shipping on desktop	117
DevTrial on desktop	115

Shipping on Android	117
DevTrial on Android	115

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/4515377717968896

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeS2468yfK2EzrnmiKrnyScCYfbiSF7C6aC3pix7G_XOkQ%40mail.gmail.com

This intent message was generated by Chrome Platform Status.

--

Rune Lillesveen

[Daniel Bratell]

LGTM1

(Other vendors have not yet had much time to weigh in beyond the CSS WG but I don't suspect this of being controversial in any way, and it seems rather limited and useful)

/Daniel

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeRwqi%2BMg3_pCTR48N8UCnuNhQh_r7gFFmsCszp-ArAGcQ%40mail.gmail.com.

[Alex Russell]

LGTM2

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Rick Byers]

LGTM3

LGTM2

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeRwqi%2BMg3_pCTR48N8UCnuNhQh_r7gFFmsCszp-ArAGcQ%40mail.gmail.com.

--

You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/3b2b8367-adeb-444f-a28d-941819ca3611n%40chromium.org.