Jarenlang waren CSS-drijvers een moeilijk te begrijpen, maar noodzakelijk onderdeel bij het maken van websitelay-outs. Als je ontwerp voor meerdere kolommen heeft gekozen, wend je je tot drijvers. Het probleem met deze methode is dat, ondanks de ongelooflijke vindingrijkheid die webontwerpers / -ontwikkelaars hebben getoond bij het maken van complexe site-indelingen, CSS-praalwagens nooit echt bedoeld waren om op deze manier te worden gebruikt.
Terwijl vlotters en CSS-positionering zeker nog vele jaren een plaats zullen hebben in webdesign, geven nieuwere lay-outtechnieken waaronder CSS Grid en Flexbox nu webontwerpers nieuwe manieren om hun sitelay-outs te maken. Een andere nieuwe lay-outtechniek met veel potentieel is CSS Multiple Columns.
CSS-kolommen bestaan al een paar jaar, maar gebrek aan ondersteuning in oudere browsers (voornamelijk oudere versies van Internet Explorer) heeft veel webprofessionals ervan weerhouden deze stijlen te gebruiken in hun productiewerk.
Met het einde van de ondersteuning voor die oudere versies van IE, experimenteren sommige webontwerpers nu met nieuwe CSS-lay-outopties, inclusief CSS-kolommen, en vinden ze dat ze zoveel meer controle hebben over deze nieuwe benaderingen dan met drijvers.
De grondbeginselen van CSS-kolommen
Zoals de naam al doet vermoeden, kunt u met CSS Multiple Columns (ook bekend als CSS3-lay-out met meerdere kolommen) inhoud opsplitsen in een bepaald aantal kolommen. De meest basale CSS-eigenschappen die u zou gebruiken zijn:
- column-count
- kolom-gap
Voor kolomtelling geeft u het aantal gewenste kolommen op. De kolomopening zou de goten of ruimte tussen die kolommen zijn. De browser neemt deze waarden en verdeelt de inhoud gelijkmatig in het aantal kolommen dat u opgeeft.
Een veelvoorkomend voorbeeld van CSS-meerdere kolommen in de praktijk zou zijn om een blok met tekstinhoud op te splitsen in meerdere kolommen, vergelijkbaar met wat u in een krantenartikel zou zien. Stel dat u de volgende HTML-markeringen hebt (houd er bijvoorbeeld rekening mee dat ik slechts één alinea begin, terwijl er in de praktijk waarschijnlijk meerdere alinea's met inhoud in deze opmaak staan):
Als je deze CSS-stijlen hebt geschreven:
.content {-moz-column-count: 3; -webkit-kolom-telling: 3; kolom aantal: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; kolomafstand: 30px; }
Deze CSS-regel splitste de "inhoud" -divisie in 3 gelijke kolommen met een tussenruimte van 30 pixels. Als u twee kolommen in plaats van 3 wilde, zou u eenvoudig die waarde wijzigen en de browser zou de nieuwe breedten van die kolommen berekenen om de inhoud gelijkmatig te verdelen. Merk op dat we eerst de door de verkoper vooraf gedefinieerde eigenschappen gebruiken, gevolgd door de niet-voorgecertificeerde verklaringen.
Hoe gemakkelijk dit ook is, het gebruik ervan is dubieus voor het gebruik van de website. Ja, u kunt een heleboel inhoud in meerdere kolommen splitsen, maar dit is misschien niet de beste leeservaring voor het web, vooral als de hoogte van deze kolommen onder de "vouw" van het scherm valt.
Lezers zouden dan op en neer moeten scrollen om de volledige inhoud te lezen. Toch is het principe van CSS Columns net zo eenvoudig als je hier ziet, en het kan worden gebruikt om zoveel meer te doen dan alleen de inhoud van sommige alinea's te splitsen - het kan inderdaad worden gebruikt voor lay-out.
Layout met CSS-kolommen
Stel dat u een webpagina heeft met een inhoudsgebied met 3 inhoudskolommen. Dit is een zeer typische website-indeling en om die 3 kolommen te bereiken, drijft u normaal gezien de divisies die zich bevinden. Met CSS-meerdere kolommen is het zoveel eenvoudiger.
Hier is wat voorbeeld-HTML:
