CSS3-kolommen gebruiken

Met toenemende diversiteit in monitorformaten, is het niet praktisch om losse tekstblokken te ontwerpen die de volledige breedte van het scherm beslaan. De traditionele oplossing is om tekst handmatig in kolommen te splitsen, wat erg tijdrovend is; of om tekst dynamisch te splitsen met JavaScript, dat niet universeel functioneert. Trouwens, dit is een presentatieprobleem, we zouden het moeten kunnen stylen met CSS zonder gebruik te maken van roostersystemen of drijvers, nietwaar?

CSS3 biedt je een manier om je tekst in verschillende kolommen op te maken, het geeft zelfs de mogelijkheid om een ​​goot in te stellen - de ruimte tussen die kolommen - op deze manier heb je volledige controle in plaats van het kader of rastersysteem dat deze hiaten voor je in te stellen .

Het beste van alles is dat CSS3 gracieus wordt afgebroken, dus als iemand browst in Netscape Navigator, zal uw site niet kapot gaan.

Browserondersteuning

Het is belangrijk om op te merken dat terwijl alle huidige browsers meerdere kolommen ondersteunen in CSS3 - ja zelfs IE10 - veel recente versies - bijvoorbeeld IE9 - dat niet doen. Hoewel de ondersteuning goed is, wil je browser-voorvoegsels opnemen voor webkit (-webkit-) en mozilla (-moz-). Het is niet nodig om -ms- of -o- op te nemen voor IE en Opera, omdat ze de functie volledig ondersteunen of helemaal niet.

De eigenschappen

Deze CSS-functie geeft u eigenlijk een handvol eigenschappen om u volledige controle te geven over hoe uw inhoud wordt afgedrukt in de browser en die eigenschappen zijn:

• kolomtelling: hier geeft u het aantal kolommen op dat u op het element wilt toepassen.
• kolombreedte: de breedte van een enkele kolom. Houd er rekening mee dat deze waarde waarschijnlijk wordt gewijzigd door de browser.
• kolomafstand: de breedte van de opening tussen de kolommen.
• kolomregelbreedte: het regelgedeelte is een soort rand voor uw kolommen en geeft hier de breedte van die rand op.
• kolom-regelstijl: hou ook van de rand, als u de stijl moet opgeven.
• kolom-regel-kleur: hier de kleur van de regel.
• kolombereik: de waarde hier geeft aan de browser door hoeveel kolommen een element moet worden uitgezet, dit is goed voor koppen en werkt als colspan en rowspan in tabellen.

Met al deze eigenschappen denk ik niet dat we eigenlijk iets anders nodig hebben om volledige controle over onze columns te hebben. Natuurlijk zijn niet al deze eigenschappen nodig om de lay-out met meerdere kolommen te laten werken, eigenlijk is alleen het kolomtelling nodig, maar u moet altijd ook de kolomafstand gebruiken om de tekst een beetje ruimte te geven en niet alle kolommen in te schakelen boven elkaar.

Om dit in de praktijk te brengen, zijn er maar twee regels code nodig:

/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}

Als u ook een regel op de kolommen wilt toepassen, hoeft u alleen maar de extra eigenschappen toe te voegen:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}

Net als de meer gebruikelijke eigenschap aan de rand kunt u de kleur, stijl en breedte ook in dezelfde lijn stapelen, zoals:

.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}

Als u een koptekst hebt en u wilt dat die kop alle kolommen beslaat, kunt u slechts één regel toevoegen:

/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}

demonstratie

U kunt dit op vrijwel elke HTML toepassen, van een enkele alinea tot meerdere