RESOLVED FIXED 241566
CSS `::marker` does not support defining CSS variables
https://bugs.webkit.org/show_bug.cgi?id=241566
Summary CSS `::marker` does not support defining CSS variables
Jordan Pittman
Reported 2022-06-13 13:36:22 PDT
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?
Attachments
A file showcasing the issue (803 bytes, text/html)
2022-06-13 13:36 PDT, Jordan Pittman
no flags
Alexey Proskuryakov
Comment 1 2022-06-13 22:14:55 PDT
*** Bug 241576 has been marked as a duplicate of this bug. ***
Radar WebKit Bug Importer
Comment 2 2022-06-20 13:37:12 PDT
Oriol Brufau
Comment 3 2022-11-27 18:23:59 PST
(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
Comment 4 2022-12-08 21:06:35 PST
EWS
Comment 5 2022-12-11 20:14:17 PST
Committed 257711@main (52052a276f0d): <https://commits.webkit.org/257711@main> Reviewed commits have been landed. Closing PR #7376 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.