Aktuální situace
V dnešní době, když chce kodér přizpůsobit web cílovému zařízení, musí se uchýlit buď k matematickým funkcím a relativním jednotkám, @media queries nebo nějaké kombinaci těchto dvou přístupů. Je to poměrně snadný způsob, jak vytvářet responsivní weby, především s funkcemi, které poskytují css frameworky jako bootstrap a jemu podobné. Tento přístup má i svoje úskalí. Pro nováčka je obtížné se vyznat ve všech relativních jednotkách a když už je vidí použité, tak pořád nezná jejich přesný účel (např. plovoucí velikosti fontu). Další z problému je závislost na velikosti okna místo toho, aby se daly prvky měnit podle velikosti prostoru, ve kterém jsou umístěné. Poslední problém řeší @container queries, které k tomu přidávají ještě další vylepšení.
Novinka ve formě @container queries
Výše zmíněná novinka v css dává konečně možnost kodérovi přizpůsobovat jednotlivé prvky podle velikosti containeru, ve kterém jsou umístěné. Kromě velikosti lze upravovat prvky i podle hodnot stylů vypočítaných prohlížečem na daném containeru. To se hodí například, pokud budete chtít na tmavém containeru zobrazit světlý text a naopak. Možnost reagovat na css vlastnosti ještě není podporovaná. Jednotlivé containery se dají pojmenovat, takže i když je jich více zanořených v sobě, dá se cíleně odkazovat na vyšší než je nejbližší danému prvku.
A jak je to s podporou? Podle caniuse je podpora poměrně solidní. Tím, že se prohlížeče snaží co nejrychleji aktualizovat svoje jádra aby plnila co nejnovější populární trend, nebývá v poslední době problém používat moderní a nové specifikace ať už se jedná o css nebo JavaScript.
Použití
Použití je poměrně snadné. Prvku, který má sloužit jako container, stačí nastavit css vlastnost container-type: inline-size, čímž se vytvoří nový obsahový blok. Pokud chcete container i pojmenovat, pak k této vlastnosti přidejte ještě vlastnost container-name: name-of-container, nebo je můžete skombinovat do jedné container: name-of-container / inlize-size.
Odkazovat se na něj pak můžete přes @container query, ve kterém se podle podmínky buď provede obsah těla nebo ne. Podmínka se může skládat z více podpodmínek spojených logickými spojkami.Podmínky můžou být podle velikosti, css vlastností nebo proměnných. Více se můžete podívat v ukázce.
Jednotky
Nebyla by to správná aktualizace css bez nových jednotek. K container queries přibylo několik relativních jednotek, které sice na první pohled vypadají jako změť písmenek, ale svůj význam mají.
qw - 1% šířky containeru
qh - 1% výšky containeru
qi - 1% inline* velikosti containeru
qb - 1% block* velikosti containeru
qmin - menší z hodnot qi a qb
qmax - větší z hodnot qi a qb
Další použití a vývoj při tvorbě webů
Přestože je příchod container queries v css velkou revolucí, jak se budou psát responsivní weby, tak media queries nejsou stále odepsané. Ať už kvůli globálnímu charakteru, tak kvůli podpoře, kdy u container queries naprosto chybí možnost používat styly v podmínkách. Další důvod je ten, že je media query mnohem více zažité a v používaných css frameworcích více zakořeněné.
