W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2021

[csswg-drafts] [cssom-1] How to serialize specified value of properties with a var()? (#6484)

From: Tab Atkins Jr. via GitHub <sysbot+gh@w3.org>
Date: Thu, 29 Jul 2021 23:20:18 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-956273852-1627600816-sysbot+gh@w3.org>
tabatkins has just created a new issue for https://github.com/w3c/csswg-drafts:

== [cssom-1] How to serialize specified value of properties with a var()? ==
(continuing topic from <https://github.com/w3c/csswg-drafts/issues/5685>)

It's not currently well-specified how serialization for specified values of non-custom properties should behave when they have a var() reference.

That's a lot of words! I'm referring to [this example](http://software.hixie.ch/utilities/js/live-dom-viewer/saved/9522):

<!DOCTYPE html>
<body style="color: /* foo */ var(--foo); --foo: blue;">
document.body.textContent = document.body.style.getPropertyValue("color");

Currently, Chrome serializes this as `var(--bar)`, while Firefox serializes it as `/* foo */ var(--bar)`. (I'm not sure what WebKit does.)

All browser, when given a property *without* a variable reference, like `color: /* foo */ red;`, serialize the specified value as just the keyword, without the comments.

In the f2f earlier today, @emilio argued that Firefox's behavior is because it holds onto the original string for properties with variable references, and serializing using it is simplest. I *think* that Chrome's behavior is because it stores props with var() references as a token stream (throwing away comments), and just reserializes from the token stream.

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

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 29 July 2021 23:20:20 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:39 UTC