Дивовижний світ веброзробки on Telegram: “#css_in_action Користувацькі CSS-функції уже май…”

#css_in_action
Користувацькі CSS-функції уже майже за рогом, тож прийшов час поглянути на них дещо ближче.

Сучасний CSS дозволяє вирішувати усе складніші задачі, зокрема через певну реактивність, закладену у CSS змінних, себто CSS custom properties, та широкий спектр нативних CSS-функцій на кшталт clamp(), color-mix() та інших. І тепер ми можемо створювати доволі хитромудрі вирази на кшталт:

clamp(var(--min), 2vw + 1rem, var(--max));

Проте досі перевикористання таких виразів лишається болючою скалкою в дупі. Ми вимушені писати таку логіку наново в усіх місцях, де вона нам потрібна, що, погодьтеся, дещо незручно. Однак надія є, і вже досить давно в роботі знаходиться специфікація CSS Functions and Mixins Module Level 1, хоча й у статусі Working Draft.

Зокрема, цей документ вводить поняття CSS custom functions, які покликані саме для того, аби дати можливість створювати власні функції та перевикористовувати складні математичні формули. А вони в CSS дійсно складні, хоча б через свій синтаксис, але шо тут вже вдієш.

Виглядають вони приблизно ось так:

@function --fluid-size(--min, --max) {
  result: clamp(var(--min), 2vw + 1rem, var(--max));
}
…
font-size: --fluid-size(1rem, 3rem);

Синтаксис простий:

- Оголошуємо через at-rule @function;
- Назва має префікс --, як і решта синтаксису для користувацьких властивостей в CSS;
- Функція може приймати параметри;
- Параметри можуть мати значення за замовчуванням: --fn(--x: 1px) {…};
- Параметри можна типізувати: --fn(--clr <color>) {…}
- Параметр може бути списком: --fn(--list <length>#), width: --fn({1px, 7px, 2px}) (саме так, з фігурними дужками);
- Ключове слово result є, по суті, відповідником нашого улюбленого return;

Можна навіть писати досить складну (наскільки це можливо) логіку. Наприклад, створювати проміжні змінні з власними розрахунками чи просто як константи:

@function --fluid-size(--min: 1rem, --max: 3rem) {
  --preferred: calc(2vw + 1rem);
  --safe-min: max(var(--min), 0.875rem);

  result: clamp(var(--safe-min), var(--preferred), var(--max));
}

Ба більше, користувацькі функції підтримують медіа-запити:

@function --narrow-wide(--narrow, --wide) {
  result: var(--wide);
  @media (width < 700px) {
    result: var(--narrow);
  }
}

та умовну функцію if(), яку варто розібрати окремо.

Що по підтримці? Ну, поки трошки сумно. Реалізацію поточного драфту для custom functions викотив Chromium, що означає, що ми можемо спробувати цей синтаксис в Chrome, Edge та решті хроміум-зоопарку.

Firefox, як і завжди, певно не спішитиме з імплементацією допоки стандарт не перейде до стабільнішого рівня, а щодо Safari впевненим можна бути лише в одному — що ми не можемо бути в ньому впевненими.

Я, насправді, дуже чекаю коли CSS custom functions увійдуть до Baseline, бо це, насправді, дуже зручна можливість. До речі, рука в руку з ними йде й чернетка CSS mixins, на які я теж чекаю. Про міксіни поговоримо згодом, коли до них дійдуть руки хоча б у Chromium, але маю сподівання, що чекати лишилося недовго.

Чого я з таким нетерпінням чекаю на момент, коли ці специфікації увійдуть до Baseline? Бо це означатиме початок забуття SCSS та всіляких інших LESS, до яких я відчуваю безпідставну та пекучу неприязнь. А якщо цей допис набере бодай 100 реакцій, то я розповім чому. А як не набере, то не розповім.

@babichdev

***
Що почитати:
MDN: @function CSS at-rule
MDN: Using CSS custom functions

Що почитати душнілам:
W3C: CSS Functions and Mixins Module

P.S. Товариство, дуже сподіваюсь, що у вас все добре, наскільки це може бути.
Росія — кончена країна кончених людей.
Тримаймося.