Bygging flókinna sveigjanlegra skipulags hefur aldrei verið auðvelt, en CSS3 hefur vissulega tekið af sér mikla höfuðverk.
CSS3 lögun eins Flexbox og Dálkar hafa gert nokkrar flóknar skipanir raunveruleg möguleiki og nú eru þeir tengdir með einum af nýjustu viðbótunum við verkfærakistu vefhönnuðar: CSS Regions.
CSS svæði leyfa þér að flæða efni í röð gáma á einni síðu. Það samsvarar því að tengja textaskipanir í forriti eins og InDesign. Það gerir mögulegar nokkrar skipanir sem áður voru aðeins mögulegar með því að óska línu milli gagna og stíl.
Eins og alltaf, vafrinn stuðningur er langt frá fullkominn.
CSS Svæði er enn drög, sem þýðir að það er tilraunaverkefni. Upphaflega eina vafrinn til að styðja það var Internet Explorer 10 (nei, ég er ekki að grínast); þó að IE10 noti iframe sem innihaldsefni.
Safari krafa að bjóða upp á stuðning með forskeyti.
Í Chrome er hægt að prófa eiginleikann með því að opna vafrann þinn, sláðu inn 'um: fánar' og virkja 'virkja-tilraunaglugga-eiginleika' og endurræsa vafrann þinn.
Til hamingju er það líka a JavaScript polyfill búin til af Adobe sem færir virkni CSS-svæðanna við vafra sem styðja það ekki, þú getur fundið þetta á github.
Þar sem tilgangur CSS-svæðanna er að leyfa texta okkar að renna yfir mismunandi gáma, þá er það fyrsta sem þú þarft að fá texta:
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.Og svo nokkrar ílát:
Nú höfum við grunn innihald sett upp, við getum tengt gámana með flæði inn og flæði frá, þú munt taka eftir í dæminu sem ég hef bætt við -webkit- forskeyti.
.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;}Ef þú skoðar þetta í vafra munt þú sjá að textinn rennur bara frá einum kassa til annars. Ef þú stillir þá ílátið mun textinn halda áfram að flæða rétt.
-webkit-flow-into: text-flow;Þessi eign samþykkir auðkenni sem gildi. Þegar þú sendir gildi til þessa eignar verður það hluti af heiti flæðis og það mun hætta að renna sem hluti af blaðsíðunni. Þú getur hætt við það með því að setja eignina að enginn.
Heiti flæðisins sem þú notar er handahófskennt, bara vertu viss um að þú sért í samræmi. Við getum líka haft marga þætti með sömu nafni flæði eins og í dæminu hér fyrir ofan.
Þetta er ekki takmörkuð við texta, við getum líka flutt myndir, listi og margar aðrar tegundir af HTML efni.
-webkit-flow-from: text-flow;Við notum þessa eign til að tilgreina hvaða þáttur (s) ætti að fá tiltekna flæði.
Verðmæti er nafn flæðisins sem við tilgreindum fyrir flæði inn í eign.
Hafðu í huga að allir innihaldsstílar sem þú sækir um upprunalegu textann verður haldið yfir flæði. Svo ef þú lita textann bláan, mun hún vera blár yfir allar ílát.
Til að sjá dæmi um CSS svæði í aðgerð, skoðaðu þetta penni Ég bjó til.
Stuðningur við vafra fyrir CSS-svæðin er nú veik og það er langur vegur til að fara áður en við getum treyst á það á hverjum degi. En sveigjanleiki sem það býður upp á er frábært, og þegar fullur stuðningur er til staðar held ég að CSS-svæðin verði að fara í tækni fyrir komandi ár.
Ertu spenntur eftir CSS svæðum? Hversu fljótt heldurðu að við getum notað þau? Láttu okkur vita í athugasemdunum.
Valin mynd / smámynd, foss mynd með cuatrok77.