[csswg-drafts] Proposal: CSS Gap Decorations Level 1 (#10393)

kbabbitt has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: CSS Gap Decorations Level 1 ==
[Explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md)

This is a fresh take on a topic that has been brought up previously in discussions such as #2748 and #6748. Authors have long been asking for ways to paint gap decorations in grids and other containers.

## Why a new proposal?

The core of this proposal is similar to ones we've seen previously: We introduce `row-rule-width`, `row-rule-style`, and `row-rule-color` as complements to `column-rule-width`, `column-rule-style`, and `column-rule-color` and apply both sets of properties to grid, flex, and masonry containers. But one reason for the fresh take is to address use cases such as [this one](https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-595889781) that call for varying gap decorations over a single container, or a subregion of a container. To do that, I've drawn inspiration from grid area syntax and the parallel lists + list cycling behavior in CSS Transitions and Animations to allow things like:

```css
.alternate-heavy-light {
  display: grid;
  grid-template: repeat(auto-fill, 30px) / repeat(3, 100px);
  grid-gap: 10px;
  row-rule: 2px solid black / 1px solid lightgray;
}
```
![Example grid with alternating heavy and light row separator](https://github.com/MicrosoftEdge/MSEdgeExplainers/raw/main/CSSGapDecorations/images/example-heavy-light.png)

```css
.grid-multiple-decoration-areas {
  display: grid;
  grid-template-rows: [top] 30px [main-top] repeat(6, 30px) [bottom];
  grid-template-columns: [left] 100px [main-left] repeat(3, 100px) [right];
  grid-gap: 10px;
  grid-row-rule-area: left / top / main-left / bottom,
                      main-left / main-top / right / bottom;
  row-rule: 1px solid lightblue,
            1px solid black;
  grid-column-rule-area: main-left / top / main-left / bottom;
  column-rule: 1px solid lightblue;
}
```
![Example grid with varying gap decorations](https://github.com/MicrosoftEdge/MSEdgeExplainers/raw/main/CSSGapDecorations/images/example-multiple-areas.png)

Applying to the specific use case I cited above:

```css
.container {
  gap-rule-style: solid:
  gap-rule-color: lightgray;
  column-rule-width: 1px repeat(auto, 2px) 1px;
  row-rule-width: 0px repeat(auto, 2px 1px);
  grid-gap-rule-area: 2 / 2 / -1 / -1;
}
```
![Example grid with varying gap decorations](https://github.com/MicrosoftEdge/MSEdgeExplainers/raw/main/CSSGapDecorations/images/csswg-drafts-issues-2748-issuecomment-595889781.png)

### Responsive layout

Another use case I hadn't seen addressed before is responsive flex layout. This proposal also introduces a set of logical properties to help with these cases: `main-rule-*` and `cross-rule-*` which map to `row-rule-*` or `column-rule-*` depending on flex direction.

```css
.container {
  display: flex;
  cross-rule: 3px solid gray;
}
```

![Example flexbox in row direction with gap decorations](https://github.com/MicrosoftEdge/MSEdgeExplainers/raw/main/CSSGapDecorations/images/csswg-drafts-issues-2748-issuecomment-1765376966-1.png)
![Example flexbox in column direction with gap decorations](https://github.com/MicrosoftEdge/MSEdgeExplainers/raw/main/CSSGapDecorations/images/csswg-drafts-issues-2748-issuecomment-1765376966-2.png)

## What about gap images?

Gap decoration images is definitely something I'd like to explore. However, as pointed out in [this comment](https://github.com/w3c/csswg-drafts/issues/5080#issuecomment-1526585163), gap decoration images have much more complex definition needs than border images, and there are several use cases cited in #2748 that can be addressed without the use of images. So I've left them to a future level for now.

-----

There is also a [skeleton spec](https://kbabbitt.github.io/css-gap-decorations/) as a companion to the explainer. So far it's mostly a place where I've parked notes about grammar details - there are a lot of details still to be fleshed out.

I would welcome any comments/suggestions/additional use cases, either in this thread or as issues in the MSEdgeExplainers repo: [New issue](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?assignees=kbabbitt&labels=CSSGapDecorations&projects=&template=css-gap-decorations.md&title=%5BCSS+Gap+Decorations%5D+%3CTITLE+HERE%3E)

cc @alisonmaher @KurtCattiSchmidt @ethanjv @oSamDavis @bfgeek @tabatkins

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10393 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 5 June 2024 20:03:39 UTC