Опановуємо логічні комбінації CSS Container Queries: вивільняємо силу логічних операторів запитів

CSS container queries є значною еволюцією в адаптивному веб-дизайні, дозволяючи розробникам стилізувати елементи на основі розміру або стану їхнього батьківського елемента, а не області перегляду. Хоча базові container queries пропонують потужну гнучкість, їхній справжній потенціал розкривається у поєднанні з логічними операторами. Цей вичерпний посібник розповість, як використовувати 'and', 'or' та 'not' для створення складних, адаптивних макетів, що точно реагують на умови контейнера.

Що таке CSS Container Queries? Короткий огляд

Перш ніж занурюватися в логічні оператори, давайте швидко пригадаємо, що таке container queries і чому вони важливі.

Традиційні медіа-запити базуються на області перегляду, тобто реагують на розмір вікна браузера. З іншого боку, container queries дозволяють застосовувати стилі на основі розміру або стану батьківського елемента. Це забезпечує більш детальний контроль і дозволяє створювати справді компонентний адаптивний дизайн.

Наприклад, у вас може бути компонент картки, який відображає інформацію. За допомогою container queries ви можете налаштувати макет картки залежно від її ширини всередині батьківського контейнера. Якщо картка достатньо широка, вона може відображати інформацію в рядку; якщо вузька — елементи розташовуватимуться вертикально. Це гарантує, що картка виглядатиме добре незалежно від того, де вона розміщена на сторінці.

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

• size: Запит до контейнера реагуватиме як на ширину, так і на висоту контейнера.
• inline-size: Запит до контейнера реагуватиме на вбудований розмір (зазвичай ширина в горизонтальному режимі письма).

Ви також можете використовувати container-name, щоб дати контейнеру ім'я, що дозволяє націлюватися на конкретні контейнери, якщо у вас є вкладені контексти контейнерів.

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

Сила логічних операторів: 'and', 'or' та 'not'

Справжня магія починається, коли ви поєднуєте container queries з логічними операторами. Ці оператори дозволяють створювати складні умови, які націлені на конкретні стани контейнера. Давайте розглянемо кожен оператор детально.

Оператор 'and': вимога кількох умов

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

Приклад: Припустимо, у вас є контейнер, який ви хочете стилізувати по-різному, якщо він одночасно ширший за 500px і має певний атрибут даних.

            
.card-container {
  container-type: inline-size;
}

@container (min-width: 500px) and (data-theme="dark") {
  .card {
    background-color: #333;
    color: #fff;
  }
}

            

              
                Copy
              
            
          

У цьому прикладі .card матиме темний фон і білий текст, тільки якщо .card-container має ширину не менше 500px і атрибут data-theme встановлений як "dark". Якщо будь-яка з умов не виконується, стилі всередині правила @container не будуть застосовані.

Практичні випадки використання 'and':

• Умовні зміни макета: Зміна макета компонента на основі його ширини та наявності певного класу або атрибута даних (наприклад, перехід від одноколонкового до багатоколонкового макета, якщо контейнер достатньо широкий і має клас "featured").
• Стилізація для конкретної теми: Застосування різних стилів на основі теми контейнера (наприклад, темний або світлий режим) та його розміру.
• Стилізація на основі стану: Налаштування вигляду компонента залежно від його розміру та того, чи перебуває він у певному стані (наприклад, "active", "disabled").

Оператор 'or': задоволення принаймні однієї умови

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

Приклад: Припустимо, ви хочете застосувати певний стиль до контейнера, якщо він або менший за 300px, або більший за 800px.

            
.card-container {
  container-type: inline-size;
}

@container (max-width: 300px) or (min-width: 800px) {
  .card {
    padding: 1em;
    border: 1px solid #ccc;
  }
}

            

              
                Copy
              
            
          

У цьому прикладі .card матиме відступ 1em і рамку, якщо .card-container або менший за 300px, або більший за 800px. Якщо ширина контейнера знаходиться в діапазоні від 300px до 800px (включно), стилі всередині правила @container не будуть застосовані.

Практичні випадки використання 'or':

