Как сохранить наследуемое значение в пользовательском свойстве CSS (иначе переменные CSS)?

Question

Давайте рассмотрим этот упрощенный пример, чтобы проиллюстрировать проблему:

:root {
  --color:rgba(20,20,20,0.5); /*defined as the default value*/
}

.box {
  width:50px;
  height:50px;
  display:inline-block;
  margin-right:30px;
  border-radius:50%;
  position:relative;
}
.red {background:rgba(255,0,0,0.5);}
.blue {background:rgba(0,255,0,0.5);}

.box:before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  border-radius:50%;
  transform:translateX(30px);
  background:var(--color);
  filter:invert(1);
}

<!-- we can add any color we want -->
<div class="box red" style="--color:rgba(0,255,0,0.5);">
</div>
<div class="box blue" style="--color:rgba(0,255,255,0.5);">
</div>

<!-- we can add the same color but this won't be dynamic -->
<div class="box red" style="--color:rgba(255,0,0,0.5);">
</div>

<!-- it would be good to be able to inherit the value but this won't work -->
<div class="box red" style="--color:inherit;">
</div>

В приведенном выше коде мы можем манипулировать background псевдоэлемента с помощью переменной CSS. В некоторых случаях нам нужно иметь тот же цвет, что и у основного элемента, но поскольку мы не знаем, какой цвет используется, мы не можем установить его вручную, и лучше всего использовать значение inherit.

Как объяснено здесь: Свойство отображения Css, установленное для наследования с переменной, не работает , использование inherit не будет работать.

Есть ли способ сохранить значение inherit в переменной CSS и использовать его позже в любом свойстве (background в нашем примере)?

Answer 1

В таком случае мы можем рассмотреть запасное значение переменной CSS. Как объяснено в спецификации , мы можем написать что-то вроде этого:

background:var(--color,inherit)

Этим мы сообщаем нашему свойству (background) использовать inherit в случае, если --color не определено.

Это может решить проблему, но в нашем случае этого будет недостаточно, поскольку --color всегда определен на уровне :root и будет унаследовано ¹ псевдо элемент, поэтому мы никогда не будем использовать запасное значение.

Чтобы исправить это, мы можем рассмотреть значение initial, чтобы отменить определение нашего пользовательского свойства и принудительно использовать запасное значение. Как описано в спецификации :

Исходное значение пользовательского свойства - пустое значение ; то есть вообще ничего. Это начальное значение имеет специальное взаимодействие с нотацией var (), что объясняется в разделе, определяющем var ().

и

На подставьте переменную () в значении свойства:

1. Если пользовательское свойство названо первым аргументом в var () функция испорчена анимацией, а функция var () используется в свойство анимации или одна из его длинных рук, обрабатывать пользовательские свойство как имеющее начальное значение для остальной части этого алгоритма.
2. Если значение пользовательского свойства названо первым аргументом Функция var () - это что угодно , но начальное значение заменяет var () функция по значению соответствующего пользовательского свойства. В противном случае,
3. если функция var () имеет запасное значение в качестве второго аргумента, заменить функцию var () на запасное значение . Если есть какие-либо Ссылки на var () в резервном варианте также заменяют их.
4. В противном случае свойство, содержащее функцию var (), недопустимо при время вычисленного значения

Наш код будет выглядеть следующим образом:

:root {
  --color:rgba(25,25,25,0.5); /*defined as the default value*/
}

.box {
  width:50px;
  height:50px;
  display:inline-block;
  margin-right:30px;
  border-radius:50%;
  position:relative;
}
.red {background:rgba(255,0,0,0.5);}
.blue {background:rgba(0,0,255,0.5);}

.box:before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  border-radius:50%;
  transform:translateX(30px);
  background:var(--color,inherit);
  filter:invert(1);
}

<div class="box red" style="--color:initial;">
</div>
<div class="box blue" style="--color:initial;">
</div>

<div class="box" style="background:grey;--color:initial;">
</div>

Нам просто нужно установить initial в пользовательское свойство, чтобы inherit использовалось в качестве значения в background.

---

Использование initial также может быть полезно для остановки распространения переменной CSS на определенном уровне, поскольку по умолчанию она наследуется всеми элементами.

Вот пример:

:root {
  --color: blue;
}
.container div{
  border:5px solid var(--color,red);
  padding:5px;
}
.stop {
  --color:initial;
}
.green {
  --color:green;
}

<div class="container">
  <div> 
    <div>
      <div class="stop"> <!-- we stop at this level -->
        <div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container stop"> <!-- we stop at this level -->
  <div> 
    <div>
      <div class="green">  <!-- we redefine at this level -->
        <div>
        </div>
      </div>
    </div>
  </div>
</div>

^{1: речь идет о наследовании пользовательского свойства, а не свойства background}