Why display property set to inherit with CSS variable doesn't work?

Question

I set the display property for divs to in line-block. I then created four classes:

no-var, which sets display to inherit
var, which sets display to a variable set to inherit
var-none, which sets display to a variable set to none
var-default, which sets display to a variable set to inherit and a default of grid

The actual style that is used by each class doesn't seem to be correct, though:

The no-var class correctly inherits display to block
The var class doesn't get the inherit value from the variable and displays as inline-block
The var-none class correctly sets display to none and is hidden
The var-default class doesn't get the inherit value from the variable and sets display to the default

For each of these classes I added variables and defaults for the color property, which all work as expected. Are variables supposed to ignore inherit and unset values?

:root {
  --display: inherit;
  --display-none: none;
  --color: red;
}
div  {
  display: inline-block;
  color: green;
}
.no-var {
  display: inherit;
  color: red;
}
.var {
  display: var(--display);
  color: var(--color);
}
.var-none {
  display: var(--display-none);
}
.var-default {
  display: var(--display, grid);
  color: var(--color, purple);
}

<div class="no-var">
  No variable
</div>
<div class="no-var">
  No variable
</div>
<div class="var">
  Variable
</div>
<div class="var">
  Variable
</div>
<div class="var-none">
  None
</div>
<div class="var-none">
  None
</div>
<div class="var-default">
  Default
</div>
<div class="var-default">
  Default
</div>

Possible duplicate of [How do I set a value of \`inherit\` to a CSS custom property?](https://stackoverflow.com/questions/39881816/how-do-i-set-a-value-of-inherit-to-a-css-custom-property) — chharvey, Mar 21 '19 at 20:50
@chharvey you also want to close this one too :) how it's relevant in this case?. The OP is looking to understand the why and to have an explanation, he don't want to *store inherit inside a CSS variable* — Temani Afif, Mar 21 '19 at 21:30
@TemaniAfif In my opinion the question is a duplicate. It’s just my opinion, nothing more. If the OP can make a distinction of how it’s *not* a duplicate, that would clear things up. (By the way, he/she absolutely *does* want to store `inherit` inside a variable — the code literally contains the line `--display: inherit;`.) — chharvey, Mar 21 '19 at 21:37
@chharvey I agree with TemaniAfif. I wasn't looking for a way to get it to work, I was just trying to figure out why it wasn't working the way I thought it would. I think this question has a better explanation of why it works the way it does, too. — GammaGames, Mar 22 '19 at 14:19

Temani Afif · Accepted Answer · 2018-11-10T13:25:28.047

In such situation, inherit is used as a value for the custom property and will not be evaluted to the inherit value using var().

Here is a basic example to understand the issue:

.box {
  --c:inherit;
  color:var(--c,red);
}

<div>
  <div class="box">I am a text</div>
</div>
<div style="--c:blue">
  <div class="box">I am a text</div>
</div>

Note how in the second case we have a blue color because the custom property inherited this value from the top div then it's getting evaluted to that value. In the first case, we will use the default color because there is nothing to inherit.

In other words, inherit will be considered for the custom property and not for the property where you will evalute the custom property using var(). You will not find a custom property with a computed value equal to inherit BUT with a computed value equal to the inherited value.

From the specification:

Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules

That's interesting and makes sense when explained like that, thank you! — GammaGames, Nov 08 '18 at 21:24
@GammaGames you can check this https://stackoverflow.com/questions/53239880/how-to-store-inherit-value-inside-a-css-custom-property-aka-css-variables/53239881#53239881 in case you need a way to use inherit value within CSS variable — Temani Afif, Nov 11 '18 at 09:53
same as not declaring `--c:inherit;` in the stylesheet to begin with. — vsync, Oct 10 '20 at 15:50

Simon_Weaver · Answer 2 · 2023-02-18T03:27:13.167

Sometimes you need to use a property value that is 'context aware' such as auto, 100% or 1em.

For instance right now (this is for Angular material styles so I don't control all CSS) I need to set a variable corresponding to a font-size to prevent a default var() value being used.

So in the context of font-size: 100% or 1em effectively means the same as inherit.

So the Material style (that I can't change) might be something like the following (and I want to prevent their default of 18px from being used):

font-size: var(--mat-body-font-size, 18px)

and as explained by Temani I can't do this:

.parent-element
{
    font-size: 28px;  
    --mat-button-font-size: inherit;
}

Instead I can use a custom property value that behaves like 'inherit', but only because I'm using font-size.

.parent-element
{
    font-size: 28px;  
    --mat-button-font-size: 100%;
}

So font-size: 100% gets applied instead of 18px and effectively does nothing, inheriting whatever font size I've previous set in the parent.

Another example might be --color: currentColor for a property that is color.

Why display property set to inherit with CSS variable doesn't work?

2 Answers2

Linked