CSS `::marker` does not support defining CSS variables

• Component: CSS
• Status: RESOLVED FIXED

[Jordan Pittman]

Created attachment 460211 [details]
A file showcasing the issue

In Gecko- and Blink-based browsers you can define CSS variables on the `::marker` pseudo-element. However, in Safari, these property declarations are thrown out. This is a problem even in the latest Safari Tech Preview.

For instance, the following works:

```
.works {
  --alpha: 0.75;
}

.works ::marker {
  color: rgb(255 119 0 / var(--alpha));
}
```

However, if you define `--alpha` on the ::marker itself any values using it act as if it was not defined at all even though none of them show as invalid in dev tools:
```
.does-not-work ::marker {
  --alpha: 0.75;
  color: rgb(255 119 0 / var(--alpha));
}
```

In this situation, if a parent element defined `--alpha` then the marker would suddenly get a color again but it would have the wrong alpha channel value (the one defined in the parent and not in `::marker`)

I think the CSS spec is possibly underspecified here as it does limit what properties apply to `::marker` pseudo elements but I believe the omission of CSS variables is likely a mistake as variables work in values as long as they're defined in the cascade.

Working Draft: https://www.w3.org/TR/css-lists-3/#marker-properties
Editors Draft: https://drafts.csswg.org/css-lists-3/#marker-properties (this appears to be having issues today — 2022-06-13)

I'd love to send in a patch but I'm a bit too unfamiliar with the WebKit codebase and development process. From a first glance I'd say that https://github.com/WebKit/WebKit/blob/c62798d34562dcd0b8fdc676808ef73b74b5e262/Source/WebCore/style/PropertyCascade.cpp#L212 is probably the appropriate place to start looking?

[Alexey Proskuryakov]

*** Bug 241576 has been marked as a duplicate of this bug. ***

[Radar WebKit Bug Importer]

<rdar://problem/95551387>

[Oriol Brufau]

(In reply to Jordan Pittman from comment #0)
> I think the CSS spec is possibly underspecified here as it does limit what
> properties apply to `::marker` pseudo elements

It's specified in https://drafts.csswg.org/css-variables/#defining-variables
> Applies to: all elements and all pseudo-elements (including those with restricted property lists)

> I'd love to send in a patch

Probably it's just a matter of adding CSSPropertyCustom into isValidMarkerStyleProperty.
https://searchfox.org/wubkat/rev/fd9594cdf418745718908fd1869a116307a46e7a/Source/WebCore/style/PropertyAllowlist.cpp#41

::cue may have the same problem.

[Karl Dubost]

Pull request: https://github.com/WebKit/WebKit/pull/7376

[EWS]

Committed 257711@main (52052a276f0d): <https://commits.webkit.org/257711@main>

Reviewed commits have been landed. Closing PR #7376 and removing active labels.