Aren't custom properties inherited?

Just had to set --_custom-property:inherit; what's up with that?

5 Replies

Zoë•6mo 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•6mo 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•6mo 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•6mo 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•6mo 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.

Gaming

Programming

Aren't custom properties inherited?