Moderní CSS

Container queries

@media se ptá na šířku obrazovky. @container se ptá na šířku místa, kde prvek zrovna je.

Jedna a táž karta v širokém obsahu a v úzkém sidebaru. Každá se zařídí podle svého místa. V náhledu vidíte, kam se dostaneme.

Začátek

Stejná karta na dvou místech

Stránka má široký hlavní obsah a úzký sidebar. V obou je stejná karta: obrázek nahoře, text pod ním. V širokém obsahu je obrázek zbytečně velký.

Chtěli bychom: kde je karta široká, obrázek vlevo a text vedle. Kde je úzká, nechat to pod sebou.

Past

Zkusíme `@media`

Od šířky obrazovky 700 px dáme kartě obrázek vlevo a text vpravo. V hlavním obsahu to vypadá skvěle.

Jenže obrazovka je široká pro obě karty, takže se změnila i ta v úzkém sidebaru a text se tam mačká. @media neví, kde karta stojí.

Vlastnost · 1

Kontejner a `@container`

Hlavní obsah a sidebar označíme jako kontejnery: container-type: inline-size. Pak místo @media napíšeme @container. Podmínka se teď ptá na šířku nejbližšího kontejneru, ve kterém karta je.

Hlavní obsah má přes 400 px, karta v něm je vodorovně. Sidebar je užší, karta v něm zůstala pod sebou. Stejná třída, stejné CSS, jiný výsledek.

Vlastnost · 2

Jednotka kontejneru `cqi`

Kontejnery mají i vlastní jednotku. 1cqi je 1 % šířky kontejneru. Nadpis karty pak bude ve větším kontejneru větší, v menším menší, a clamp() ho udrží v rozumných mezích.

cqi (container query inline) je obdoba vw, jen se neměří okno, ale kontejner. Funkce clamp() je z lekce Výpočty.

Responzivita

Na telefonu pod sebou

Na telefonu se sidebar přesune pod obsah. To je layout stránky, a to pořád řeší @media. Karty samotné ale žádné další pravidlo nepotřebují: obě jsou v úzkém kontejneru, takže se zařídí samy.

Dělba práce: @media pro layout celé stránky, @container pro komponenty, které se můžou objevit kdekoli.

Shrnutí

Komponenta podle svého místa

Ano

container-type: inline-size na wrapperu
@container pro karty a další opakované komponenty
jednotka cqi s clamp()
@media pro layout celé stránky

Ne

@media pro komponentu, která je na víc místech
container-type na samotné kartě: @container se ptá na předka, ne na prvek sám

← Zpět do rejstříku