CSS Gap Decorations

[kbabbitt]

こんにちは TAG-さん!

I'm requesting a TAG review of CSS Gap Decorations.

CSS multi-column containers allow for rules to be drawn between columns. Applying similar styling to other container layouts such as grid and flex has been widely sought after, as seen in the discussion for CSS Working Group issue #2748 and in several StackOverflow questions ( [1] [2] [3] [4] ). Currently, developers seeking to draw such decorations must resort to non-ergonomic workarounds such as these examples:

• 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

This proposal seeks to:

• Extend CSS column rule properties to apply to container layout types beyond multi-column.
• Introduce row-direction gap decorations on CSS container layouts.
• Allow gap decorations to vary over a given container to handle cases such as alternating row separators.

---

• Explainer¹: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md
• Specification: https://drafts.csswg.org/css-gaps-1/
• WPT Tests: In development; early examples in https://github.com/web-platform-tests/wpt/tree/master/css/css-gaps
• User research: Use cases in the explainer were collected from the discussion in CSSWG issue #2748. Additional use cases are touched on in the discussion in #10393.
• Security and Privacy self-review²: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/security-privacy-questionnaire.md
• GitHub repo: N/A
• Primary contacts:
  • Kevin Babbitt (@kbabbitt), Microsoft, spec editor
  • Sam Davis Omekara (@oSamDavis), Microsoft, implementer in Chromium
• Organization/project driving the specification: Microsoft
• Multi-stakeholder support³:
  • Chromium comments: Positive
  • Mozilla comments: CSS Gap Decorations mozilla/standards-positions#1158
  • WebKit comments: CSS Gap Decorations WebKit/standards-positions#444
  • Positive feedback from web developers as seen in comments on #10393
• Status/issue trackers for implementations⁴:
  • https://chromestatus.com/feature/5157805733183488

Further details:

• I have reviewed the TAG's Web Platform Design Principles
• Relevant time constraints or deadlines: Prototyping is in progress in Chromium, and we're hoping to start origin trials around June of this year.
• The group where the work on this specification is currently being done: CSSWG
• The group where standardization of this work is intended to be done (if different from the current group): CSSWG
• Major unresolved issues with or opposition to this specification: There are a few design issues left to tackle in the spec but nothing I would consider major.
• This work is being funded by: Microsoft

You should also know that... your input is greatly appreciated, thank you in advance!