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
My brain goes like this: Nope. Lea: [Because the value is Since custom properties are inherited properties (unless they are registered with Stephen posted a similar quiz the other day: Again, my brain does it totally wrong. It goes: Nope. Apparently It also might be useful to know that when you actually declare a custom property with The post Custom Property Brain Twisters | CSS-Tricks appeared first on Nexstair Technologies.--accent-color
is declared, so it’s definitely not orange
(the fallback). revert
, so it’s essentially background: revert;
background
property doesn’t inherit though, and even if you force it to, it would inherit from the , not the root.
transparent
.
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.inherits: false
, but this one is not), this means the inherited value trickles in, which is — you guessed it — skyblue
.--color
is declared, so it’s not blue (the fallback). red
because the second declaration will override that one. p { color: inherit; }
. will inherit
yellow
from the , which it would have done naturally anyway, but whatever, it’s still
yellow
. 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. @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: '
Source link
This post first appeared on Nexstair | Creative Website Design And Wordpress T, please read the originial post: here