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

В конце 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 и можно ожидать, что к концу года мы получим её стабильную версию.