Re: [csswg-drafts] Control Drawing Layer Order of Properties (#11671)

This has also come up in the context of gap decorations. In multicol, column rules are spec'ed to paint just above the border of the multicol container. For Gaps 1 I've followed suit for now, but there's been some conversations about revisiting that, or giving authors control over the position of gap decorations in the painting order. cc @alisonmaher @bfgeek @oSamDavis

Here's a (possibly incomplete) list of what we draw today for a given element, in order from top to bottom, setting aside [table complexity](https://drafts.csswg.org/css2/#elaborate-stacking-contexts):

[Outlines](https://drafts.csswg.org/css-ui/#outline)
Content
[Column rules](https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules) / [Gap decorations](https://drafts.csswg.org/css-gaps-1/#layout-painting)
[Borders](https://drafts.csswg.org/css-backgrounds/#border-style)
[Inner box-shadows](https://drafts.csswg.org/css-backgrounds/#shadow-layers)
Background images
[Background color](https://drafts.csswg.org/css-backgrounds/#background-color)
[Outer box-shadows](https://drafts.csswg.org/css-backgrounds/#shadow-layers)

I would imagine that, in a lot of cases, authors will want to move only one or two of these parts without needing to worry about knowing the whole stack. So maybe a syntax like this?

```css
property-draw-order: background-image over content, border over background-image;
```

Which would reorder the above draw-order to:

Outlines
Borders
Background images
Content
Column rules / Gap decorations
Inner box-shadows
Background color
Outer box-shadows

-- 
GitHub Notification of comment by kbabbitt
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11671#issuecomment-2679217118 using your GitHub account


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

Received on Monday, 24 February 2025 17:47:00 UTC