CSS-функциям быть!

09.02.2025, Ссылка на новость

В конце 2024 было ясно, что в будущем CSS будет много перемен – кастомные функции и миксины¹, и новые псевдоклассы², всё это было запланировано. Однако, не ожидалось, что работы по ним, их прототипирование начнёт так скоро.

Bramus (Bram Van Damme) анонсит нам функции в CSS, и это действительно “изменит правила игры”. На данном этапе кастомные функции рассматриваются как расширение синтаксиса CSS-переменных и они уже потрясающие:

@function --negate(--value) {
	result: calc(-1 * var(--value));
}
 
:root {
  padding: --negate(1px); /* = -1px */
}

Кастомные CSS-функции поддерживают ветвление, но не поддерживают early-return, а это значит, что сначала описать media query или container query и после него стандартное значение функции не выйдет:

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

Фича уже прекрасно работает в Canary и можно ожидать, что к концу года мы получим её стабильную версию.

Footnotes

1. CSS Functions and Mixins Module – спецификация описывает кастомные функции и миксины в CSS. ↩

2. CSS Values and Units Module Level 5 – спецификация описывает работу со стандартными единицами измерения, манипуляции со значениями, синтаксис свойств CSS. ↩