Jak používat kontejnerové dotazy v CSS

Po dlouhou dobu byly dotazy na média jediným způsobem, jak zajistit, aby návrhy uživatelského rozhraní reagovaly na různé velikosti obrazovky. Ale i to mělo svá omezení. Jedním z největších problémů s používáním dotazů na média bylo, že jste mohli stylovat prvek pouze v reakci na změny velikosti obrazovky, nikoli jeho nejbližší kontejnerový prvek.

K vyřešení tohoto problému byly zavedeny kontejnerové dotazy. Také vzrostly s popularitou frameworků jako React a Vue.js, které fungují tak, že vytvářejí modulární „komponenty“ uživatelského rozhraní. Naučte se používat kontejnerové dotazy k vytváření responzivních prvků ve vašem CSS.

Kód použitý v tomto článku je k dispozici v tomto úložiště GitHub a můžete jej používat zdarma pod licencí MIT.

Proč byste měli používat kontejnerové dotazy CSS?

Abychom pochopili důležitost kontejnerových dotazů, použijme příklad, který usnadní pochopení konceptu. Nejprve z něj ale musíte naklonovat startovací kód úložiště GitHub.

Jakmile úspěšně naklonujete repo, spusťte kód. Najdete webovou stránku podobnou následujícímu obrázku:

Zde máte rozložení mřížky obsahující dva sloupce: hlavní část a postranní panel. Hlavní část vypadá dobře, ale postranní panel (který je mnohem menší než hlavní obsah) vypadá trochu pomačkaný.

Rozložení je responzivní. Když prohlížeč zmenšíte, uvidíte, že se karta přemění na svislý sloupec:

Jinými slovy, když obsah začne být nečitelný, rozvržení se změní na svislý sloupec, kde je obrázek naskládán na obsah. Tento efekt přichází jako výsledek dotazů na média, což je jediný způsob, jak můžete určit velikost prvků na základě celé velikosti vaší obrazovky.

V tomto případě, kdykoli je vaše obrazovka menší než 800 pixelů, naskládáte vše na sebe pomocí Zarovnání Flexboxu. Na větších obrazovkách umístíme obsah vedle sebe:

@media(max. šířka: 800 pixelů) {
.Kartu {
flex-direction: sloupec;
 }
.záhlaví karty { 
šířka: 100%;
 }
}

Nejdelší dobu byly mediální dotazy jedním z hlavních principy webdesignu pro vytváření responzivních rozvržení pomocí CSS (a pro většinu věcí to bylo dost dobré). Ale určitě narazíte na scénáře, kdy dotazy na média prostě nebudou stačit, nebo nebudou alespoň vhodným řešením.

Jedním z těchto scénářů je situace, kdy máte postranní panel (jako my ve výše uvedeném příkladu). V těchto případech, kdy máte postranní panel, budete muset přímo vybrat kartu postranního panelu a pokusit se ji zmenšit:

.postranní panel.Kartu {
/* Zmenšení karty postranního panelu */
}
@media(max. šířka: 800 pixelů) {
/* Upravte styl stránky, když je obrazovka užší než 800 pixelů */
}

Pokud pracujete s mnoha prvky, může to být docela komplikované, protože musíte ručně vybrat všechny prvky a změnit jejich velikost. Skončili byste s větším kódem a další složitostí.

Zde by mohly být užitečné kontejnerové dotazy. Namísto toho, abyste byli nuceni používat jako svou velikost zobrazovanou oblast, můžete jako kontejner použít jakýkoli prvek na stránce. Pak může mít tento kontejner své vlastní šířky, na kterých byste zakládali své mediální dotazy.

Jak vytvořit dotaz na kontejner

Chcete-li vytvořit kontejnerový dotaz, začněte zacílením na prvek, který chcete použít jako kontejner (v tomto případě na hlavní sekci a postranní panel). Uvnitř bloku musíte nastavit kontejnerového typu na inline-size:

hlavní, .postranní panel {
kontejnerového typu: inline-size
}

