WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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
Details
View All
Add attachment
proposed patch, testcase, etc.
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
<
rdar://problem/95551387
>
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
Pull request:
https://github.com/WebKit/WebKit/pull/7376
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.
Top of Page
Format For Printing
XML
Clone This Bug