Переменные CSS - не работает несколько резервных вариантов

Согласно MDN, var Функция принимает несколько откатов. Но я не могу заставить их работать.

Я попробовал следующий код на Chrome, Firefox и Safari. background-color за .demo3 прозрачно во всех вышеперечисленных браузерах.

Это ошибка с кодом, или потому что браузеры не реализовали откат переменной?

:root {
  --my-var: red;
}

.demo1 {
  background-color: var(--my-var);
}

.demo2 {
  background-color: var(--my-background, pink);
}

.demo3 {
  background-color: var(--my-background, --my-var, pink);
}
<div class="demo1">No fallback</div>

<div class="demo2">Single fallback</div>

<div class="demo3">Multiple fallbacks</div>

1 ответ

Решение

Для нескольких откатов попробуйте: background-color: var(--my-background, var(--my-var, pink));

Другие вопросы по тегам