CSS - :: выбор с помощью var () - PullRequest
Новая
       21

CSS - :: выбор с помощью var ()

2 голосов
/ 28 июня 2019

Я пытаюсь изменить цвет выделения для всей веб-страницы с помощью переменной css: 

html {
  --my-var: red;
}

 ::selection {
  background-color: var(--my-var);
}
<p>a b c</p>
<div>
  <p>x y z</p>
</div>

Я правильно вижу примененный стиль выделения. Однако, если var ссылается на переменную, которая не определена, цвет выделения вообще отсутствует: 

html {
  --my-var: red;
}

::selection {
  background-color: var(--not-my-var);
}

Как определить цвет выделения для всей страницы, которая использует значение переменной css, если она существует, или использует цвет выбора браузера по умолчанию? Я пробовал var(--not-my-var, unset), var(--not-my-var, inherit) и var(--not-my-var, initial), но, похоже, они не работают

1 Ответ

5 голосов
/ 28 июня 2019

Единственный способ получить то, что вы хотите, это убедиться, что значение недопустимо, поэтому браузер проигнорирует его и вернется к значению по умолчанию: 

::selection {
  background-color: something_invalid;
}
<p>a b c</p>
<div>
  <p>x y z</p>
</div>

К сожалению, это невозможно при использовании var(--variable), поскольку значение никогда не будет недействительным.

С Спецификация У нас есть следующие шаги, чтобы найти значение:

Чтобы заменить var () в значении свойства:

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

(2) и (3) тривиальны и всегда дают нам значение.(1) попросите нас рассматривать значение пользовательского свойства как initial, и мы попадем в (3) или (4).

Для (4) мы также можем прочитать из той же спецификации:

Объявление может быть недопустимым во время вычисления значения, если оно содержит var (), которая ссылается на пользовательскийсвойство с его начальным значением , как объяснено выше, или если оно использует допустимое настраиваемое свойство, но значение свойства после замены его функций var () будет недопустимым .Когда это происходит, вычисленное значение свойства является либо унаследованным значением свойства, либо его начальным значением в зависимости от того, является ли свойство унаследованным или нет, соответственно, как если бы значение свойства имелобыл задан как ключевое слово unset.

background-color не наследуется, поэтому будет использовать его начальное значение, равное transparent, поэтому вы не видите цвета.

Теперь, если мы рассмотрим запасные варианты (3)

  • с использованием initial означает, что начальное значение цвета фона настолько прозрачно
  • с использованием inherit означает наследование цвета, но ничего нетчтобы унаследовать такую ​​прозрачность снова
  • , используя unset, мы получим сочетание inherit и initial

Ключевое слово unset CSS сбрасывает свойство в его унаследованноезначение, если оно наследует от своего родителя, и его начальное значение, если нет.Другими словами, он ведет себя как ключевое слово в первом случае и как исходное ключевое слово во втором случае ref

Вашединственный шанс, вероятно, будет использовать revert, но поддержка очень низкая, и я не уверен, будет ли она работать.

Ключевое слово revert CSS возвращает каскадное значениесвойства от его текущего значения до значения, которое свойство имело бы, если бы текущий элемент стиля не внес изменения в текущий элемент.Таким образом, оно сбрасывает свойство к его унаследованному значению, если оно наследует от своего родителя или к значению по умолчанию, установленному таблицей стилей агента пользователя (или пользовательскими стилями, если таковые существуют). ref

Обновление

Согласно комментариям ниже, это также невозможно с revert.

...