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