Att bygga komplexa, flexibla layouter har aldrig varit lätt, men CSS3 har säkert tagit bort en hel del huvudvärk.
CSS3 funktioner som Flexbox och kolumner har gjort några komplexa layouter en riktig möjlighet och nu förenas de med en av de nyaste tilläggen till webbdesignerns verktygslåda: CSS-regioner.
CSS-regioner tillåter dig att flytta innehållet i en serie behållare på en enda sida. Det motsvarar att länka textrutor i en applikation som InDesign. Det möjliggör några layouter som tidigare endast var möjliga genom att suddiga linjen mellan data och stilar.
Som alltid är webbläsarstöd långt ifrån perfekt.
CSS-regioner är fortfarande ett utkast, vilket innebär att det är experimentellt. Ursprungligen var den enda webbläsaren som faktiskt stöder den Internet Explorer 10 (nej, jag skämtar inte); även om IE10 använder en iframe som innehållskälla.
Safari hävdar att erbjuda stöd med ett prefix.
I Chrome kan du testa funktionen genom att öppna webbläsaren, skriva "om: flaggor" och aktivera "aktivera experimentella webbkit-funktioner" och starta om webbläsaren.
Lyckligtvis finns det också en JavaScript polyfill skapad av Adobe som ger funktionaliteten i CSS-regioner till webbläsare som för närvarande inte stöder det, kan du hitta det här github.
Eftersom syftet med CSS-regioner är att tillåta att texten flyter över olika behållare, är det första du behöver lite 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.Och sedan några behållare:
Nu har vi det grundläggande innehållet, vi kan koppla behållarna med flöde in och flöde från, så kommer du att märka i det exempel jag har lagt till -webkit- prefixet.
.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;}Om du kontrollerar detta i en webbläsare ser du att texten bara flyter från en ruta till en annan. Om du nu placerar de behållarna fortsätter texten att flöda ordentligt.
-webkit-flow-into: text-flow;Den här egenskapen accepterar en identifierare som värdet. När du överför ett värde till den här egenskapen blir det en del av ett navigerat flöde och det kommer att sluta rendering som en del av sidflödet. Du kan avbryta det genom att inte ställa in egenskapen.
Namnet på flödet du använder är godtyckligt, bara se till att du är konsekvent. Vi kan också ha flera element med samma namngivna flöde som i vårt exempel ovan.
Det här är inte begränsat till text, vi kan också flytta bilder, listor och många andra typer av HTML-innehåll.
-webkit-flow-from: text-flow;Vi använder den här egenskapen för att ange vilket element som ska ha det angivna flödet.
Värdet är namnet på flödet som vi angav för flödesinmatningen .
Tänk på att alla innehållsstilar som du tillämpar på originaltexten bibehålls över flödet. Så om du färgar texten blå blir den blå över alla behållare.
För att se ett exempel på CSS-regioner i aktion, ta en titt på den här penna Jag skapade.
Webbläsarsupporten för CSS-regioner är för närvarande svag, och det finns en lång väg att gå innan vi kan lita på det dagligen. Men den flexibilitet som den erbjuder är fantastisk, och när fullt stöd är på plats tror jag att CSS-regionerna kommer att gå till teknik under de kommande åren.
Är du upphetsad av CSS-regioner? Hur snart tror du att vi kan använda dem? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, vattenfall bild via cuatrok77.