Skip to content

[CSSGapDecorations] Add pseudo-element alternative #995

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 1, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions CSSGapDecorations/explainer.md
Original file line number Diff line number Diff line change
@@ -56,6 +56,7 @@ content location of future work and discussions.
- [Logical properties for flex and masonry containers](#logical-properties-for-flex-and-masonry-containers)
- [Considered alternatives](#considered-alternatives)
- [Alternative 1: 2021 draft specification](#alternative-1-2021-draft-specification)
- [Alternative 2: Using pseudo-elements](#alternative-2-using-pseudo-elements)
- [References \& acknowledgements](#references--acknowledgements)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -456,6 +457,41 @@ grid lines, and (b) simplifying the model for fine-tuning segment placement. We
also believe the proposal in this explainer offers developers more flexibility
even absent support for gap decoration images; see Scenario 3 for one example.

### Alternative 2: Using pseudo-elements

An alternative approach to `column-rule-*` and `row-rule-*` properties would be
to introduce pseudo-elements representing gaps, for example:

```css
.container {
display: grid;
grid-template: auto / auto;
gap: 5px;
}
.container::column-gaps {
background: red;
width: 1px;
}
.container::row-gaps {
background: blue;
width: 1px;
}
```

In some ways, this would be more powerful, as it would allow for more
flexibility for what can be placed in the gaps.

However, this approach also comes with drawbacks. Varying gap decorations over a
container becomes much harder. One might imagine a `::row-gaps::nth(even)`
pseudo selector to style every other row gap. However, certain container types
such as grid can automatically generate rows and columns depending on their
contents. That means we don't know until layout time how many such pseudo styles
we need to produce, which creates a wrong-way dependency between layout and
style. It would also mean that, for large containers, we would incur the costs
of calculating and storing styles for every single gap. That would be a large
overhead to absorb, especially considering that the more common case is to have
at most a single decoration style for a given container.

## References & acknowledgements

Many thanks for valuable feedback and advice from: