Question about CSS custom properties:
-
Question about CSS custom properties:
Can someone explain to me simply what the `inherit` property does in CSS custom properties (@\property)?
Because this MDN description doesn't do it for me:
"a boolean describing whether or not the property inherits by default."
(Practical, reverse-engineerable code examples are fine too)
-
Christopher Kirk-Nielsenreplied to Marijke Luttekes last edited by
@mahryekuh Say you have this:
```
html { --color: red; }
body { color: var(--color); }
```
With inherits set to true, it gives you red text in the body.
With inherits set to false, the value falls back to the initial-value (its omission invalidates the entire @\property rule unless syntax is set to '*'). -
Marijke Luttekesreplied to Christopher Kirk-Nielsen last edited by
@chriskirknielsen Thank you, nice example! Is `inherits: false` the same as immutability of the original value?
-
Christopher Kirk-Nielsenreplied to Marijke Luttekes last edited by
@mahryekuh You're very welcome! As for your question, I'm not sure I follow what you mean by immutability: in which context?
-
Marijke Luttekesreplied to Christopher Kirk-Nielsen last edited by
@chriskirknielsen You can ignore that post; I cannot with clarity put in words the stream of thoughts that lead to that question.
-
Christopher Kirk-Nielsenreplied to Marijke Luttekes last edited by
@mahryekuh Haha, all good! Always happy to answer some CSS questions so let me know if I can help!
-
Marijke Luttekesreplied to Christopher Kirk-Nielsen last edited by
@chriskirknielsen Thank you, much appreciated!
-
Curtis Wilcoxreplied to Christopher Kirk-Nielsen last edited by
@chriskirknielsen @mahryekuh
Kevin Powell recently made a video about a use case for turning off inheritance for a custom property. -
Marijke Luttekesreplied to Curtis Wilcox last edited by
@cwilcox808 @chriskirknielsen That video is brilliant. It's less than four minutes, and now I get it. Inherits does what it says on the tin, but it sounded more complicated in my head. Thank you for sharing; it's much appreciated!