Типизированные CSS переменные с @property

Эта статья — перевод оригинальной статьи "Type safe CSS design systems with @property".

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

Типы CSS - это достойное вложение в безопасность типов при работе с внешним интерфейсом. Мы все еще ожидаем кроссбраузерности, но мы к этому придем ? .

Если вы никогда не видели типизированную CSS-переменную с @property, то вот пример:

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

Я использовал её, чтобы анимировать изображение с градиентной маской. Довольно мило.

Вот предварительный обзор того, что может сделать безопасность типов CSS, и того, что я буду объяснять:

Основы безопасности CSS типов

При изучении Rust или TypeScript лучше всего начать с примитивов типов. В CSS их несколько:

Больше типов на MDN и полный список грамматик и типов на csswg.org/indexes/#types.

Еще одно определение переменной:

@property --hue {
  syntax: '<angle>';
  initial-value: .5turn;
  inherits: false;
}

Используйте её так же, как и var(--hue), и она будет равна .5turn. Но попробуйте установить его в значение, не соответствующее её типу? Не получится, значение по-прежнему будет равно .5turn. Переменная не позволит присвоить себе значение, не соответствующее её типу, всегда возвращаясь к последнему подходящему значению.

.card {
  --hue: 90deg; /* ✅ */
  --hue: #f00;  /* ❌ */
  background: oklch(98% .01 var(--hue));

  /* background will always resolve ?? */
  /* --hue resolves 90deg *.
}

Это безопасность CSS типов. Она не приводит к краху страницы, не блокирует поток и, к сожалению, не сообщает в консоли о том, что была попытка установить для свойства --hue значение <color>, а не <angle>. Но я думаю, что более качественный инструментарий мог бы помочь ?.

Уровень 2

Пока что я создал переменную как <angle> и использовал её в свойстве background. Никакой вложенности свойств.

Перейдем на более глубокий уровень, сделав переменную использующую другую переменную. Здесь --_bg - это <any> (потому что на данный момент это не типизированная переменная), с вложенной переменной --hue:

.card {
  --_bg: oklch(98% .01 var(--hue));
  background: var(--_bg);

  @media (prefers-color-scheme: dark) {
    --_bg: oklch(15% .1 var(--hue));
  }
}

Вы можете углубиться на много уровней, но не бесконечно. И можно типизировать некоторые или все переменные. Далее мы создадим несколько типизированных переменных с двухуровневой глубиной.

Актуальность систем проектирования

Давайте сделаем типизированный стартер адаптивной цветовой схемы для светлых и темных тем!

Во-первых, безопасный для типа значение hue. Я сделаю элемент <input type=text>, который будет записывать в это значение все, что мы в него введем. Поскольку он безопасен для типов, мы увидим, как другие пользовательские свойства, зависящие от него, не сломаются, если значение параметра --hue будет установлено в "poots" или что-то в этом роде.

@property --hue {
  syntax: '<angle>';
  initial-value: 5rad;
  inherits: true;
}

Для краткости я буду задавать только поверхностные слои адаптивной цветовой схемы, но это даст понимание процесса создания системы дизайна.

Вот 3 слоя, один из которых будет фоном страницы --surface, и два других, которые будут либо поверх bg страницы, либо под ним. Их начальное значение не вызывает восторга, но мы дойдем до этого в следующей части.

@property --surface {
  syntax: '<color>';
  initial-value: #333;
  inherits: true;
}

@property --surface-over {
  syntax: '<color>';
  initial-value: #444;
  inherits: true;
}

@property --surface-under {
  syntax: '<color>';
  initial-value: #222;
  inherits: true;
}

Важным здесь является то, что они относятся к цветовому типу.

Теперь мы можем присвоить цветам слоёв более понятные значения. При желании можно использовать @media (prefers-color-scheme), но здесь, поскольку я хотел показать светлое и темное с помощью переключателя, я использую :has():

@layer demo.theme {
  html:has(#light:checked) {
    color-scheme: light;
    --surface: oklch(90% .05 var(--hue));
    --surface-over: oklch(99% .02 var(--hue));
    --surface-under: oklch(85% .075 var(--hue));
  }
  
  html:has(#dark:checked) {
    color-scheme: dark;
    --surface: oklch(20% .1 var(--hue));
    --surface-over: oklch(30% .1 var(--hue));
    --surface-under: oklch(15% .1 var(--hue));
  }
}

Вот, собственно, и вся настройка и оркестровка типизированных переменных. Остается только использовать их. Загляните в Codepen, чтобы увидеть все возможные способы их использования для создания адаптивной цветовой схемы: тени, фона и многое другое!

CodePen

Последняя часть

Попробуйте вводить всякую ерунду, в текстовое поле "Theme tint" в CodePen демо-версии. Ни одна из цветовых систем не даст сбоя из-за опечатки или присвоенного значения, не соответствующего типу. Браузер точно знает, как сделать обратный ход и обработать ошибки.

На @property можно построить очень надежную и большую систему. Те же типы безопасности типов при разработке, что и в Typescript, но типы действительно передаются браузеру и соблюдаются. Rad.

Firefox уже почти закончил свою реализацию, что сделает @property кроссбраузерно стабильной ?.

Информацию о поддержке можно узнать на сайте caniuse.

Системы проектирования скоро станут намного умнее и стабильнее.