← Back to release summary

CSS overlay property

Category
CSS
Type
New or changed feature
Status
In developer trial (Behind a flag) (Chrome 117)
Intent stage
Evaluate readiness to ship

Summary

Introduce an overlay property to allow authors to keep elements in the top layer for an exit transition. The overlay property is added to indicate if an element is in the top layer or not. It can take two values: 'none', 'auto'. User agent stylesheets add !important rules to control whether elements are rendered in the top layer or not, and not let author styles override. However, authors can add 'overlay' to the list of transition-properties for an element to defer the removal from the top layer for the duration of the transition. That way the author can do exit transitions for elements like dialogs: transition-property: overlay transition-duration: 0.4s

Motivation

It is currently not possible for authors to do exit transitions of things like modal dialogs in the top layer because the elements are immediately removed from the top layer. Adding this property will allow for authors to defer the removal while running a CSS transition.

Standards & signals

Samples: https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md#example-code

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

View on chromestatus.com