Свойство отображения CSS, установленное для наследования с переменной, не работает - PullRequest
Новая
       6

Свойство отображения CSS, установленное для наследования с переменной, не работает

0 голосов
/ 08 ноября 2018

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

  • no-var, который устанавливает отображение на inherit
  • var, который устанавливает переменную на значение inherit
  • var-none, который устанавливает отображение в переменную, установленную в none
  • var-default, который устанавливает переменную на значение inherit и значение по умолчанию grid

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

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

Для каждого из этих классов я добавил переменные и значения по умолчанию для свойства цвета, которые все работают как положено. Должны ли переменные игнорировать значения inherit и 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);
}
<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>

1 Ответ

0 голосов
/ 08 ноября 2018

В такой ситуации 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, после чего оно получило значение. В первом случае мы будем использовать цвет по умолчанию, поскольку наследовать нечего.

enter image description here

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

С спецификацией :

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

...