JavaScript не потрібен?! Як стилізувати сторінку залежно від теми OS, для чого container query та як робити ефект скла на чистому CSS
Дай боже здоровʼя, спільното! Як у вас погода? А то ми з Христиною Гаранчук учора якраз верстали погодний віджет під час стриму на каналі «Сергій Бабіч та Дивовижний світ веброзробки».
Під час цієї невеличкої вправи з верстки ми використали декілька цікавих, однак маловідомих прийомів, які, хоч і досить давно доступні в усіх бравзерах, тим не менш не набули достатньої популярности серед розробників.
Почнемо з subgrid. Не думаю, що варто пояснювати, що таке grid
, а от що таке попередній термін, має сенс трошки оглянути. Так от, значення subgrid
для властивостей grid-template-rows
та grid-template-columns
дозволяє успадкувати сітку від батьківського елемента. Таким чином можна задати глобальну наскрізну структуру, наприклад, клясичну
Також нарешті дійшли руки спробувати властивість color-scheme та колірну функцію light-dark(). Перше дозволяє контролювати, чи елемент має реагувати на зміну глобальної теми, чи то бравзера, чи то OS, а функція light-dark
дозволяє задати пари кольорів, відповідних активній темі. Що примітно, цей функціонал залежить саме від системної теми.
Спробували ще container query. Якщо коротко, то медіа-запит, що залежить не від стану вʼюпорту, або, як ми звикли казати, вікна бравзера, а від розмірів батьківського елемента. Це дозволяє набагато гнучкіше керувати стилями, покладаючись на контекст відображення конкретного компоненту замість усього вікна.
А наприкінці побавилися з backdrop-filter, досягши ефекту напівпрозорого скла. А докинувши туди дрібку тіней та різноколірних бордерів, взагалі вдалося отримати ефект «світіння» нашого віджета.
Ну а побачити на власні очі, як всі ці можливості застосовуються на практиці, можна, переглянувши запис учорашнього етеру:
Також до 12:00 понеділка, себто 25 листопада, ви маєте нагоду узяти участь в розіграші книги Грокаємо алгоритми: Ілюстрований посібник для програмістів і допитливих. Умови дуже прості: в описі до відео є банка для донатів, а кожні 50 гривень, що ви туди покладете, будуть вашим додатковим квиточком у цій лотереї.
Дякую за увагу! Не забудьте підписатися на канал ;)
P.S. Напишіть в коментарях, які фічі HTML, CSS чи JS ви хотіли б побачити у наступних випусках.
21 коментар
Додати коментар Підписатись на коментаріВідписатись від коментарів