CSS: Введення в контейнерні запити

Контейнерні запити дають змогу стилізувати елементи залежно від доступного простору. Вони дозволяють створювати стійкі адаптивні компоненти.

Контейнерні запити дають змогу стилізувати елементи залежно від доступного простору. Вони дозволяють створювати стійкі компоненти, які можна адаптувати до безкінечної кількості невідомих компоновок. Це відрізняється від медіа-запитів області перегляду, які вимагають, щоб зміни стилю були узгоджені на рівні сторінки.

Контейнерні запити vs Медіа-запити області перегляду

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

У чуйному дизайні області перегляду популярно пов'язувати макетну сітку з контрольними точками. Ці контрольні точки зазвичай пов'язані зі спрощеними розмірами пристроїв, як показано на малюнку вище, такими як мобільні пристрої, планшети та настільні комп'ютери.

Важливо, що ці точки зупинки не обов'язково враховують окремі елементи та компоненти на екрані, а більше фокусуються на тому, як компоненти перетікають у певну сітку. Іноді великі компоненти, такі як навігація, трансформуються окремо від сітки, але зазвичай вони використовують глобальні контрольні точки.

Давайте порівняємо чуйний дизайн області перегляду із чуйним дизайном контейнера.

Нижче наведено варіанти карткового компонента. Ці варіанти візуалізуються з використанням контейнерних запитів, які не залежать від області перегляду. Стилі карток налаштовуються залежно від доступного місця.

Примітка: Контейнерні запити підтримуються у всіх вічнозелених браузерах, починаючи з Firefox 110. Щоб розширити підтримку старих браузерів, доступний поліфіл.

По-перше, вивчимо синтаксис для створення контейнерних запитів.

Визначення контейнерних запитів

Перший крок – вказати, що елемент є контейнером, використовуючи властивість container-type. Найбільш фундаментальне й нині найкраще підтримуване значення — inline-size , що у режимі горизонтального листа відповідає ширині елемента. Таким чином, це визначення означає, що ми маємо намір підтримувати запит на основі внутрішнього розміру елемента .container:

.container


container-type: inline-size;

>

Додавання container-type до елемента офіційно позначає його як контейнер.

Далі ми створимо справжній контейнерний запит, використовуючи контейнерне at-правило @container, що приймає параметр, який виглядатиме знайомим, якщо ви коли-небудь призначали медіа-запити.

Наступне правило @container говорить, що якщо знаходиться всередині контейнера шириною 40ch і більше, його колір має бути blue:

@container
(min-width: 40ch)


h2


color: blue;

>

>

Примітка: Правила, які ми розміщуємо у контейнерному запиті, не впливатимуть на стиль самого контейнера, а лише на його дочірні елементи. Це означає, що ми не можемо стилізувати контейнер із власного запиту. Але ми можемо стилізувати контейнер із запитом контейнера, якщо цей контейнер має предок, який також визначений як контейнер.

Щоб врахувати більше, ніж горизонтальний режим запису, ми можемо оновити наш запит, щоб використовувати логічний синтаксис inline-size , а не засновувати запит на ширині контейнера:

@container
(inline-size > 40ch)


h2


color: blue;

>

>

Є більше параметрів, ніж просто inline-size, включаючи block-size та aspect-ratio. Щоб дізнатися більше про доступні контейнерні запити розміру та про те, як їх використовувати, перегляньте офіційну специфікацію.

Оновлення компонента картки

Якби ми хотіли створити компонент картки без контейнерних запитів, ми можемо створювати варіанти з допомогою класів модифікаторів. Для варіацій розміру карти ці модифікатори можуть бути прив'язані до контрольних точок. Це означає, що якби картка мала модифікатор, його можна було б змінити, коли ширина області перегляду потрапила в цю точку зупинки/breakpoint.

На наступному зображенні показано три варіанти розміру карти та відповідні їм класи модифікаторів, де верхня .card буде вважатися за замовчуванням.

