CSS
CSS

CSS @container queries

Patrik KeblušekPatrik Keblušek,

Klasické @media queries zná a používá každý frontenďák. Podle velikosti celého viewportu upravujeme styly pro dané komponenty, ale nemůžeme styly pro komponenty upravovat na základě velikosti daných komponent. S tímto nám pomohou container queries.

Díky @container queries dokážeme reagovat na rozměry našeho kontejneru (width a height). Tady je rozdíl s @media queries, které dokážou reagovat pouze na rozměry viewportu. Díky tomu dokážeme vytvářet komponenty s nezávislými styly. 

Pro ještě lepší vysvětlení, představte si, že máme vedle sebe fotku a text. V jeden moment se nám fotka a text vedle sebe nevejde a budeme chtít CSS upravit tak, aby se text zalomil pod fotku. Uděláme to tak, že se odchytíme na celý viewport a řekneme mu, že je-li celý viewport menší nebo roven 768px, tak text bude pod obrázkem. Zde může nastat problém, když na jedné stránce budete mít 3 takové boxy vedle sebe a na druhé pouze 1. V případě 3 boxů vedle sebe by se text mohl zalamovat pozdě a naopak v případě jednoho příliš brzy.

Proč se ale v této komponentě odchytáváme na celý viewport, když chci upravit pouze komponentu v něm? V container queries lze říci, že pokud je náš kontainer obrázku s textem široký méně než 500px, pak text zalomíme. Naše komponenta se tak bude chovat správně i když na jedné stránce bude 1 a na druhé stránce 3 vedle sebe.

Jak na container queries

V prvním příkladu budeme pracovat s tímto jednoduchým HTMLkem:

<div class="article-container">
   <article class="article">
      <h1>Nadpis článku</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quas assumenda tempora, voluptates labore odit perferendis, suscipit, pariatur aliquam unde ratione eveniet dignissimos, obcaecati praesentium id eaque vero cupiditate. Unde.</p>
   </article>
</div>

Nejprve si musíme definovat kontejner. Uděláme to tak, že použijeme klasický CSS selektor a nastavíme mu vlastnost container-type.

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

container type přijímá 3 hodnoty:

  • size - query je založena na inline (řádek) a block (sloupec) rozměrech kontejneru
  • inline-size - query je založena na inline (řádek) rozměrech kontejneru
  • normal - výchozí hodnota, element není kontejnerem

Následně můžeme v kotnajneru měniť CSSka na základě nejakého breakpointu:

@container (max-width: 500px) {
   .article {
      color: red;
   }
}

Příklad si můžete vyzkoušet na JSFiddle.

@container pravidlo výše najde nejbližší definovaný kontajner a sleduje jeho rozměry. Je zde ale možnost kontajner pojmenovat a odchytávat sa na jeho název.

Container name (pojmenování kontajnerů)

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

Název kontajneru a typ kontajneru můžeme definovat i pomocí zkratky container. (container: articleContainer / inline-size).

Máme-li definici kontajneru pojmenovanou, tak se pak na konkrétné kontajner můžete odchytávat takto:

@container articleContainer (max-width: 500px) {
   .article {
      color: red;
   }
}

Název kontejneru je case-sensitive, to znamená, že pojmenování articleContainer není totéž jako article-container nebo ArticleContainer.

Vzhledem k tomu, že container name sice specifikovat nemusíte, tak určitě doporučujeme, abyste to dělali. Vyhnete se tak problémům při velkých CSS.

@container pravidlo

@container pravidlo nám dovoluje psát podmínky jako >, >=, < a <=. Pro ujasnění dávam příklad: 

@container (width > 500px) {}

nebo

@container (width <= 500px) {}

Dále v @container můžeme psát logická klíčová slova jako and, or nebo not.

@container (width > 500px) and (height > 500px) {}

nebo

@container (width < 500px) or (width > 800px) {}

Nové responzivní jednotky

CSS container queries sebou přinášejí i nové jednotky, které nám mohou pomoci psát responzivní weby. Tyto jednotky určují velikost vzhledem k rozměrům kontejneru. Jedná se o:

  • cqw - 1% šířky kontejneru
  • cqh - 1% výsky kontejneru
  • cqi - 1% inline-size kontejneru
  • cqb - 1% block-size kontejneru
  • cqmin - menší hodnota od cqi nebo cqb
  • cqmax - větší hodnota od cqi nebo cqb

Nasledující příklad ukazuje použití nových jednotek v praxi.

@container (max-width: 768px) {
   .article h2 {
      font-size: 3cqi;
   }
}

Podpora kontejnerových dotazů v prohlížečích

Dnešní podpora container queries už vůbec není špatná. Podporují jej všechny moderní prohlížeče. o Internet Explorery se už bavit nebudeme. Podpora CSS Container Queries na Can I use.

Přestože container queries podporují dnes již všechny moderní prohlížeče, byl bych s jeho použitím ještě opatrný. Většina prohlížečů začala podporovat container queries až v průběhu či koncem roku 2022, dokonce Firefox až v lednu 2023. Mohlo by se stát, že někteří uživatelé ještě nebudou mít aktualizované prohlížeče a kontejner queries jim tak nebudou fungovat.

Zdroje

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
https://blog.logrocket.com/css-container-queries-guide/