✨ Одна и та же CSS-переменная может дать 1, а может 2

Кастомные свойства вроде --index по умолчанию хранятся как кусок текста. Вычисляется он там, где переменную подставили через var(), а не там, где объявили.

Пример Джейка Арчибальда. У второго div задано --index: sibling-index() (номер элемента среди соседей, с единицы). Его первый ребёнок, абзац, получает scale: var(--index). Масштаб будет 1: функция считается уже для абзаца.

Теперь зарегистрируем свойство с типом:

@property --index {    syntax: &apos;<number>&apos;;    inherits: true;    initial-value: 0;}

Значение вычислится прямо на div и станет числом 2, абзац увеличится вдвое. С em, lh и единицами контейнерных запросов то же правило.

Но var() внутри значения подставляется сразу при любом типе. Если в --index есть var(--multiplier), переопределять --multiplier у ребёнка бесполезно.

А что при этом происходит с URL из разных таблиц стилей, разобрано в статье.

👉 @seniorFront