Vytváření komplexních, flexibilních rozvržení nebylo nikdy snadné, ale CSS3 určitě odebral mnoho bolesti hlavy.
Funkce CSS3, jako je Flexbox a Sloupce vytvořily některé složité rozvržení skutečnou možnost a nyní se k nim přidává jeden z nejnovějších přírůstků nástrojové řady webových návrhářů: CSS Regions.
Oblasti CSS vám umožňují přenášet obsah do série kontejnerů na jedné stránce. Je to ekvivalent propojení textových polí v aplikaci, jako je aplikace InDesign. Umožňuje některé rozvržení, které byly dříve možné pouze rozmazáním čáry mezi daty a styly.
Jako vždy, podpora prohlížeče není zdaleka dokonalá.
CSS Regions je stále návrh, což znamená experimentální. Zpočátku byl jediným prohlížečem, který je skutečně podporoval, Internet Explorer 10 (ne, nedělám si legraci); i když IE10 používá jako zdroj obsahu iframe.
Safari tvrdí, že nabízí podporu s předponou.
V prohlížeči Chrome můžete tuto funkci otestovat otevřením prohlížeče, zadáním příznaku "o: příznaky" a aktivací funkce "enable-experimental-webkit" a restartováním prohlížeče.
Naštěstí existuje také a JavaScript polyfill vytvořené společností Adobe, která přináší funkčnost regionů CSS prohlížečům, které ji momentálně nepodporují github.
Vzhledem k tomu, že účelem CSS regionů je umožnit našemu textu plynout přes různé kontejnery, první věc, kterou potřebujete, je nějaký text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus imperdiet purus ac eleifend. Vivamus posuere pellentesque nibh vel laoreet. Donec et sem odio. Donec sit amet lorem hendrerit, faucibus libero et, mattis lacus. Suspendisse dapibus rutrum felis quis interdum. Integer tincidunt, orci at condimentum placerat, est nulla sollicitudin velit, vitae gravida nisi odio ac ligula. Sed hendrerit ac massa vel ultricies. Vestibulum commodo, orci et tincidunt laoreet, enim tellus aliquet orci, quis dapibus sapien tellus eu felis. Etiam non arcu at eros luctus consectetur vitae eget nunc. In felis ipsum, vehicula ac mauris vel, porttitor gravida neque.Quisque orci turpis, aliquam vel tortor convallis, ullamcorper molestie nisl. Sed aliquet dignissim lorem non fringilla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue erat ac hendrerit ullamcorper. Morbi facilisis urna nunc, eget pretium lectus congue vitae.A pak některé nádoby:
Nyní máme nastaven základní obsah, můžeme propojit kontejnery pomocí průtoku a průtoku, všimnete si, že v příkladu jsem přidal předponu -webkit .
.text {-webkit-flow-into: text-flow;padding: 0;margin: 0;color: #F2F2F2;font-family: helvetica, arial;font-size: 16px;line-height: 22px;}.containers{-webkit-flow-from: text-flow;background: #333333;padding: 5px;margin-top: 100px;width: 200px;height: 300px;float: left;margin-right: 20px;}Pokud zaškrtnete toto nastavení v prohlížeči, uvidíte, že text bude plynout z jednoho pole na jiný. Pokud nyní umístíte tyto kontejnery, text bude pokračovat správně.
-webkit-flow-into: text-flow;Tato vlastnost přijímá identifikátor jako hodnotu. Když předáte hodnotu této vlastnosti, stává se součástí pojmenovaného průtoku a zastaví vykreslování jako součást toku stránky. Tuto vlastnost můžete zrušit nastavením vlastnosti na hodnotu none.
Název toku, který používáte, je libovolný, jen se ujistěte, že jste konzistentní. Můžeme mít také více prvků se stejným jmenovitým průtokem jako v našem příkladu výše.
Toto není omezeno na text, můžeme také přenášet obrázky, seznamy a mnoho dalších druhů obsahu HTML.
-webkit-flow-from: text-flow;Tuto vlastnost používáme, abychom určili, který prvek (prvky) by měl obdržet určený tok.
Hodnota je název toku, který jsme zadali pro tok in- property.
Mějte na paměti, že všechny styly obsahu, které použijete pro původní text, budou udržovány v celém toku. Takže pokud zbarvíte text modře, zůstane modrý ve všech kontejnerech.
Chcete-li vidět příklad regionů CSS v akci, podívejte se toto pero Vytvořil jsem.
Podpora prohlížečů pro regiony CSS je v současné době slabá a je tu ještě dlouhá cesta, než se na ní budeme moci každý den spoléhat. Flexibilita, kterou nabízí, je však fantastická a jakmile bude mít plná podpora, myslím, že regiony CSS budou pro budoucnost technikou go-to.
Jste nadšeni regiony CSS? Jak brzy si myslíte, že je budeme moci používat? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, obraz vodopádu přes cuatrok77.