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!

[LeaVerou]

This seems like a very straightforward low-hanging-fruit improvement to me.

Nit: Why gap-rule and not just rule which would be consistent with the row-gap/column-gap/gap shorthand?

[kbabbitt]

Thanks @LeaVerou.

Nit: Why gap-rule and not just rule which would be consistent with the row-gap/column-gap/gap shorthand?

I was a little concerned about overloading a general term like "rule" in case we at some point discover some other place we want to paint rules, and to avoid confusion between a CSS rule and the CSS rule property. Happy to workshop this with the working group though - opened w3c/csswg-drafts#11495.

[xiaochengh]

Hi @kbabbitt: We discussed it at a TAG Plenary today and we are satisfied with this. We would also be happy to see more detail on the alternatives, and the explainer being placed next to the spec.

[kbabbitt]

@xiaochengh and TAG, thank you for the review and feedback! I had one question about the following:

the explainer being placed next to the spec

Is the request here simply to move the explainer from the MSEdgeExplainers repo to the csswg-drafts repo, or is there something else you were looking for?