CSS Custom Functions уже на подходе…

Эта статья — перевод оригинальной статьи «CSS Custom Functions are coming … and they are going to be a game changer!»

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

Вступление

В настоящее время Chrome использует прототип CSS Functions из спецификации css-mixins-1.

Пользовательскую функцию можно рассматривать как расширенное пользовательское свойство, которое вместо замены одним фиксированным значением вычисляет значение замены на основе параметров функции и значений пользовательских свойств в момент ее вызова.

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

@function --negate(--value) { result: calc(-1 * var(--value)); }

Вы вызываете функцию как бы напрямую — нет необходимости в var() или т. п. — и можете использовать ее везде, где принимается значение. Например:

:root {   padding: --negate(1px); /* = -1px */ }

Реализация в Chrome Canary на данный момент не завершена, и дата отправки не назначена, но вы уже можете опробовать WIP-реализацию, включив флаг Experimental Web Platform Features.

Я очень рад этой грядущей функции, поскольку она откроет множество возможностей, гораздо более значимых, чем тот пример с --negate из спецификации.

Например, ограничение функции CSS light-dark() заключается в том, что она работает только со значениями <color>. Благодаря Custom Functions вы можете написать свою собственную --light-dark(), которая будет работать с любым значением.

@function --light-dark(--light, --dark) { result: var(--light);  @media (prefers-color-scheme: dark) { result: var(--dark); } }

Если вы посещаете сайт в темном режиме, будет возвращено значение --dark. В противном случае будет возвращено значение --light.

Например, вы можете использовать эту --light-dark(), чтобы иметь разный вес шрифта — то, что советует делать Робин:

:root { color-scheme: light dark;   font-family: "Literata", serif;  color: light-dark(#333, #e4e4e4); background-color: light-dark(aliceblue, #333); font-weight: --light-dark(500, 300); }

Вот демонстрационный пример, в котором используется этот код (и который также изменяет font-size и некоторые свойства, связанные с border): https://codepen.io/bramus/pen/EaYBJJx

💁‍♂️ Обратите внимание, что пользовательская функция --light-dark() не является полной копией light-dark(). Встроенная функция light-dark() может возвращать различные значения в зависимости от используемой цветовой схемы элемента, в то время как --light-dark() полагается на глобальное предпочтение светлого/темного. Возможность реагировать на используемые значения не покрывается самой @function. Для этого нам также понадобится функция CSS if(), которая также находится в разработке (но пока не готова к тестированию). Контейнерные запросы внутри функции также работают — чтобы учитывать родительский контекст — но это пока не прототипировано.

🏎️ Также обратите внимание, что для значений <color> я все еще использую встроенную функцию light-dark(), но мог бы использовать и свою собственную. У меня есть подозрение, что встроенная версия работает быстрее, но для этого нужен соответствующий бенчмарк.

В этой статье я ограничился лишь базовым примером, не раскрывая слишком много деталей. Не упомянуты, например, значения по умолчанию для параметров функции и то, как указать типы для любого из них. Для этого вы можете покопаться в спецификации. Обратите внимание, что в спецификации еще много подвижных частей, поскольку на нее влияют результаты работы над прототипом, который создает Chrome.

Чтобы следить за ходом работы Chrome над прототипом, подпишитесь на рассылку crbug/325504770, нажав на звездочку рядом с ее названием.