La propiedad de visualización de CSS configurada para heredar con la variable no funciona

Establecí la propiedad de visualización para divs in line-block . Entonces creé cuatro clases:

  • no-var, que establece la visualización para inherit
  • var, que establece la visualización en un conjunto de variables para inherit
  • var-none, que establece la visualización en una variable establecida en none
  • var-default, que establece la visualización de un conjunto de variables para inherit y un valor predeterminado de la grid

Sin embargo, el estilo real que utiliza cada clase no parece ser correcto:

  • La clase no-var hereda correctamente la visualización para block
  • La clase var no obtiene el valor inherit de la variable y se muestra como inline-block
  • La clase var-none establece correctamente la visualización en none y está oculta
  • La clase var-default no obtiene el valor inherit de la variable y los conjuntos se muestran en el valor predeterminado

Para cada una de estas clases agregué variables y valores predeterminados para la propiedad de color, que funcionan como se esperaba. ¿Se supone que las variables ignoran los valores inherit y no unset ?

 :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); } 
 
No variable
No variable
Variable
Variable
None
None
Default
Default

En tal situación, inherit se usa como un valor para la propiedad personalizada y no se evaluará al valor inherit usando var() .

Aquí hay un ejemplo básico para entender el problema:

 .box { --c:inherit; color:var(--c,red); } 
 
I am a text
I am a text