Container Queries jsou teď experimentálně v Chrome Canary

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.

Container Queries přistály v Chrome Canary.
Je fakt mazec, jak jde ten vývoj rychle.https://t.co/pLFKHnBs55

— Martin Michálek (@machal) April 1, 2021

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:

• Bram.us: https://cdpn.io/bramus/debug/LYxNpeE
• Una Kravets: https://codepen.io/una/pen/LYbvKpK?editors=1100

Více informací:

• Bram.us: Container Queries are coming to Chromium!
• Piccalil.li: Container Queries are actually coming

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ě!