Proposal: CSS Gap Decorations Level 1 #10393
Description
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 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:
.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;
}
.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;
}
Applying to the specific use case I cited above:
.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;
}
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.
.container {
display: flex;
cross-rule: 3px solid gray;
}
What about gap images?
Gap decoration images is definitely something I'd like to explore. However, as pointed out in this comment, 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 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
cc @alisonmaher @KurtCattiSchmidt @ethanjv @oSamDavis @bfgeek @tabatkins
Metadata
Metadata
Assignees
Type
Projects
Status