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

Vzhůru dolů 04.06.2021 23:01 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 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: main, aside .media-object @container } Stručně vysvětlíme: Vlastnost contain s hodnotou size tvoří zapouzdří prvek do samostatné jednotky, která zde poslouží jako rodič pro container query. Klíčové slovo @container je jako @media, jen necílí na šířku viewportu, ale šířku rodiče. Jak to otestovat? Potřebujete Chromium 91.0.4459.0 . Jděte do vlaječkového nastavení: chrome://flags. 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ě! Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .