#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.