Intent to Ship: CSS Gap Decorations

[Sam Davis Omekara]

Contact emails

samome...@microsoft.com, alm...@microsoft.com, kbab...@microsoft.com, javi...@microsoft.com

Explainer

https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md

Specification

https://drafts.csswg.org/css-gaps-1

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

Blink>Layout

Web Feature ID

gap-decorations

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

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

Search tags

grid, flexbox, multicol, column, row, gap, decoration

TAG review

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

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:

        - https://www.linkedin.com/pulse/day-164-new-way-style-gaps-emiliano-pisu-x0h1f 

        - https://mastodon.social/@anatudor/114201225562770826 

        - https://app.daily.dev/posts/a-new-way-to-style-gaps-in-css-9lolqu2yp 

        - https://x.com/Manz/status/1968682837453799570 

        - https://x.com/shadeed9/status/1822025452476592630

         - https://www.linkedin.com/posts/kirangrandhi_goodbye-to-css-hackshello-to-native-gap-activity-7341108234121900034-_ObL 

    Articles and videos:

        - https://www.alwaystwisted.com/articles/styling-the-gap-with-css 

        - https://youtu.be/L1-7dFQFb1c 

        - https://css-tricks.com/the-gap-strikes-back-now-stylable/ 

        - 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?

Yes
https://wpt.fyi/results/css/css-gaps

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

https://issues.chromium.org/issues/357648037

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

https://chromestatus.com/feature/5157805733183488?gate=6254826279927808

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/PH8PR00MB1471DB453B0D0025F83B1F06D8BA2%40PH8PR00MB1471.namprd00.prod.outlook.com
Ready for Trial: https://groups.google.com/a/chromium.org/g/blink-dev/c/vmO3X2aYL2Y/m/f9LLE_W8AAAJ

[Philip Jägenstedt]

Hey all,

It's great to see this highly requested feature completed! The test suite looks quite big in terms of number of tests, and tests across layout models, but there are 9 failing tests. Are the reasons for these failures understood? It it feasible to fix them all?

Best regards,

Philip

--
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 visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CH3PR00MB2681301B231C1C1B50B21206D8372%40CH3PR00MB2681.namprd00.prod.outlook.com.

[Sam Davis Omekara]

Hi Philip,

Thanks for reviewing. All the failing tests are understood. Here’s a breakdown of the issues:

• Insets ink overflow tests (6):
  • grid-gap-decorations-091.html, grid-gap-decorations-092.html, flex-gap-decorations-066.html, flex-gap-decorations-067.html, multicol-gap-decorations-038.html, multicol-gap-decorations-039.html  
  • The change was made last Friday, and the wpt runner is not running the latest Chrome Canary version hence the reason why these are failing
• Minor fragmentation issues (3):
  • flex-gap-decorations-fragmentation-005.html, flex-gap-decorations-fragmentation-006.html, multicol-gap-decorations-007.html
  • These issues are well-understood, and we don't consider them feature blocking, but we have work in progress to address them.

[Chris Harrelson]

LGTM1

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6564d359-d092-4803-905d-4647ea3270f9n%40chromium.org.

[Alex Russell]

LGTM2; thanks for shipping this with high quality!

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

[Dan Clark]

LGTM3

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6564d359-d092-4803-905d-4647ea3270f9n%40chromium.org.