• Обробка різних розмірів екранів: Застосування різних стилів до компонента залежно від того, чи відображається він на маленькому екрані (наприклад, мобільний пристрій) або на великому (наприклад, настільний комп'ютер).
• Надання альтернативних макетів: Пропонування різних макетів для компонента залежно від того, чи має він певну кількість доступного простору.
• Підтримка кількох тем: Застосування стилів, специфічних для різних тем або варіацій компонента. Наприклад, компонент може мати різні стилі залежно від того, використовується він у "основному" чи "другорядному" контексті, незалежно від його розміру.

Оператор 'not': виключення конкретних умов

Оператор not дозволяє застосовувати стилі, коли певна умова не виконується. Це може бути корисно для інвертування логіки або націлювання на контейнери, які не мають певної характеристики.

Приклад: Припустимо, ви хочете застосувати певний стиль до контейнера, якщо він не має класу "featured".

            
.card-container {
  container-type: inline-size;
}

@container not (.featured) {
  .card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

            

              
                Copy
              
            
          

У цьому прикладі .card матиме тінь, якщо .card-container не має класу "featured". Якщо контейнер має клас "featured", тінь не буде застосована.

Практичні випадки використання 'not':

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

Поєднання логічних операторів для складних умов

Справжня сила логічних операторів container query полягає в їх поєднанні для створення складних умов. Ви можете використовувати дужки для групування умов і контролю порядку виконання, подібно до того, як це робиться в JavaScript або інших мовах програмування.

Приклад: Припустимо, ви хочете застосувати певний стиль до контейнера, якщо він ширший за 600px і або має клас "primary", або не має класу "secondary".

            
.card-container {
  container-type: inline-size;
}

@container (min-width: 600px) and (.primary or not(.secondary)) {
  .card {
    border: 2px solid blue;
  }
}

            

              
                Copy
              
            
          

У цьому прикладі .card матиме синю рамку, якщо виконані наступні умови:

1. .card-container ширший за 600px.
2. І або:
• .card-container має клас "primary".
• Або .card-container не має класу "secondary".

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

На що варто звернути увагу при поєднанні операторів:

• Пріоритет операторів: Хоча дужки допомагають контролювати порядок виконання, важливо розуміти пріоритет логічних операторів за замовчуванням. У CSS container queries and має вищий пріоритет, ніж or. Це означає, що (A or B) and C відрізняється від A or (B and C). Використовуйте дужки, щоб явно визначити порядок виконання та уникнути неоднозначності.
• Читабельність: Складні умови можуть стати важкими для читання та розуміння. Розбивайте складні умови на менші, більш керовані частини, використовуючи дужки та коментарі для покращення читабельності та підтримки.
• Тестування: Ретельно тестуйте ваші container queries з різними розмірами та станами контейнерів, щоб переконатися, що вони працюють належним чином. Використовуйте інструменти розробника в браузері для перевірки застосованих стилів та переконання, що застосовуються правильні правила.

Реальні приклади та випадки використання

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

Приклад 1: Гнучкий компонент картки

Розглянемо компонент картки, який відображає інформацію по-різному залежно від своєї ширини. Ми можемо використовувати container queries з логічними операторами для керування макетом та виглядом картки.

            

  

    
    
Card Title
    
Card Description
    Learn More
  


            

              
                Copy
              
            
          

            
.card-container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px; /* Example max-width */
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 1em;
}

.card img {
  width: 100%;
  max-width: 200px; /* Example max-width for the image */
  margin-bottom: 1em;
}

/* Default styles for small containers */
@container (max-width: 400px) {
  .card {
    text-align: center;
  }

  .card img {
    margin: 0 auto 1em;
  }
}

/* Styles for medium containers */
@container (min-width: 401px) and (max-width: 600px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card img {
    margin: 0 1em 0 0;
  }

  .card > *:not(img) {
    flex: 1;
  }
}

/* Styles for large containers */
@container (min-width: 601px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card img {
    margin: 0 1em 0 0;
  }

  .card > *:not(img) {
    flex: 1;
  }
}

            

              
                Copy
              
            
          

У цьому прикладі:

• Для контейнерів шириною 400px або менше елементи картки центрують.
• Для контейнерів шириною від 401px до 600px зображення та текст відображаються в рядку, з зображенням ліворуч.
• Для контейнерів ширших за 600px макет залишається таким же, як і для середнього контейнера, але елементи вирівнюються по початку.

Приклад 2: Адаптивне навігаційне меню

Іншим практичним прикладом є адаптивне навігаційне меню, яке пристосовується до доступного простору. Ми можемо використовувати container queries для перемикання між компактним меню на основі іконок та повним текстовим меню.

            


            

              
                Copy
              
            
          

            
.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 0.5em;
}

