Intent to Prototype: CSS Gap Decoration

[Sam Davis Omekara]

Contact emails

samome...@microsoft.com, alm...@microsoft.com

Explainer

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

Specification

https://kbabbitt.github.io/css-gap-decorations

Summary

CSS Gap Decoration 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

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

TAG review will be started once the specification is further along.

TAG review status

Pending

Risks

Interoperability and Compatibility

Gap Decoration 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:

Proposal: CSS Gap Decorations Level 1 · Issue #10393 · w3c/csswg-drafts · GitHub

No other browser vendor has started work to implement CSS Gap Decoration as we know of yet, but as the feature and specification are further along, formal signals will be sent out to such vendors.

Gecko: No signal

WebKit: No signal

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

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?

None

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.

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

No

Web Platform Tests will be added as part of the API feature development.

Flag name on chrome://flags

None

Finch feature name

CSSGapDecoration

Non-finch justification

None

Requires code in //chrome?

False

Tracking bug

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

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

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

This intent message was generated by Chrome Platform Status.