Intent to Prototype: CSS :initial pseudo class

[Rune Lillesveen]

Contact emails

fut...@chromium.org

Explainer

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

Specification

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 with the :initial pseudo class. If there is no pre-existing style for an element, but there are selectors with :initial that matches the element, a before-change style is computed with :initial matching before the actual style is computed without :initial matching. Any differences in computed style for transitioned properties will trigger transitions between the styles with and without :initial 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; } div:initial { background-color: green; }

Blink component

Blink>CSS

Motivation

Authors who want to start transitions on the first style update need to do two passes using javascript, for instance with a forced update or requestAnimationFrame() by change a class name to get such an effect. With the :initial pseudo class they can start such transitions declaratively in CSS as part of the first style update. This is also specifically motivated by the entry/exit animations use case in the explainer.

Initial public proposal

https://github.com/w3c/csswg-drafts/issues/8174

TAG review

TAG review status

Pending

Risks

Interoperability and Compatibility

Gecko: No signal

WebKit: No signal

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

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

No

Flag name

Requires code in //chrome?

False

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/4515377717968896

This intent message was generated by Chrome Platform Status.