Bygging av komplekse, fleksible layouter har aldri vært lett, men CSS3 har sikkert tatt bort mye hodepine.
CSS3 funksjoner som flexbox og kolonner har gjort noen komplekse layouter en reell mulighet, og nå blir de sammen med en av de nyeste tilleggene til webdesignerens verktøykasse: CSS-regioner.
CSS-regioner tillater deg å flyte innhold i en serie containere på en enkelt side. Det er tilsvarende å koble tekstbokser i et program som InDesign. Det gjør det mulig å lage noen oppsett som tidligere kun var mulige ved å sløre linjen mellom data og stiler.
Som alltid er nettleserstøtten langt fra perfekt.
CSS-regioner er fortsatt et utkast, noe som betyr at det er eksperimentelt. I utgangspunktet var den eneste nettleseren som faktisk støttet den, Internet Explorer 10 (nei, jeg tuller ikke); selv om IE10 bruker en iframe som innholdskilden.
Safari hevder å tilby støtte med et prefiks.
I Chrome kan du teste funksjonen ved å åpne nettleseren din, skrive 'om: flagg' og aktivere 'aktiverings-eksperimentelle webkit-funksjoner', og deretter starte nettleseren din på nytt.
Heldigvis finnes det også a JavaScript-polyfil laget av Adobe som bringer funksjonaliteten til CSS-regioner til nettlesere som for øyeblikket ikke støtter den, kan du finne dette på GitHub.
Siden formålet med CSS-regioner er å la teksten flyte over forskjellige beholdere, er det første teksten du trenger:
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å noen beholdere:
Nå har vi grunnleggende innhold satt opp, vi kan koble beholderne ved hjelp av flyt inn og flyt fra, du vil legge merke til i eksempelet jeg har lagt til -webkit- prefiks.
.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 sjekker dette i en nettleser, ser du at teksten bare kommer fra en boks til en annen. Hvis du plasserer disse beholderne, fortsetter teksten å flyte riktig.
-webkit-flow-into: text-flow;Denne egenskapen aksepterer en identifikator som verdien. Når du overfører en verdi til denne egenskapen, blir den en del av en navngitt flyt, og den stopper gjengivelsen som en del av sidestrømmen. Du kan avbryte det ved å sette eiendommen til ingen.
Navnet på strømmen du bruker er vilkårlig, bare sørg for at du er konsistent. Vi kan også ha flere elementer med samme navngitte strøm som i vårt eksempel ovenfor.
Dette er ikke begrenset til tekst, vi kan også flyte bilder, lister og mange andre typer HTML-innhold.
-webkit-flow-from: text-flow;Vi bruker denne egenskapen til å spesifisere hvilket element (e) som skal motta den angitte strømmen.
Verdien er navnet på strømmen som vi angav for innstrømmingsegenskapen .
Husk at eventuelle innholdsstiler du søker på den opprinnelige teksten, opprettholdes over hele flytningen. Så hvis du farger teksten blå, vil den forbli blå over alle beholdere.
For å se et eksempel på CSS-regioner i aksjon, ta en titt på denne pennen Jeg skapte.
Nettleserstøtten til CSS-regioner er for tiden svak, og det er en lang vei å gå før vi kan stole på det på daglig basis. Men fleksibiliteten som den tilbyr er fantastisk, og når full støtte er på plass, tror jeg CSS-regioner vil være go-to-teknikken i årene som kommer.
Er du begeistret av CSS-regioner? Hvor snart tror du at vi kan bruke dem? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, foss bilde via cuatrok77.