Понимаем CSS Functions and Mixins Module Level 1 вместе

Сегодня я наткнулся на неожиданный для себя модуль в CSS спецификацих CSS Functions and Mixins Module, описанный в W3C First Public Working Draft от 15 мая 2025 года. Этот модуль открывает новую эру в развитии CSS, позволяя разработчикам создавать пользовательские функции, которые работают как параметризованные пользовательские свойства, но при этом используют всю мощь значений и условных правил CSS. Давайте рассмотрим ключевые концепции и практические аспекты этой спецификации.

Понимание пользовательских функций

Определение пользовательских функций с помощью @function

В основе модуля лежит правило @function, которое позволяет задавать повторно используемые функции с параметрами прямо в CSS. Это естественное развитие пользовательских свойств, предоставляющее больше возможностей для гибкости. Синтаксис прост, но многофункционален:

@function --myFunction(--param <type> : default) {
  result: <computed-value>;
}

Имя функции начинается с двух тире (например, --myFunction) в соответствии с обозначением <dashed-ident>. Параметры, такие как --param, могут включать тип данных (например, <color>, <length>) и необязательное значение по умолчанию. Дескриптор result определяет возвращаемое значение, которое вычисляется динамически при вызове функции.

Пример для практики:

@function --shadow(--shadow-color <color> : inherit) {
  result: 2px 2px var(--shadow-color, black);
}

Функция --shadow принимает параметр цвета и возвращает значение для свойства box-shadow, используя inherit по умолчанию, если цвет не задан. Освоение этого синтаксиса — ключ к созданию динамичных стилей.

Использование пользовательских функций

Вызов функции осуществляется с помощью нотации <dashed-function>, напоминающей вызов функций в языках программирования. Например:

.element {
  --shadow-color: blue;
  box-shadow: --shadow();        /* Использует значение по умолчанию или наследует */
  box-shadow: --shadow(red);     /* Передает явное значение red */
}

Функция вычисляется на этапе computed-value, адаптируясь к контексту вызова. Это мощный инструмент, и я рекомендую экспериментировать с аргументами и контекстными переменными, чтобы понять их влияние на результат.

Механика вычисления функций

Модель гипотетического элемента

Чтобы разобраться в вычислении функций, важно понять, как они работают. При вызове функция создает гипотетический элемент, который наследует стили из контекста вызова — своего рода изолированную среду для обработки логики. Параметры переопределяют унаследованные свойства с совпадающими именами, а значение result становится окончательным результатом. Такой подход обеспечивает контекстную осведомленность функций и предотвращает циклические зависимости — важный аспект при работе с сложными стилями.

Условная логика с @media

Модуль поддерживает условные правила внутри функций, что делает его особенно мощным. Пример:

@function --font-size() {
  result: 16px;

  @media (width > 1000px) {
    result: 20px;
  }
}

Функция изменяет результат в зависимости от ширины окна просмотра. Используйте такие конструкции для адаптивного дизайна, помня, что в CSS более поздние объявления переопределяют предыдущие — концепция “раннего возврата” здесь не применима.

Продвинутые возможности и интеграция

Локальные переменные и аргументы

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

@function --double-z() {
  result: calc(var(--z) * 2);
}

div {
  --z: 3;
  z-index: --double-z(); /* Возвращает 6 */
}

Это показывает, как функции могут работать с контекстными данными. Изучите приоритеты — параметры, локальные переменные, унаследованные свойства — чтобы эффективно использовать их возможности.

Поддержка CSSOM

Объектная модель CSS (CSSOM) теперь включает интерфейс CSSFunctionRule, предоставляющий программный доступ к функциям. Это полезно для сложных проектов, и я советую углубиться в эту тему по мере вашего профессионального роста.