Container queries: най-голямата революция в CSS респонсив дизайна

От години ние, уеб разработчиците разчитаме на т.нар. media queries, за да създаваме респонсив дизайн – уеб страници, които се държат добре на всякакви устройства и резолюции. И въпреки че те са мощен инструмент, не винаги са достатъчно гъвкави, колкото ни се иска. Един и същ компонент може да се използва в различен контекст и места, например – в sidebar, в header, в основното съдържание – и въпросните media queries, които работят за един сценарий, може да не са подходящи за друг.

CSS container queries променят играта, позволявайки на елементите да се адаптират спрямо родителския контейнер, а не цялата страница (мисли в модули 😉 ). А това означава повече гъвкавост и по-модулен подход към дизайна.

Какво представляват container queries?

Container queries са нова функционалност в CSS, която позволява стиловете на даден елемент да се променят въз основа на размерите на неговия родителски контейнер, а не на цялата страница. Това е изключително полезно при изграждане на компонентно-базиран дизайн, където един и същ елемент може да се използва в различен контекст и размери, без да се налага да се разчита на глобални media query-та.

За разлика от традиционните media queries, които взимат предвид ширината на прозореца на браузъра, container query-тата работят на локално ниво. Това означава, че компонентите могат да се адаптират динамично според мястото, където са поставени, а не според цялостния изглед на страницата.

Как работят CSS container queries?

Container query-тата позволяват на даден елемент да променя стила си спрямо размерите на своя контейнер, а не спрямо изгледа на целия екран. Това е особено полезно при модулен дизайн, където един и същ компонент може да бъде поставен в различни секции с различни размери и все пак да изглежда добре.

Основни стъпки:

1. определяме контейнера, като зададем container-type.
2. създаваме контейнерни заявки с @container.
3. променяме стила на дъщерните елементи според ширината на контейнера.

/* Декларираме контейнера */
.card-container {
  container-type: inline-size;
}

/* Стилове на картата в зависимост от контейнера */
@container (min-width: 300px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

@container (max-width: 299px) {
  .card {
    display: block;
  }
}

Ето ти и демонстрация в още един пример:

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

@container (min-width: 600px) {
  .article {
    font-size: 18px;
    columns: 2;
  }
}

@container (max-width: 599px) {
  .article {
    font-size: 16px;
    columns: 1;
  }
}

Тук .article автоматично ще премине от единична колона към двуколонен изглед, когато контейнерът е по-широк от 600px.

Разликата между container queries и media queries

Пример за стандартно media query:

@media (min-width: 768px) {
  .sidebar {
    width: 300px;
  }
}

С container queries същото може да бъде постигнато така:

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

@container (min-width: 300px) {
  .sidebar {
    width: 300px;
  }
}

Разликата? Media queries гледат цялата страница, докато container queries гледат само контейнера.

Защо да използваме Container Queries?

• по-добра гъвкавост – компонентите могат да бъдат преизползваеми и да изглеждат добре във всеки контекст.
• по-малко код – намалява нуждата от сложни медийни заявки.
• компонентно-базиран подход – подходящ за дизайн системи и UI библиотеки.
• лесна поддръжка – не се налага да пренаписвате код при промяна на структурата на страницата.
• по-лесна интеграция с CSS Grid и Flexbox – позволява адаптивно разпределение на съдържанието вътре в контейнера.

Поддръжка в браузърите

CSS container queries вече се поддържат в последните версии на Chrome, Edge и Safari. Firefox все още работи по пълната им имплементация, но се очаква скоро да бъде добавена. Както винаги, съветвам те да провериш актуалното състояние в Can I use, преди да ги използваш в продукционен проект.

Вместо заключение

Container queries представляват огромна стъпка напред за уеб разработчиците. С тях получаваме по-гъвкави, адаптивни и модулни компоненти, които могат да работят в различни контексти, без сложни хакове и екстра код. Ако все още не си ги тествал, окуражавам те да започнеш да експериментираш и да направиш дизайна си още по-динамичен!