[w3ctag/design-reviews] CSS Gap Decorations (Issue #1035)

こんにちは TAG-さん!

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

CSS multi-column containers allow for [rules](https://drafts.csswg.org/css-multicol-1/#cr) 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](https://github.com/w3c/csswg-drafts/issues/2748) and in several StackOverflow questions ( [[1]](https://stackoverflow.com/questions/45884630/css-grid-is-it-possible-to-apply-color-to-grid-gaps) [[2]](https://stackoverflow.com/questions/59899641/is-it-possible-to-draw-all-css-grid-lines-as-dotted-borders-or-outlines-if-js-i) [[3]](https://stackoverflow.com/questions/47882924/preventing-double-borders-in-css-grid) [[4]](https://stackoverflow.com/questions/67479163/css-border-doubling-with-flex) ). 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](https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules) 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](https://github.com/w3c/csswg-drafts/issues/2748). Additional use cases are touched on in the discussion in [#10393](https://github.com/w3c/csswg-drafts/issues/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: https://github.com/mozilla/standards-positions/issues/1158
    - WebKit comments: https://github.com/WebKit/standards-positions/issues/444
    - Positive feedback from web developers as seen in comments on [#10393](https://github.com/w3c/csswg-drafts/issues/10393)
  - Status/issue trackers for implementations⁴:
    - https://chromestatus.com/feature/5157805733183488

Further details:

  - [X] I have reviewed the TAG's [Web Platform Design Principles](https://www.w3.org/TR/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](https://drafts.csswg.org/css-gaps-1/#issues-index) 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!

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/1035
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/1035@github.com>