.nav-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
}

.nav-container li a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  padding: 0.5em;
}

.nav-container i {
  font-size: 1.2em;
  margin-right: 0.5em;
}

.nav-container span {
  display: none; /* Hide text by default */
}

/* Styles for larger containers */
@container (min-width: 400px) {
  .nav-container span {
    display: inline; /* Show text for larger containers */
  }
}

            

              
                Copy
              
            
          

У цьому прикладі елементи навігаційного меню спочатку відображають лише іконки. Коли контейнер стає ширшим за 400px, текстові мітки відображаються поруч з іконками, створюючи більш описове меню.

Приклад 3: Інтернаціоналізація та напрямок тексту

Container queries також можуть бути корисними для адаптації макетів залежно від напрямку тексту. Це особливо важливо для міжнародних веб-сайтів, які підтримують мови, що пишуться справа наліво (RTL), наприклад, арабську або іврит.

            

  

    
Article Title
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
  


            

              
                Copy
              
            
          

            
.article-container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.article {
  padding: 1em;
}

/* Default styles for LTR (Left-to-Right) */
.article h1 {
  text-align: left;
}

/* Styles for RTL (Right-to-Left) */
@container (dir(rtl)) {
  .article h1 {
    text-align: right;
  }
}

            

              
                Copy
              
            
          

У цьому прикладі запит dir(rtl) націлений на контейнери з атрибутом dir, встановленим як "rtl". Коли напрямок тексту - RTL, заголовок вирівнюється по правому краю. Це гарантує, що макет належним чином адаптований для різних мов та систем письма.

Найкращі практики використання логічних операторів Container Query

Щоб максимально ефективно використовувати логічні оператори container query, дотримуйтесь наступних найкращих практик:

• Починайте з простого: Починайте з базових container queries і поступово додавайте логічні оператори за потреби. Уникайте створення надто складних умов, які важко зрозуміти та підтримувати.
• Використовуйте значущі імена: Використовуйте описові імена класів та атрибути даних, щоб зробити ваші container queries більш читабельними та самодокументованими.
• Пріоритет читабельності: Використовуйте дужки та коментарі для покращення читабельності складних умов. Розбивайте довгі умови на менші, більш керовані частини.
• Тестуйте ретельно: Тестуйте ваші container queries з різними розмірами та станами контейнерів, щоб переконатися, що вони працюють належним чином. Використовуйте інструменти розробника в браузері для перевірки застосованих стилів та переконання, що застосовуються правильні правила.
• Враховуйте продуктивність: Хоча container queries загалом є продуктивними, складні умови потенційно можуть вплинути на продуктивність. Уникайте створення надто складних умов, які вимагають від браузера значних обчислень.
• Прогресивне покращення: Використовуйте container queries як прогресивне покращення. Забезпечте резервний варіант для браузерів, які не підтримують container queries, щоб гарантувати базовий рівень функціональності.
• Документуйте свій код: Чітко документуйте ваші container queries та логіку, що лежить в їх основі. Це полегшить вам та іншим розробникам розуміння та підтримку коду в майбутньому.

Висновок: приймаючи гнучкість логіки Container Query

Логічні оператори CSS container query надають потужний набір інструментів для створення високоадаптивних та гнучких макетів. By combining 'and', 'or', and 'not', you can create complex conditions that target specific container states and apply styles accordingly. Це дозволяє більш детально контролювати ваші макети та створювати справді компонентний адаптивний дизайн.

Оскільки підтримка container query продовжує зростати, оволодіння цими техніками ставатиме все більш важливим для front-end розробників. Дотримуючись найкращих практик, викладених у цьому посібнику, та експериментуючи з різними випадками використання, ви зможете розкрити весь потенціал container queries та створювати виняткові користувацькі досвіди на широкому спектрі пристроїв та контекстів.

Прийміть гнучкість логіки container query та підніміть свої навички адаптивного дизайну на новий рівень!