Complexe, flexibele lay-outs bouwen was nog nooit zo eenvoudig, maar CSS3 heeft zeker veel van de hoofdbrekens weggenomen.
CSS3-functies zoals Flexbox en columns hebben een aantal complexe lay-outs tot een reële mogelijkheid gemaakt en nu worden ze vergezeld door een van de nieuwste toevoegingen aan de toolbox van de webontwerper: CSS-gebieden.
Met CSS-gebieden kunt u inhoud naar een reeks containers op een enkele pagina laten stromen. Het is het equivalent van het koppelen van tekstvakken in een toepassing zoals InDesign. Het maakt een aantal lay-outs mogelijk die voorheen alleen mogelijk waren door de grens tussen data en stijlen te vervagen.
Zoals altijd is browserondersteuning verre van perfect.
CSS-regio's is nog steeds een concept, wat betekent dat het experimenteel is. Aanvankelijk was de enige browser om het echt te ondersteunen Internet Explorer 10 (nee, ik maak geen grapje); hoewel IE10 een iframe als inhoudsbron gebruikt.
Safari claimt ondersteuning te bieden met een voorvoegsel.
In Chrome kunt u de functie testen door uw browser te openen, 'about: flags' te typen en 'enable-experiment-webkit-functies' te activeren en vervolgens uw browser opnieuw te starten.
Gelukkig is er ook een JavaScript-polyfill gemaakt door Adobe, die de functionaliteit van CSS-gebieden naar browsers brengt die het momenteel niet ondersteunen, kunt u dit vinden GitHub.
Omdat het doel van CSS-regio's is om onze tekst door verschillende containers te laten stromen, is het eerste wat u nodig heeft een 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.En dan sommige containers:
Nu hebben we de basiscontent opgezet, we kunnen de containers koppelen met flow-in en flow-from, dat merk je in het voorbeeld dat ik de -webkit- prefix heb toegevoegd.
.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;}Als u dit in een browser aanvinkt, ziet u dat de tekst gewoon van de ene naar de andere doos gaat. Als u nu deze containers plaatst, blijft de tekst goed stromen.
-webkit-flow-into: text-flow;Deze eigenschap accepteert een ID als de waarde. Wanneer u een waarde aan deze eigenschap doorgeeft, wordt deze onderdeel van een benoemde flow en stopt deze met renderen als onderdeel van de paginastroom. U kunt dit annuleren door de eigenschap op Geen in te stellen.
De naam van de stroom die je gebruikt is willekeurig, zorg er gewoon voor dat je consistent bent. We kunnen ook meerdere elementen met dezelfde naamstroom hebben als in ons voorbeeld hierboven.
Dit is niet beperkt tot tekst, we kunnen ook afbeeldingen, lijsten en vele andere soorten HTML-inhoud laten stromen.
-webkit-flow-from: text-flow;We gebruiken deze eigenschap om op te geven welke element (en) de gespecificeerde stroom moeten ontvangen.
De waarde is de naam van de stroom die we hebben opgegeven voor de inblokeigenschap .
Houd er rekening mee dat alle inhoudsstijlen die u op de oorspronkelijke tekst toepast, over de hele linie worden behouden. Dus als u de tekst blauw kleurt, blijft deze blauw over alle containers.
Bekijk een voorbeeld van CSS-regio's in actie deze pen Ik maakte.
De browserversteuning voor CSS-regio's is momenteel zwak en er is nog een lange weg te gaan voordat we er dagelijks op kunnen vertrouwen. Maar de flexibiliteit die het biedt, is fantastisch, en zodra volledige ondersteuning aanwezig is, denk ik dat CSS-regio's de go-to-techniek zullen zijn voor de komende jaren.
Ben je enthousiast over CSS-regio's? Hoe snel denk je dat we ze kunnen gebruiken? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, waterval afbeelding via cuatrok77.