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

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

== Control Drawing Layer Order of Properties ==
**Problem:**
• Some properties, like border/background/box-shadow, are always 'behind' any children.
• Consider an overflow container, you may want a gradient at the top/bottom to create a faded edge effect. Although a mask can be used, sometimes a subtractive effect is undesired, an additive effect is wanted.

**Proposal:**
• A new property `property-draw-order`, with syntax similar to transition/animation. See example below.

**Example:**
```
box {
 overflow: scroll;
 background-image: linear-gradient(black,white);
 border: 2px solid gray;
 box-shadow: 0px 0px 10px 0px white;
 outline: 2px solid green;
 property-draw-order: outline 1, border background-image 2;
}

Before:
- border/background are drawn over by children.

After:
- border/background is drawn in front of children.
```

**Implementation Notes:**
• The number after the property is the layer stack order number, where the largest number represents the last/top-most layer.
• Multiple properties can be specified at once for a given number, as a way of sub-ordering ties. Otherwise, while reading left-to-right, add an imaginary increasing decimal to the order number when encountering the same order number.
• It may be extreme to describe this as paint-level z-indexing, but that is the spirit.

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


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

Received on Friday, 7 February 2025 14:16:47 UTC