Ось жива демонстрація CodePen карти, що реагує на область перегляду, зображена вище. (Змініть розмір області перегляду, щоб побачити, як працюють різні стилі)

Тепер давайте змінимо перспективу і подумаємо, як ми оброблятимемо ці варіанти карт, використовуючи контейнерні запити.

Ми, як і раніше, використовуватимемо верхню карту за умовчанням, що насправді означає — вона буде застосовуватися за найвужчої ширини. Це також буде резервна версія, де контейнерні запити не підтримуються - важливий сценарій, який слід враховувати до тих пір, поки контейнерні запити не досягнуть повної підтримки.

Ми встановимо макет карти середнього розміру (з горизонтальною орієнтацією), щоб він активувався коли ширина контейнера становить 350px або більше.

Нарешті, ми налаштуємо макет карти на використання її зображення як тло, коли ширина контейнера становить 600px або більше.

Це створить елемент карти, який може адаптуватися залежно від розміру контейнерів картки. Пограйте з наступною демонстрацією CodePen, щоб побачити це у дії. (Зверніть увагу на вказівник Resize me! у нижньому правому куті, за його допомогою можна змінювати розмір.)

Знайомство з контейнерними запитами CSS

Контейнерні запити CSS — цікавий додаток до світу CSS. У цій статті ми дамо вам базове уявлення про контейнерні запити CSS та про те, як вони працюють.

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

А що, якщо я розповім вам, що існує новий метод, який називають контейнерними запитами, який можна використовувати для стилізації елементів, просто враховуючи розмір їхнього контейнера?

Контейнерні запити CSS вирішують більшість проблем, пов'язаних із написанням медіа запитів, і дозволяють розробникам застосовувати стилі на основі розміру контейнера без урахування області перегляду або інших характеристик пристрою.

У цій статті я докладно розповім про контейнерні запити CSS з прикладами коду, щоб дати вам краще розуміння.

Що таке контейнерні запити CSS

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

Основи контейнерних запитів CSS

Перш ніж розпочати роботу з контейнерними запитами CSS, необхідно зрозуміти кілька моментів.

1. Контекст іменування

Назва контексту вмісту в контейнерних запитах CSS дозволяє за допомогою at-правила @container націлюватися на певний контекст вмісту за допомогою різних стилів.

Для створення контексту вмісту необхідно застосувати властивість container до елемента і задати йому ім'я за допомогою властивості container-name . Крім того, необхідно вибрати значення size, inline-size або normal для властивості container-type. Ці значення роблять наступне:

• size : У контейнерному запиті враховуватимуться лінійні та блокові розміри батьківського контейнера.
• inline-size : У контейнерному запиті враховуватимуться лише лінійні розміри контейнера.
• normal : Елемент залишається контейнером запиту лише для стилю контейнера, але не для запитів розміру контейнера.

У наступному прикладі створюється контекст вкладення з ім'ям navbar і він використовується в at-правилі @container для застосування стилів, коли мінімальна ширина контексту вкладення navbar становить 500 px або більше.

.container


container-type: inline-size;

container-name: navbar;

>



@container navbar  (min-width: 500px)


.ul


display: grid;

>

>

2. Одиниці довжини контейнерного запиту CSS

При використанні контейнерних запитів для додавання стилів до контейнера необхідно використовувати одиниці довжини контейнерного запиту. Ці одиниці визначають довжину елемента проти розміром контейнера. Компоненти, що використовують одиниці довжини, можуть застосовуватись у різних контейнерах без необхідності визначення нових значень довжини.

Одиницями довжини контейнерного запиту є:

• cqw: 1% від ширини контейнера.
• cqh: 1% від висоти контейнера.
• cqi: 1% від внутрішнього розміру контейнера.
• cqb: 1% від розміру блоку контейнера.
• cqmin : cqmin — це найменше значення cqi або cqb .
• cqmax : cqmax — найбільше значень cqi чи cqb .

У цьому прикладі розмір контейнера використовується для встановлення розміру шрифту заголовка.

@container
(min-width: 500px)


