Зависимости пользовательских свойств CSS не разрешаются, почему? Кроме того, обнаружил ли я недокументированное поведение?

Я считаю, что первые два примера должны иметь зеленый фон, и я считаю, что последний пример должен дать сбой, потому что предоставление другой функции var() в качестве первого параметра не определено поведением в документах https://www.w3.org/TR/css-variables/#cycles

.test1 {
  --c1: green;
}
.test2 {
  --c1: var(--c1,red);
  background-color: var(--c1,pink);
}

.test3 {
  --c2: green;
}
.test4 {
  background-color: var(--c2,pink);
}

.test5 {
  --c3: green;
}
.test6 {
  --c3: var(var(--c3),red);
  background-color: var(--c3,pink);
}
<div class="test1">
  <div class="test2">
    12
  </div>
</div>

<div class="test3">
  <div class="test4">
    34
  </div>
</div>

<div class="test5">
  <div class="test6">
    56
  </div>
</div>

Вопрос 1: Почему пример "12" не работает?

Вопрос 2: Почему пример "56" работает и должен ли он работать?


css css-variables
person ADJenks    schedule 16.04.2019    source источник
comment
дубликат первого вопроса: stackoverflow.com/q/51660196/8620333   -  person Temani Afif    schedule 17.04.2019
comment
Спасибо, я не нашел этот вопрос. Это действительно дубликат. Должен ли я удалить это?   -  person ADJenks    schedule 17.04.2019
comment
нет, это также может быть полезно, у нас все еще есть несколько вопросов о переменной CSS, поэтому наличие многих похожих, написанных по-разному, может быть полезно для получения результатов поиска.   -  person Temani Afif    schedule 17.04.2019

Ответы (1)


arrow_upward
0
arrow_downward

После внимательного изучения инструментов разработчика и того, как оцениваются правила, я решил ответить на свой вопрос.

Пример «12» не работает, потому что когда вы объявляете --c1: var(--c1,red);, он немедленно отменяет свое старое значение из-за каскадных правил, поэтому внутренняя ссылка на --c1 ссылается на ту же строку и генерирует цикл, а в документации указано, что:

Если в графе зависимостей есть цикл, все пользовательские свойства в цикле должны быть вычислены до их начального значения (которое является гарантированно недопустимым значением).

Пример "56" вроде работает, но на самом деле не работает, правило --c3: var(var(--c3),red); полностью недействительно и игнорируется, поэтому пример "56" действует идентично примеру "34".

person ADJenks    schedule 16.04.2019
comment
все еще любопытны переменные CSS, которые я вижу;) - person Temani Afif; 17.04.2019