Aren't custom properties inherited?
Just had to set
--_custom-property:inherit;
what's up with that?5 Replies
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.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 inheritTo 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
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.
...and the child width wouldn't work unless I added 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?
--_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 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.