Intent to Ship: CSS Gap Decorations

39 views
Skip to first unread message

Sam Davis Omekara

unread,
3:25 PM (3 hours ago) 3:25 PM
to blin...@chromium.org
Contact emails
Explainer
Specification
Summary
CSS Gap Decorations enables styling of gaps in container layouts like Grid and Flexbox, similar to ‘column-rule’ in multicol layout. This feature is highly requested by web authors who must use hacks to style the gaps in Grid and Flexbox layouts today.

Blink component
Web Feature ID
Motivation
Today, web authors rely on non-ergonomic workarounds such as the following examples to apply styles to the gaps in Grid and Flexbox layouts: https://www.smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks/#how-do-i-add-backgrounds-and-borders-to-grid-areas https://x.com/geddski/status/1004731709764534274 CSS Gap Decorations will allow authors to avoid such workarounds and apply styles in a seamless manner provided by the platform.

Initial public proposal
Search tags
TAG review
TAG review status
Issues addressed


Risks


Interoperability and Compatibility
Gap Decorations is a highly requested feature among web developers. Early discussions within the CSSWG meeting did not highlight any major concerns from other browser vendors so far. See discussions on: https://github.com/w3c/csswg-drafts/issues/10393

Gecko: Positive (https://github.com/mozilla/standards-positions/issues/1158)

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

Web developers: Positive Developers are excited about the CSS Gap Decoration feature. See discussions around this here: https://github.com/w3c/csswg-drafts/issues/10393 

This also surfaced as a most requested missing feature in State of CSS 2023. https://2023.stateofcss.com/en-US/usage/#css_missing_features 

The chromium tracking issue (https://issues.chromium.org/issues/357648037) has 18 upvotes from developers.

Following dev trials, the feature drew substantial enthusiasm across web developer channels:

    Social media:

    Articles and videos:
        - https://youtu.be/L1-7dFQFb1c 
        - https://heydesigner.com/newsletter/product-design-2025/

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?
There are no WebView application risks.


Debuggability
DevTools already provides a layout overlay for gaps in Grid and Flexboxes. Computed values for new properties introduced for gap decoration will be exposed.

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

Is this feature fully tested by web-platform-tests?
Flag name on about://flags
enable-experimental-web-platform-features

Finch feature name
CSSGapDecoration

Rollout plan
Will ship enabled for all users

Requires code in //chrome?
False

Tracking bug
Estimated milestones
Shipping on desktop
149
DevTrial on desktop
139
Shipping on Android
149
Shipping on WebView
149


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).
There are no open issues affecting the current level of the spec. All open issues are scoped to a future level of the spec and do not introduce web compat or interop risk for what is shipping now.

Link to entry on the Chrome Platform Status
Links to previous Intent discussions

Reply all
Reply to author
Forward
0 new messages