.nav-bar h1


font-size:
max(1.75em, 1.1em + 2cqi);

>

>

3. Зворотна сумісність для контейнерних запитів

В даний час контейнерні запити підтримуються не у всіх версіях браузерів. Тому необхідно забезпечити сумісність стилів із браузерами, які не підтримують контейнерні запити. У таких випадках як резервні стилі можна використовувати властивість grid або медіа запити.

.container

display: grid;

grid-template-columns: 1fr 1fr;

>



@media
(max-width: 700px)


.container

grid-template-columns: 1fr;

>

>

Написання першого контейнерного запиту

Для використання контейнерних запитів спочатку необхідно визначити елемент контейнера, який слугуватиме посиланням на запит. Потім за допомогою правила @container можна вказати стилі, які застосовуються залежно від розмірів контейнера.

Наприклад, припустимо, що у вас є елемент контейнера з класом .container і ви хочете застосувати різні стилі в залежності від ширини контейнера. Для цього можна використовувати наступний CSS:

/* html file */  
html
lang="en">

head>

title>Container Queriestitle>

head>

body>

div
class="container">

div
class="paragraph">

Lorem Ipsum is.  
div>

div
class="paragraph">

Lorem Ipsum is.  
div>

div
class="paragraph">

Lorem Ipsum is.  
div>

div>

body>

html>





/* css file */  
.container container-type: inline-size;  
container-name: maincontainer;  
display: grid;  
gap: 1em;  
grid-template-columns: 1fr 1fr 1fr;  
>



@container maincontainer (min-width: 500px) grid-template-columns: 1fr;  
>



.paragraph background: rgb(231, 227, 227);  
padding:1em;  
font-size: 18px; 
>

У цьому прикладі перший блок стилів буде застосовуватися до всіх класів .container за промовчанням. Другий блок стилів буде застосовуватися до класів .container із шириною не менше 500 px.

Умови медіа-запиту min-width , max-width , min-height та max-height можна використовувати у правилі @container для вказівки розмірів контейнера, на який повинні спрацьовувати стилі. Для більш складних запитів можна комбінувати ці умови з допомогою логічних операторів (наприклад, and , or ).

Підтримка браузерів

В даний час контейнерні запити підтримуються в наступних версіях браузерів:

• Chrome 105
• Edge 150
• Firefox 110
• Opera 91
• Safari 16

Детальну специфікацію підтримки браузерів можна знайти тут.

Переваги контейнерних запитів

• Легко перебрати усі дочірні елементи.
• Легко вибрати конкретний елемент за допомогою синтаксису селектора.
• У рядок запиту можна включити ім'я класу користувача, яке замінить значення класу користувача при виведенні сторінки.
• Немає необхідності в окремому контейнері для посилання та її цілі. Можна використовувати той самий контейнер для обох.
• Контейнерні запити дуже прості у використанні та розумінні.
• Створюйте гнучкі макети без використання плаваючих елементів або властивостей відображення.

Недоліки контейнерних запитів

• Не всі браузер підтримують контейнерні запити. Як контейнерні запити, так і блоки запитів підтримуються лише у Firefox 109 та пізніших версіях.
• Доводиться додавати класи для кожного батьківського елемента, який потрібно вибрати. Це може стати проблемою, якщо на сторінці є багато елементів, а вручну потрібно додати класи лише для деяких із них.
• Доводиться використовувати селектор CSS, що не дуже зручно для користувачів, не знайомих з CSS.
• Не можна використовувати відносні чи абсолютні позиції для дочірніх елементів.
• Спадкування від батьківських елементів неможливо, якщо не використовувати плаваючі елементи.

Висновок

Контейнерні запити CSS — цікавий додаток до світу CSS. Вони є альтернативою медіа-запитам, і розробники можуть легко працювати зі стилями, заснованими на розмірах контейнерів. Сподіваюся, що ця стаття дала вам базове уявлення про контейнерні запити CSS і як вони працюють.

CSS наступного покоління: @container

