CSS Gap Decorations

[kbabbitt]

Request for Mozilla Position on an Emerging Web Specification

• Specification title: CSS Gap Decorations
• Specification or proposal URL (if available): https://drafts.csswg.org/css-gaps-1/
• Explainer URL (if available): https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md
• Proposal author(s) (@-mention GitHub accounts): @kbabbitt
• Caniuse.com URL (optional):
• Bugzilla URL (optional):
• Mozillians who can provide input (optional):
• WebKit standards-position: CSS Gap Decorations WebKit/standards-positions#444

Other information

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.