#1035: CSS Gap Decorations

Visit on Github

Opened Jan 7, 2025

こんにちは 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:

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.

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!

Discussions

Comment by @LeaVerou Jan 11, 2025 (See Github)

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?

Comment by @kbabbitt Jan 13, 2025 (See Github)

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 https://github.com/w3c/csswg-drafts/issues/11495.

Discussed Feb 10, 2025 (See Github)

we agree to punt to the plenary

Comment by @xiaochengh Feb 13, 2025 (See Github)

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.

Comment by @kbabbitt Feb 24, 2025 (See Github)

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

Comment by @jyasskin Feb 24, 2025 (See Github)

Yes, exactly. It would be nice if CSS explainers lived next to their associated specs so readers had a chance of finding them, instead of being in particular implementers' orgs.

Comment by @kbabbitt Mar 2, 2026 (See Github)

Hello again TAG!

We've published a new Working Draft for Gap Decorations with a few major changes since the version reviewed previously:

  • The former -outset properties are now -inset, with semantics adjusted accordingly.
  • Authors can now specify varying decoration offsets for edges vs. interior intersections, and start vs. end sides.
  • Authors can now control visibility of gap decorations next to empty areas using the *-rule-visibility-items property.

Plus a number of smaller changes based on author feedback and CSSWG discussion.

I've also updated the explainer and moved it into the csswg-drafts repo as requested: https://github.com/w3c/csswg-drafts/blob/main/css-gaps-1/explainer.md

Please let me know if there are any concerns or feedback. Happy to open a new review as well if you would like me to do that.

Comment by @jyasskin Mar 2, 2026 (See Github)

I'll reopen to ensure this gets onto our agenda to double-check.

Discussed Mar 16, 2026 (See Github)

Matthew: APA looked at this separately and didn’t have any concerns. Some suggestions about the actual document, but that’s a separate thing. Mainly looking at this from an a11y perspective. See that Lea Verou raised DX-related things some time ago. Checking if that is still relevant.

… Reason why we didn’t close it was because they didn’t put alternatives into the explainer. They have done that in the meantime. Think we can close this fairly soon with satisfied, but want to double-check with Xiaocheng.

Hadley: This is open for a long time, is our feedback still useful?

Matthew: Yes, I think so. Was in touch with the proponents recently, and they’ve updated the draft. Also, they did was we asked.

Hadley: Which happend a year and a half later. Actually surprised that they came back to it.

Matthew: Think it makes sense to take quick look.

Hadley: You and Xiaocheng?

Matthew: Yes.