У світі веб-розробки CSS продовжує еволюціонувати, пропонуючи розробникам нові можливості для стилізації елементів. Одним із таких нововведень є директива @container. У цій статті ми докладно розглянемо, що таке @container, як вона працює, і як використовувати її для створення адаптивних веб-інтерфейсів.

Що таке @container?

Директива @container CSS дозволяє застосувати стилі до елементів залежно від розмірів їх батьківських контейнерів. Ця нововведення стала важливим інструментом для побудови адаптивних інтерфейсів, забезпечуючи гнучкість та точність у стилізації.

Основні поняття

Контейнер: HTML-елемент, у якому знаходяться інші елементи і який використовується визначення умов застосування стилів.

Правило контейнера: умова, за якої застосовуються певні стилі залежно від розмірів контейнера.

Як працює @container?

Використання @container ґрунтується на завданнях умов, які мають бути виконані для застосування стилів. Розглянемо приклад базового використання:

@container (min-width: 300px) < .child-element < background-color: lightblue; >>

У цьому прикладі, якщо ширина контейнера досягає або перевищує 300 пікселів, елемент із класом child-element отримає світло-блакитний колір тла.

Застосування @container у практиці

Створення контейнера

Щоб використовувати директиву @container, необхідно спочатку визначити контейнер. Це робиться за допомогою властивості container-type.

Завдання умов

Після того, як контейнер визначено, можна застосовувати правила @container для елементів усередині нього. Наприклад:

@container (min-width: 500px) < .content < font-size: 1.5rem; >>

Тут, коли ширина контейнера досягає 500 пікселів, розмір шрифту елемента з вмістом класу збільшується.

Переваги використання @container

Однією з головних переваг використання @container є можливість створювати більш гнучкі та адаптивні дизайни. Замість орієнтуватися лише на розміри вікна браузера, можна враховувати розміри конкретних елементів-контейнерів.

Застосування стилів на основі розмірів контейнерів, а не вікна браузера може покращити продуктивність сайту, оскільки стилі застосовуються тільки в потрібних випадках, знижуючи навантаження на браузер.

Практичні приклади

Приклад 1: адаптивна сітка

Item 1
Item 2
Item 3

.container < container-type: inline-size; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); > @ container (min-width: 600px) < .grid-item < background-color: lightgreen; >>

Приклад 2: адаптивні картки

Card 1
Card 2
 CSS: .card-container < container-type: inline-size; > @ container (min-width: 400px) < .card < border: 2px solid blue; >>

Підтримка браузерів та поліфіли

Розуміння підтримки різних функцій CSS у браузерах є важливим для розробки кросбраузерних рішень. На момент написання статті @container підтримується останніми версіями більшості сучасних браузерів, таких як Chrome, Firefox та Safari. Тим не менш, є браузери, в яких підтримка може бути або бути частковою.

Поліфіли

Якщо ваш проект вимагає підтримки старих браузерів, можна скористатися поліфілами. Наприклад, бібліотека contain-polyfill надає можливість використовувати @container у браузерах, які не підтримують цю функцію.

Таблиця підтримки браузерів

Інтеграція з сучасними фреймворками та бібліотеками

Інтеграція @container із сучасними фреймворками та бібліотеками, такими як React та Vue, досить проста. Наприклад, у React можна використовувати @container для створення адаптивних компонентів таким чином:

const MyComponent = () => (  
Content goes here
 ); const styles = `.container < container-type: inline-size; > @ container (min-width: 500px) < .content < font-size: 1.5rem; >> `; export default MyComponent;

Поради та рекомендації

• Використовуйте для створення компонентів, які пристосовуються до розмірів батьківського елемента.
• Поєднуйте медіазапити для більш гнучкої адаптивної верстки.
• Слідкуйте за оновленнями підтримки браузерів та використовуйте поліфіли за потреби.

Висновок

Директива @container для створення адаптивів. Вона дозволяє застосовувати стилі на основі розмірів контейнерів, забезпечуючи більшу гнучкість та покращуючи продуктивність.