#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-ruleMDN: Using CSS custom functions Що почитати душнілам:W3C: CSS Functions and Mixins ModuleP.S. Товариство, дуже сподіваюсь, що у вас все добре, наскільки це може бути.Росія — кончена країна кончених людей.Тримаймося.