[cssom-1] How to serialize specified value of properties with a var()?
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
(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:
<!DOCTYPE html>
<body style="color: /* foo */ var(--foo); --foo: blue;">
<script>
document.body.textContent = document.body.style.getPropertyValue("color");
</script>
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the continuing discussion in issue #5685 and comparing the live DOM viewer example linked here with the Chrome and Firefox behavior described. The work is complete when the CSSOM-1 specification clearly defines how specified non-custom properties containing var() are serialized, including whether comments are preserved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation, web-dev
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100