CSS3 Regions deel 1: Eindelijk kolommen voor het web
Geschreven door Sandhjé Bouw woensdag, 30 november 2011 15:11
Het is al jaren standaard in magazines, folders, posters en andere gedrukte media. Complexe layouts waarbij tekst over meerdere kolommen wordt verdeeld en vloeiend om afbeeldingen heen loopt. Maar dit kan toch al jaren met html en css, zul je misschien zeggen. Nou, eigenlijk niet. Laten we eens met kolommen beginnen.
Bekijk de afbeelding hierboven eens, wanneer we op dit moment in html of css tekst op een soortgelijke manier over meerdere kolommen willen verdelen, doen we dit door deze tekst op te delen in meerdere blokken, divs, waarna we deze blokken naast elkaar plaatsen. Deze techniek brengt echter een paar problemen met zich mee. Stel bijvoorbeeld dat een gebruiker de tekst wat vergroot, of zelfs een iets ander lettertype gebruikt. Het resultaat zal zijn dat de verhoudingen in het ontwerp verloren gaan, omdat ieder vak wordt vergroot in plaats dat de tekst gewoon netjes wordt verdeeld over de drie vakken. En als we geen complexe javascript trucs toepassen zal een gedeelte van de tekst bijvoorbeeld buiten het scherm vallen wanneer een bezoeker zijn browser verkleind of tablet kantelt.
Adobe's oplossing
Om dit probleem op te lossen heeft adobe nu een nieuwe css technologie ontwikkeld en aan het w3c voorgesteld deze in de volgende css standaard op te nemen. Dit css prototype heet CSS3 regions en werkt als volgt. Met CSS3 Regions kun je apart een bron aangeven waarin de tekst staat die over de verschillende div’s verdeeld moet worden. Dit ziet er in de html code als volgt uit:
<div id="bron"> <p>Lorem ipsum dolor [...]</p> </div> <div id="kolom1" class="kolom"></div> <div id="kolom2" class="kolom"></div> <div id="kolom3" class="kolom"></div>
In de css code definieer je daarna welk div de bron van de tekst is die je wilt verdelen over verschillende kolommen met de nieuwe “flow” property.
#bron { flow: "main-thread"; }
Om in de css code aan te geven dat de overige div’s gebruikt moet worden als een kolom en welke tekst erin moet worden weergegeven gebruik je de “content” property.
.kolom { content: from(main-thread); }
Het resultaat Het resultaat van de bovenstaande code zou zijn dat alle tekst in de div “bron” wordt verdeeld over de drie div’s met de class “kolom”. De onderstaande twee afbeeldingen demonstreren het voordeel hiervan. Afbeelding 1 zou het resultaat kunnen worden in een gemaximaliseerd venster.
Afbeelding 2, hieronder, laat zien wat het resultaat zou worden op het moment dat het venster wordt verkleind.
Op deze manier is het dus mogelijk websites te maken die zich volledig aanpassen aan de afmetingen van de browser van de gebruiker, iets wat tot nu toe vrijwel onmogelijk was.
Andere voordelen van css regions
In ons volgende artikel over css regions zullen we kijken naar de nieuwe mogelijkheden die dit prototype biedt om tekst vloeiend om afbeeldingen te laten lopen.
