Overridden value of CSS variable not used
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
People
(Reporter: bugzilla, Unassigned)
Details
Attachments
(1 file)
|
474 bytes,
text/html
|
Details |
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0
Steps to reproduce:
This CSS defines variables at :root level, uses them for h1 and h2, but with one of the variables overridden for the h2 element:
:root {
--nav-bg-h : 210;
--nav-bg-s : 75%;
--nav-bg-l : 35%;
--nav-bg : hsl(
var(--nav-bg-h),
var(--nav-bg-s),
var(--nav-bg-l));
}
h1, h2 {
background-color : var(--nav-bg);
}
h2 {
--nav-bg-l : 80%;
}
This should render the h2 with a lighter color than h1:
<h1>Default background</h1>
<h2>Lighter background</h2>
Actual results:
The background color of the h2 is wrong. Instead of the lighter color it is the same as the h1.
Expected results:
The background color of the h2 should be equal to hsl(210, 75%, 80%).
Repeating the complete definition of the :root variable --nav-bg for h2 produces the correct color:
h2 {
--nav-bg-l : 80%;
--nav-bg : hsl(
var(--nav-bg-h),
var(--nav-bg-s),
var(--nav-bg-l));
}
But this solution is unwanted because the definition of --nav-bg now has to be repeated everywhere one of the variables needs a different value.
|
||
Comment 1•4 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
||
Comment 2•4 years ago
|
||
|
|
||
Comment 3•4 years ago
|
||
I see the same behavior in all browsers, and this is per spec. The computed value of --nav-bg is already substituted on :root and that's what propagates through. Please reopen if I'm missing something though?
|
Reporter | |
Comment 4•4 years ago
|
||
Other browsers don't really matter here, I think. But if it's according to the spec, then there is not much to do.
Would the way CSS variables are handled also cause expressions like this to not recalculate when resizing the window:
<body>
<nav>...</nav>
<main>...</main>
</body>
:root {
--space-x : clamp(1ch, 2vw, 3ch);
--nav-width : clamp(15ch, 12.5vw, 25ch);
}
nav {
width : var(--nav-width)
}
main {
width : calc(100% - var(--nav-width) - (var(--space-x) * 2));
}
Or is this a different issue?
Description
•