Кастомные CSS-свойства не работают без фолбека

Сегодня я узнал интересную вещь! Jeremy Keith описал интересный момент в использовании кастомных свойств CSS, также известных как CSS-переменные, который он узнал от Lea Verou: если значение CSS-переменной некорректно, то она перестает поддерживать каскад стилей. Или, как пишет Lea в своей статье "Гибридное позиционирование с переменными CSS и max()":

Далее Jeremy объясняет, что по этой причине использование функции color() может привести к ошибке, если вы будете использовать ее следующим образом:

При таком использовании функции color(), фолбек выполнится успешно:

/* CSS */
p {
  background-color: red;
  background-color: color(display-p3 1 0 0);
}

А если использовать переменную вот так - код сработает некорректно:

/* CSS */
:root {
  --myvariable: color(display-p3 1 0 0);
}
p {
  background-color: red;
  background-color: var(--myvariable);
}

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

В последнее время, многие люди переходят от Sass к использованию кастомных свойств. И если вам не нужно поддерживать IE11, вы можете делать это безбоязненно, так как их поддержка другими браузерами вполне надежна. Так что повсеместное использование кастомных свойств - это лишь вопрос времени. Однако важно понимать как они работают, что бы не не допускать ошибок. Особенно, если вы используете переменные для функций, которые поддерживаются только отдельными браузерами, например такие функции как color(), lab(), или lch().

Что же делать? Надо подождать и пока что не использовать CSS-переменные для значений в которых они могут работать не стабильно? На самом деле - нет. Как я писал в своем недавнем посте, про новые цветовые функции (color functions), которые появились в CSS, вы можете использовать свойство supports() для проверки поддержки кастомных свойств браузером:

/* CSS */
:root {
  --myvariable: red;
}

@supports (color: color(display-p3 1 0 0)) {
  :root {
  --myvariable: color(display-p3 1 0 0);
  }
}

p {
  background-color: var(--myvariable);
}

Еще, как вариант, можно использовать медиа-запрос, например color-gamut. Но, если вам нужно задать сразу несколько значений в одном наборе правил, supports() будет более правильным решением. Sara Soueidan на днях написала, как она объявляет глобальные и компонентные настройки стиля с помощью CSS-переменных. В этом случае, вы можете точно уверенными в том, что с помощью supports(), пользовательские свойства будут корректно обработаны всеми браузерами.

/* CSS */
:root {
  /* UI Colors */
  --color--primary: rgb(217,0,189);
  --color--secondary: rgb(242,199,0);
}

@supports (color: lch(50% 132 334)) {
  :root {
    /* UI Colors for browsers that support LCH colors */
    --color--primary: lch(50% 132 334);
    --color--secondary: lch(82% 132 86);
  }
}