Zpět

Container queries. Revoluce při tvorbě webů?

11. 02. 2023
CoreApp Technologies s.r.o.
web
zajímavost

Minulý rok byla v css představena nová možnost přizpůsobování webu vůči cílovému zařízení prostřednictvím @container queries. V Coreapp Technologies tvoříme moderní weby a proto jsme se na tento nový prvek zaměřili i my. Jak se liší oproti media queries, jak se používá a kde najde uplatnění při realizaci Vašeho webu?

Container queries. Revoluce při tvorbě webů?

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 výšší 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 aktualizovovat 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í.

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é.

Pokud zvažujete vývoj webu nebo webové aplikace na zakázku, tak nás neváhejte kontaktovat.

Mohlo by vás zajímat:

Zaujali jsme Vás nebo si ještě nejste jistí?
Neváhejte nás kontaktovat!

Další články

5 důvodů, proč si nechat vytvořit profesionální webové stránky

5 důvodů, proč si nechat vytvořit profesionální webové stránky

20. 05. 2023
CoreApp Technologies s.r.o.
web

Mnoho firem a živnostníků, co jsou na trhu už delší dobu, zapomínají na aktualizaci svých webových stránek a svoji webovou prezentaci. I když webové stránky nemusí být jejich hlavním komunikačním a prodejním kanálem, tak zapomínat na online nástroje a komunikaci se může vymstít.

3 nejčastější útoky na WordPress weby

3 nejčastější útoky na WordPress weby

30. 04. 2023
CoreApp Technologies s.r.o.
web
zajímavost

V dalším článku se zaměříme na 3 nejčastější hackerské útoky na Wordpress weby. Popíšeme jak probíhají a v čem jsou nebezpečné. Zmíníme možnou obranu proti nim a taky co dělat, když se s nějakým takovým útokem na našem webu potkáme.

Jaký je rozdíl mezi Alfa a Beta testováním?

Jaký je rozdíl mezi Alfa a Beta testováním?

19. 04. 2023
CoreApp Technologies s.r.o.
zajímavost
Testování aplikací

Alfa a beta testování je součástí vývojového cyklu každého projektu a je jednou z finání fází při při dokončování softwarového produktu před jeho uvedením na trh. Jaký je ale rozdíl mezi těmito testovacími fázemi? A kdo tyto testy provádí?