Почему свойство display, заданное для наследования с помощью переменной CSS, не работает?

Question

Я установил свойство display для divs на inline-block. Затем я создал четыре класса:

класс .no-var устанавливает display для inherit
.var, устанавливает display в переменную, заданную для inherit
.var-none устанавливает display в переменную, заданную none
.var-default, устанавливает display в переменную, которая будет inherit, и в качестве значения по умолчанию — grid

Однако фактический стиль, используемый каждым классом, кажется неправильным:

.no-var class правильно наследует отображение для block
.var не наследует значение переменной и отображается как inline-block
.var-none правильно устанавливает display в none и скрывается
.var-default не наследует значение переменной и устанавливает display в значение по умолчанию.

Для каждого из этих классов я добавил переменные и значения по умолчанию для свойства color, которые работают так, как и ожидалось.
Должны ли переменные игнорировать наследование и сброс значений?

: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>

_{Свободный перевод вопроса Why display property set to inherit with CSS variable doesn't work? от участника @GammaGames.}

Answer 1

В такой ситуации inherit используется как значение для пользовательского свойства и не будет оценено до значения inherit с помощью var().

Вот простой пример, который поможет понять проблему:

.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>

Обратите внимание, что во втором случае у нас синий цвет, потому что пользовательское свойство унаследовало это значение от верхнего div, а затем оно оценивается в это значение. В первом случае мы будем использовать цвет по умолчанию, потому что наследовать нечего.

Другими словами, inherit будет рассматриваться для пользовательского свойства, а не для свойства, где вы будете оценивать пользовательское свойство с помощью var().

Вы не найдете пользовательское свойство с вычисляемым значением, равным inherit, НО с вычисляемым значением, равным унаследованному значению.

из спецификации:

Пользовательские свойства являются обычными свойствами, поэтому их можно объявлять для любого элемента, они разрешаются с помощью обычных правил наследования и каскадирования.

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Почему свойство display, заданное для наследования с помощью переменной CSS, не работает?

Ответы (1 шт):