JavaScript не потрібен?! Як стилізувати сторінку залежно від теми OS, для чого container query та як робити ефект скла на чистому CSS

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Дай боже здоровʼя, спільното! Як у вас погода? А то ми з Христиною Гаранчук учора якраз верстали погодний віджет під час стриму на каналі «Сергій Бабіч та Дивовижний світ веброзробки».

Під час цієї невеличкої вправи з верстки ми використали декілька цікавих, однак маловідомих прийомів, які, хоч і досить давно доступні в усіх бравзерах, тим не менш не набули достатньої популярности серед розробників.

Почнемо з subgrid. Не думаю, що варто пояснювати, що таке grid, а от що таке попередній термін, має сенс трошки оглянути. Так от, значення subgrid для властивостей grid-template-rowsта grid-template-columnsдозволяє успадкувати сітку від батьківського елемента. Таким чином можна задати глобальну наскрізну структуру, наприклад, клясичну 12-колонкову, та дотримуватися її і всередині інших компонентів.

Також нарешті дійшли руки спробувати властивість color-scheme та колірну функцію light-dark(). Перше дозволяє контролювати, чи елемент має реагувати на зміну глобальної теми, чи то бравзера, чи то OS, а функція light-dark дозволяє задати пари кольорів, відповідних активній темі. Що примітно, цей функціонал залежить саме від системної теми.

Спробували ще container query. Якщо коротко, то медіа-запит, що залежить не від стану вʼюпорту, або, як ми звикли казати, вікна бравзера, а від розмірів батьківського елемента. Це дозволяє набагато гнучкіше керувати стилями, покладаючись на контекст відображення конкретного компоненту замість усього вікна.

А наприкінці побавилися з backdrop-filter, досягши ефекту напівпрозорого скла. А докинувши туди дрібку тіней та різноколірних бордерів, взагалі вдалося отримати ефект «світіння» нашого віджета.

Ну а побачити на власні очі, як всі ці можливості застосовуються на практиці, можна, переглянувши запис учорашнього етеру:

Також до 12:00 понеділка, себто 25 листопада, ви маєте нагоду узяти участь в розіграші книги Грокаємо алгоритми: Ілюстрований посібник для програмістів і допитливих. Умови дуже прості: в описі до відео є банка для донатів, а кожні 50 гривень, що ви туди покладете, будуть вашим додатковим квиточком у цій лотереї.

Дякую за увагу! Не забудьте підписатися на канал ;)

P.S. Напишіть в коментарях, які фічі HTML, CSS чи JS ви хотіли б побачити у наступних випусках.