Martin Michálek Martin Michálek  – 2. 4. 2021

Container Queries jsou něco jako Media Queries, jen pro konkrétní komponenty, nikoliv pro celou stránku.

Jde o něco, co samozřejmě v CSS chceme a při vývoji webů opravdu hodně potřebujeme. Webdesign je totiž stále více o komponentách, nikoliv o stránkách.

Před lety to ale ještě nevypadalo dobře. Provázely to různé problémy a hlášení o „nemožné implementaci“. Napsal jsem o tom podrobný článek na blog a prohlásil, že to asi nikdy nedostaneme. Jsem rád, že jsem se spletl.

Po letech vývoje do Chromia přichází experimentální implementace, která by toto dovolovala.

Vezměme tuto krátkou ukázku:

/* (1) Container */  
main,
aside {
  contain: size;
}

.media-object {
  display: grid;
  gap: 1em;
}

/* (2) Container Query */
@container (max-width: 45em) {
  .media-object {
    grid-template: 'img content' auto / auto 1fr;
  }
}

Stručně vysvětlíme:

  1. Vlastnost contain s hodnotou size tvoří zapouzdří prvek do samostatné jednotky, která zde poslouží jako rodič pro container query.
  2. Klíčové slovo @container je jako @media, jen necílí na šířku viewportu, ale šířku rodiče.

Jak to otestovat?

  1. Potřebujete Chromium 91.0.4459.0 (nyní dostupné v Chrome Canary).
  2. Jděte do vlaječkového nastavení: chrome://flags.
  3. Povolte možnost „Enable CSS Container Queries”.

Demo:

Více informací:

Jen prosím pozor, implementace je označena jako experimentální a zatím ani není potvrzená od CSS Working Group ze standardizační organizace W3C. Od možnosti takové věci používat jsme ještě pořád daleko. Ale vypadá to velice nadějně!

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?