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?
*** Bug 241576 has been marked as a duplicate of this bug. ***
<rdar://problem/95551387>
(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.
Pull request: https://github.com/WebKit/WebKit/pull/7376
Committed 257711@main (52052a276f0d): <https://commits.webkit.org/257711@main> Reviewed commits have been landed. Closing PR #7376 and removing active labels.