I am part of that 82% that got it wrong in Lea’s quiz (tweet version).
Here’s the code:
:root {
--accent-color: skyblue;
}
div {
--accent-color: revert;
background: var(--accent-color, orange);
}
So what background do I expect <div>
to have?
My brain goes like this:
- Well,
--accent-color
is declared, so it’s definitely notorange
(the fallback). - The value for the background is
revert
, so it’s essentiallybackground: revert;
- The
background
property doesn’t inherit though, and even if you force it to, it would inherit from the<body>
, not the root. - So…
transparent
.
Nope.
Lea:
[Because the value is
revert
it] cancels out any author styles, and resets back to whatever value the property would have from the user stylesheet and UA stylesheet. Assuming there is no--accent-color
declaration in the user stylesheet, and of course UA stylesheets don’t set custom properties, then that means the property doesn’t have a value.Since custom properties are inherited properties (unless they are registered with
inherits: false
, but this one is not), this means the inherited value trickles in, which is — you guessed it —skyblue
.
Stephen posted a similar quiz the other day:
Again, my brain does it totally wrong. It goes:
- OK, well,
--color
is declared, so it’s not blue (the fallback). - It’s not
red
because the second declaration will override that one. - So, it’s essentially like
p { color: inherit; }
. - The
<p>
will inherityellow
from the<body>
, which it would have done naturally anyway, but whatever, it’s stillyellow
.
Nope.
Apparently inherit
there is actually inheriting from the next place up the tree that sets it, which html
does, so green
. That actually is now normal inheriting works. It’s just a brain twister because it’s easy to conflate color
the property with --color
the custom property.
It also might be useful to know that when you actually declare a custom property with @property
you can say whether you want it to inherit or not. So that would change the game with these brain twisters!
@property --property-name {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
The post Custom Property Brain Twisters appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.