Bygning af komplekse, fleksible layouter har aldrig været let, men CSS3 har helt sikkert fjernet en masse hovedpine.
CSS3 funktioner som flexbox og Kolonner har lavet nogle komplekse layouter en reel mulighed, og nu bliver de forbundet med en af de nyeste tilføjelser til webdesigners værktøjskasse: CSS-regioner.
CSS-regioner giver dig mulighed for at flyde indhold i en række containere på en enkelt side. Det svarer til at forbinde tekstbokse i en applikation som InDesign. Det muliggør nogle layouter, der tidligere kun var mulige ved at sløre linjen mellem data og stilarter.
Browserunderstøttelsen er som altid langt fra perfekt.
CSS-regioner er stadig et udkast, hvilket betyder, at det er eksperimentelt. Oprindeligt var den eneste browser, der faktisk understøtter det, Internet Explorer 10 (nej, jeg taler ikke); selv om IE10 bruger en iframe som indholdskilde.
Safari hævder at tilbyde support med et præfiks.
I Chrome kan du teste funktionen ved at åbne din browser, skrive 'om: flag' og aktivere 'aktiver-eksperimentelle webkit-funktioner' og genstarte din browser.
Heldigvis er der også en JavaScript polyfill skabt af Adobe, der bringer funktionaliteten af CSS-regioner til browsere, der i øjeblikket ikke understøtter det, kan du finde dette videre github.
Da formålet med CSS-regioner er at tillade vores tekst at flyde på tværs af forskellige containere, er det første, du har brug for, noget tekst:
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 så nogle beholdere:
Nu har vi grundindholdet oprettet, vi kan forbinde containerne ved hjælp af flow-in og flow-from, du vil bemærke i det eksempel jeg har tilføjet -webkit- præfiks.
.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;}Hvis du tjekker dette i en browser, vil du se, at teksten lige kommer fra en boks til en anden. Hvis du nu placerer disse beholdere, fortsætter teksten med at flyde korrekt.
-webkit-flow-into: text-flow;Denne ejendom accepterer en identifikator som værdien. Når du overfører en værdi til denne ejendom, bliver det en del af et navngivet flow, og det vil stoppe gengivelsen som en del af sidestrømmen. Du kan annullere det ved at indstille ejendommen til ingen.
Navnet på det flow du bruger er vilkårlig, bare sørg for at du er konsistent. Vi kan også have flere elementer med samme navngivne strømning som i vores eksempel ovenfor.
Dette er ikke begrænset til tekst, vi kan også flyde billeder, lister og mange andre typer HTML-indhold.
-webkit-flow-from: text-flow;Vi bruger denne egenskab til at angive hvilket element (er) der skal modtage den angivne strøm.
Værdien er navnet på den strøm, som vi angav for flow-in- egenskaben.
Husk, at eventuelle indholdsstile, som du anvender på den oprindelige tekst, opretholdes på tværs af strømmen. Så hvis du farve teksten blå, forbliver den blå på tværs af alle beholdere.
For at se et eksempel på CSS-regioner i aktion, tag et kig på denne pen Jeg skabte.
Browserstøtten til CSS-regioner er for øjeblikket svag, og der er en lang vej at gå, før vi kan stole på det på daglig basis. Men den fleksibilitet, den giver, er fantastisk, og når fuld støtte er på plads, tror jeg, at CSS-regionerne vil være gåteknikken i de kommende år.
Er du spændt af CSS-regioner? Hvor hurtigt tror du, vi kan bruge dem? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, vandfald billede via cuatrok77.