Опубликовано: 6 марта 2025 г.
25 февраля Chrome опубликовал сообщение о намерении выпустить @function и получил отзывы с просьбой продлить фазу экспериментов. Хотя в целом фаза экспериментов не была короткой, в последнее время произошли некоторые впечатляющие изменения в характеристиках, и они заслуживают большего времени на эксперименты.
Мы также надеемся и воодушевлены тем, что этот расширенный этап экспериментов может привести к большему количеству экспериментов сообщества.
Звоните, чтобы поэкспериментировать
Сейчас самое время получить копию Canary , включить экспериментальные функции веб-платформы , начать тестировать CSS @function и сообщать о любых обнаруженных ошибках . Теперь у нас есть время экспериментировать подольше, надо этим воспользоваться.
Чтобы помочь вам начать, вот несколько исследований:
- Понтийский рог - варианты пуговиц
- Нильс Ридеманн - шкалы шрифтов
- Bramus — функция «светло-темно» — это больше, чем просто цвет
Следующий CSS демонстрирует краткий, но полезный пример:
@function --light-dark(--light, --dark) {
result: var(--light);
@media (prefers-color-scheme: dark) {
result: var(--dark);
}
}
Хотите узнать больше о @function ?
У Bramus есть отличный набор демонстраций , и CSS Tricks также не замедлили подхватить волну энтузиазма .
Аргументы?! Возвращаемые значения?! Ради этого стоит выплюнуть мой кофе! Мне пришлось узнать о них больше, и, к счастью, спецификация написана четко.