Custom Property Brain Twisters | CSS-Tricks
source link: https://css-tricks.com/custom-property-brain-twisters/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Custom Property Brain Twisters
Chris Coyier on
Jun 25, 2021
— Open, multi-cloud stack for modern apps
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.
[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:
CSS variable riddle: What color will the <p> element be? pic.twitter.com/NpIi1IY3dw
— Shaw (@shshaw) June 4, 2021
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 how 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;
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK