'display' property with multiple values

Category: CSS
Type: Chromium catches up
Status: Enabled by default (Chrome 115)
Intent stage: Start prototyping

Breaking change: No
Enterprise impact: None
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/css/css-display/parsing/display-valid.html

Summary

CSS 'display' property supports two or three keywords. Web authors can specify - How the box and its neighbor boxes are located; inline or block - How children of the box are laid out; flow, flex, grid, etc. separately. For example, `display: inline flow` instead of `display: inline-block` `display: block flex` instead of `display: flex`

Standards & signals

Specification: https://w3c.github.io/csswg-drafts/css-display/#the-display-properties
Firefox: Shipped/Shipping
Safari: Shipped/Shipping
Web developers: Positive — The bug has 16 stars.
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=995106

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-display%2Fparsing%2Fdisplay-valid
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+'display'%20property%20with%20multiple%20values
MDN Web Docs: https://developer.mozilla.org/en-US/search?q='display'%20property%20with%20multiple%20values
Baseline status: https://webstatus.dev/?q='display'%20property%20with%20multiple%20values

Docs: https://developer.mozilla.org/ja/docs/Web/CSS/display

View on chromestatus.com