Aren't custom properties inherited?

Just had to set --_custom-property:inherit; what's up with that?
5 Replies
Zoë
Zoë10mo ago
inherit means to take the style from the closest parent where the style was set. So if you have a h1 if you use font-size: inherit or font-size: var(--_custom-property) it will find the closest parent with font-size and use that. Also useful for anchors color: inherit It's not that the property itself inherits.
Coder_Carl
Coder_Carl10mo ago
with the use of _ within the css vars also, I believe the convention is suggesting that the --_custom-property will not be declared elsewhere so there wouldnt be anything to inherit
clevermissfox
clevermissfox10mo ago
To tack on to what Carl said, the convention of using —_ with the underscore is usually meaning that custom property is locally scoped , not in the :root
Jacord
Jacord10mo ago
Yes I was using the underscore for that very purpose. I think there must have been some mistake elsewhere in my code or maybe something weird in my cache for the page I was working on. I was sincerely experiencing something like the following.
.parent{
--_width: 100px;
}

.child{
width: var(--_width);
}
.parent{
--_width: 100px;
}

.child{
width: var(--_width);
}
...and the child width wouldn't work unless I added --_width:inherit; to the child. It sounds like it was a buggy edgecase though, rather than expected behavior? I wonder if I accidentally declared the parent after the child and perhaps that made a difference. (I can't quite remember where in my code this actually was now!) OOOooooh - I just re-read your answer... this makes sense, and it sounds like the 'width' property in my example was inherited, not the '--_width' custom property but when I saw it change I was 'tricked' into thinking it had worked?
Jacord
Jacord10mo ago
I take it back: 'inherit' does force the element to inherit the custom-property value from a parent... and usually this isn't necessary, however, it turns out that somewhere else in my code I had set that very same custom property for buttons as 'initial' so 'inherit' was needed to return to the default behaviour. I'm sure I felt very clever at the time because 'inherit' becomes a toggle for whether I want buttons to scale with the form element or stick to defaults. Clearly from the firefox's 'computed' tab shows how the custom property is inherited... I'm glad I discovered I can check the inheritance this way.
No description
Want results from more Discord servers?
Add your server