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