mefody.dev

Как вычисляются CSS-переменные



Хотя, как мне кажется, правильнее было бы назвать статью «Как НЕ вычисляются CSS-переменные».



Крайне полезная статья от Стэфани Эклз про то, какие особенности есть у CSS-переменных. Несколько важных фактов, которые нужно учитывать при вёрстке с их использованием:



1. Если у обычных наследуемых свойств некорректные значения приводят к дальнейшему поиску корректного значения по каскаду, то для CSS-переменных нет понятия корректного значения (если не использовать @property), это просто строка, поэтому обработка ошибки идёт уже во время вызова var(--my-color), по месту применения определяется, а может ли быть такое значение в принципе.



2. Некорректный var() обрабатывается очень похоже на то, как обрабатывается значение unset.



3. Фолбэки внутри var() тоже обрабатываются во время вызова, поэтому если их задать неправильно, срабатывает тот же принцип. То есть нельзя написать так:



color: var(--my-color, rgb(0, 0, 0));

color: var(--my-color, oklch(40.1% 0.123 21.57));



в надежде на то, что если браузер не умеет в oklch, то откатится на простой rgb. Нет, он снова сделает unset.



4. Сами CSS-переменные вычисляются на самом раннем возможном этапе. Поэтому нельзя мыслить о них, как о функциях, если делать что-то вроде --my-color: var(--accent-color).

:root {

  --font-size: 14px;

  --font-size-large: calc(2 * var(--font-size));

}



h1 {

  --font-size: 20px;

  font-size: var(--font-size-large);

}

В этом примере у заголовка размер будет не 40px, а всего лишь 28px. Уже во время обхода :root вычислится значение переменной, а во время вызова в h1 внутри var() — подставится вычисленное.



https://moderncss.dev/how-custom-property-values-are-computed/