Když uložíte svůj soubor CSS, na stránce se nic nezmění. Nyní však můžete pomocí kontejnerových dotazů změnit velikost a styl karet vnořených do hlavní sekce a sekce postranního panelu. V následujícím dotazu na kontejner měníte karty na svislé sloupce na obrazovkách o šířce 500 pixelů nebo méně:

@kontejner(max. šířka: 500 pixelů) {
.Kartu {
flex-direction: sloupec;
 }
.záhlaví karty {
šířka: 100%;
 }
}

Bude to fungovat jako běžný mediální dotaz. Ale místo měření velikosti obrazovky měříte velikost kontejnerů (hlavní a postranní sekce). Nyní, když má váš kontejner 500 pixelů nebo více, použijete horizontální zobrazení. Jinak použijete vertikální (výchozí pro flexbox).

Z obrázku výše můžete vidět, že postranní panel má svislou formu, protože je menší než 500 pixelů. Zatímco hlavní obsah si zachovává své horizontální rozložení, protože je větší než 500 pixelů. Pokud zmenšíte svůj prohlížeč, postranní panel i hlavní obsah budou používat vertikální zarovnání, když dosáhnou velikosti 500 pixelů nebo méně.

Kontejnerový dotaz je neuvěřitelně výkonný, protože vám umožňuje měnit velikost věcí na základě kontejneru namísto celé šířky prohlížeče. To je užitečné zejména při práci s komponentami (jako je React nebo Vue).

Pomocí kontejnerových dotazů můžete snadno změnit velikost komponent uživatelského rozhraní na základě jejich kontejneru, což vám umožní vytvářet zcela samostatné komponenty.

Pojmenování kontejnerů

Když vytvoříte a @kontejner dotaz, nejprve hledá kontejner prvku, na který v dotazu cílíte. V našem případě by to byl hlavní kontejner a kontejner postranního panelu.

A i kdyby byly karty uvnitř jiného kontejneru, prostě by to ignorovalo ostatní kontejnery a vybralo by si kontejner, který je k sobě nejbližší. Toto je součástí širšího Koncept CSS známý jako selektory CSS.

V následujícím příkladu jsme změnili prvek těla na kontejner:

tělo {
kontejnerového typu: inline-size;
}

Nyní máme tři samostatné kontejnery: tělo, hlavní a vedlejší část. Ve výchozím nastavení jsou karty, na které cílíme v dotazu na kontejner, blíže k hlavní části nebo postrannímu panelu než k tělu. Používá tedy sekce hlavního a postranního panelu jako kontejnery pro dotaz na kontejner.

Chcete-li toto chování přepsat, musíte udělat dvě věci. Nejprve musíte svému prvku těla přiřadit název kontejneru:

tělo {
kontejnerového typu: inline-size;
název-kontejneru: tělo;
}

Poté, když vytvoříte dotaz na kontejner, musíte zadat název kontejneru @kontejner.

@kontejner tělo (max. šířka:1000 pixelů){
/* Pravidla CSS, která cílí na kontejner těla */
}

To je užitečné, pokud chcete jako kontejner použít konkrétní prvek, nikoli kontejner nejbližší prvku, na který cílíte. Jinými slovy, můžete vybrat jakýkoli konkrétní kontejner a doladit rozvržení.

Kontejnerové jednotky

Další skvělou funkcí kontejnerů je, že můžete používat kontejnerové jednotky. Tyto jednotky fungují stejně jako jednotky výřezu (všechny jsou přesně stejného typu jednotek). Kontejnerové jednotky však používají cqw (pro nastavení šířky) a cqh (pro nastavení výšky). Tyto jednotky určují přesnou šířku a výšku vašeho kontejneru.

Kontejnerové dotazy CSS vám umožňují používat konkrétní prvky jako referenční body pro vaše mediální dotazy. Tato technika je docela užitečná pro vytváření modulárních, samostatných prvků, které mohou stát nezávisle bez ohledu na kontejner, ve kterém se nacházejí. Kontejnerové dotazy však používají stejné principy jako mediální dotazy a toto je něco, co byste měli ovládat, pokud chcete být špičkovým vývojářem CSS o jedno procento.