Share
De Multi Column Layout Module is geïntroduceerd om ons te helpen kolommen snel en eenvoudig te maken met alleen CSS3. In deze tut zal ik enkele eigenschappen bekijken en ze demonstreren aan de hand van een aantal voorbeelden.
Iedereen die in het verleden heeft geprobeerd om meerdere kolommen te maken met behulp van CSS, weet al dat dit type lay-out al heel lang haalbaar is. Dit heeft echter vaak geleid tot het gebruik van hacky-technieken en drijvers. Vaker is het niet dat dit nogal tijdrovend was en zeker niet de gemakkelijkste lay-out om te creëren. De waarheid is dat het creëren van meerdere kolommen met behulp van CSS tot nu toe een buitengewoon lastig proces was. De lay-outmodule met meerdere kolommen biedt meer flexibiliteit en controle over eerdere CSS-methoden.
De nieuwe benadering, die een uitbreiding is op het huidige CSS-boxmodel, maakt inhoud van de ene kolom naar de andere mogelijk en maakt het eenvoudig aanpasbaar voor verschillende weergave-apparaten en dynamische gegevens.
Ok, dus voordat je te enthousiast wordt over deze nieuwe module is het belangrijk om te begrijpen welke browsers het ondersteunen, welke voorvoegsels te gebruiken en een paar browserbeperkingen.
Zowel Chrome als Safari gebruiken het voorvoegsel '-webkit-'. Firefox gebruikt het voorvoegsel '-moz-'. Opera en IE ondersteunen alle eigenschappen zonder een voorvoegsel. Om de een of andere reden bieden Chrome, Safari en Firefox geen ondersteuning voor eigenschappen voor onderbrekingen of koloms opvullen, terwijl Safari en Firefox de kolomperiode niet ondersteunen. Zeggen dat, ik weet zeker dat deze eigenschappen binnenkort beschikbaar zullen zijn in toekomstige updates.
Voordat we de eigenschappen bekijken die worden gebruikt in de lay-outmodule met meerdere kolommen, laat ik u een kort voorbeeld zien om u te helpen begrijpen hoe het werkt..
Hier is een voorbeeld van hoe de kolommen worden weergegeven:
Ten eerste is de html voor dit voorbeeld supereenvoudig. We maken eenvoudig een div met een klasse 'kolommen' en een beetje a lorem ipsum Dummy tekst.
Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscing enim mid ut. Enim amet, a ac mauris vut porttitor risus integer elit, dis odioio pulvinar ridiculus sit. Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscing enim mid ut. Enim amet, a ac mauris vut porttitor risus integer elit, dis odioio pulvinar
De module met meerdere kolomlay-outs is vrij eenvoudig te beschrijven en te begrijpen in CSS. Hier is een voorbeeld:
.kolommen kolom-telling: 4; kolomafstand: 10px;
Eerst gebruiken we 'kolomtelling' om te bepalen hoeveel kolommen nodig zijn (ik heb in dit voorbeeld 4 gebruikt).
We zeggen dan hoe groot we willen dat de goot (de kloof tussen de kolommen) is. In dit geval heb ik 10px gebruikt.
Door deze eigenschappen toe te voegen, kan onze lorem ipsum-dummytekst tussen de 4 kolommen lopen. Het is echt zo simpel starten. Inmiddels zou je moeten gaan zien hoe eenvoudig dit is om te gebruiken.
Laten we eens wat gedetailleerder kijken naar enkele eigenschappen die kunnen worden gevonden in de lay-outmodule met meerdere kolommen.
Het instellen van het aantal of de breedte van kolommen is belangrijk voor de inhoud van de multi-kolomlay-out. Kolommen moeten worden ingesteld met 'kolombreedte' of 'kolomtelling', maar mogen nooit samen worden gebruikt. Beide eigenschappen zijn standaard ingesteld op 'automatisch'.
'Kolombreedte' doet precies wat er op het blik staat. Hiermee kunt u een vaste breedte opgeven voor de kolommen. De meting van deze breedte kan op de standaardmanier worden uitgevoerd met behulp van px, ems enz. Afhankelijk van wat u invoert voor de kolombreedte, kan deze variëren en kan deze iets breder of smaller zijn om in de beschikbare ruimte te passen. Als deze eigenschap is ingesteld op 'automatisch', betekent dit dat de breedte van de kolommen wordt bepaald door andere eigenschappen, zoals die hieronder.
Waarde opties kolombreedte: (lengte) | auto;
Als u wilt dat de lay-out wordt gesplitst in een aantal opgegeven kolommen, dan is dit de eigenschap waarvoor u zou kiezen. Door de waarde hiervan in te stellen, wordt de inhoud verdeeld in het vereiste aantal kolommen. Als deze eigenschap is ingesteld op 'automatisch', betekent dit dat de nummerkolommen worden bepaald door andere eigenschappen, zoals 'kolombreedte'.
Waarde opties kolomtelling: (aantal kolommen) | auto;
'Kolommen' is in feite een afgekorte eigenschap waarmee u de 'kolombreedte' en 'kolomtelling' kunt instellen. Hier zijn geldige waarden voor weergave die u aan 'kolommen' kunt koppelen:
kolommen: 12em; / * kolombreedte: 12em; kolom-telling: auto * / kolommen: auto 12em; / * kolombreedte: 12em; kolom aantal: auto * / kolommen: 2; / * kolombreedte: auto; kolomtelling: 2 * / kolommen: 2 automatisch; / * kolombreedte: auto; kolom aantal: 2 * / kolommen: auto; / * kolombreedte: auto; kolom-telling: auto * / kolommen: auto auto; / * kolombreedte: auto; kolomtelling: automatisch * /
'Column gap' geeft ons de mogelijkheid om een spatie toe te voegen tussen elk van de kolommen en geeft de inhoud ruimte om te ademen. We specificeren de breedte van het gat met behulp van standaard CSS-metingen. De breedte van de opening die u opgeeft, mag niet negatief zijn.
Waarde opties kolomafstand: (lengte) | normaal;
'Kolomregel' zet effectief een rand door het midden van de 'kolomhiaat'. Daarom moet om dit in te schakelen een 'kolomafstand' worden gespecificeerd die dezelfde of een grotere waarde heeft dan de kolomregel. De kolomregel heeft ook verschillende afzonderlijke sub-eigenschappen en een verkorte versie. Deze steno-versie werkt op dezelfde manier als de eigenschap 'rand'. Je kunt dit hieronder zien:
kolom-rule-width: 1px; kolom-regel-stijl: vast; kolom-regel-kleur: # 000; kolomregel: 1px vast # 000; / * Dit is de steno-versie * /
Met 'Kolombereik' kunnen we alle kolommen overspannen. Als we ons eenvoudige voorbeeld van eerder nemen en een h1-titel toevoegen aan onze inhoud, kunnen we deze h1-tag gemakkelijk door de hele 4 kolommen laten overspannen door ze toe te voegen kolom overspanningen: Alle ernaar toe. Bekijk deze demonstratie:
h1 kolom-span: alle;
Waarde opties kolombreedte: alles | geen;
De eigenschap 'kolomvulling' geeft ons twee besturingselementen waarmee u kunt instellen hoe de hoeveelheid inhoud over de kolommen wordt verdeeld. Indien ingesteld op 'balans', wordt de variatie in de kolomlengte geminimaliseerd en zullen alle lengten zo gelijk mogelijk zijn. Indien ingesteld op 'auto' zullen de kolommen in volgorde worden gevuld en (bijvoorbeeld) ertoe leiden dat de 4e van 4 kolommen minder inhoud hebben dan de 3 voorgaande kolommen. Als hier een balans op zou worden ingesteld, zou het mogelijk zijn dat alle 4 kolommen ongeveer even hoog zijn. Deze eigenschap lost het probleem op van ongewenste lacunes die in de inhoud achterblijven.
'Overloop' moet worden gebruikt om te bepalen wat er gebeurt als de inhoud de kolommen overschrijdt. Als bijvoorbeeld de hoofd 'kolommen' div een vaste breedte heeft en de inhoud van de kolommen dit vergroot, dan kunnen we bepalen of dit moet worden getoond of geknipt met behulp van de eigenschap 'overflow'.
In het onderstaande voorbeeld kunnen we zien dat de kolommen de div overlopen. Dit komt doordat overflow niet is ingesteld op 'verborgen' op het bovenliggende element.
Ik heb een paar voorbeelden samengesteld die je bovenaan deze pagina kunt downloaden. Ik heb dit gedaan om te laten zien hoe u deze nieuwe module in verschillende situaties kunt gebruiken, zodat u kunt zien hoe eenvoudig het is om de lay-out van uw code te veranderen door een paar eigenschappen in de CSS-markup te wijzigen.
Dit eerste voorbeeld demonstreert de oude methode voor het maken van meerdere kolommen met behulp van CSS3. Dit is gelukt door een 'float: links' toe te voegen aan de 'navigatie', 'de hoofdinhoud' en de 'zijbalk'.
OK, dit werkt goed en je kunt het gewenste effect bereiken. De flexibiliteit is echter echt behoorlijk beperkt. Als u extra kolommen wilt toevoegen of de lay-out wilt wijzigen, moet u vertrouwen op het toevoegen van extra markeringen, bewegende elementen rond en het kan nogal vervelend zijn. Deze nieuwe module verandert dat allemaal.
Dit voorbeeld hierboven toont de nieuwe methode voor het maken van de kolommen. Deze keer, in plaats van het te gebruiken op de hoofdtekstelementen, heb ik de CSS3 Multiple Column-module toegevoegd aan de 'hoofdinhoud', waar je kunt zien dat de inhoud is verdeeld in 3 kolommen.
Om het aantal kolommen te wijzigen, is het net zo eenvoudig als het wijzigen van een nummer.
In dit laatste voorbeeld heb ik bewaard bij het gebruik van de hoofdcontent, maar ik heb ook wat extra divs toegevoegd om te laten zien hoe je de lay-out heel eenvoudig kunt veranderen. Ik heb ook 'span: all' toegevoegd aan de lagere 'h1' tag, zodat de kop over 'alle' kolommen strekt. Ten slotte heb ik er een regel aan toegevoegd door 'column-rule: 1px dotted # 999999;' naar de CSS.
Het is allemaal waard om op dit punt op te merken dat ik ook een JavaScript-terugval in de voorbeelden heb opgenomen, zodat ze werken op browsers die de multi-kolomlay-outmodule nog niet ondersteunen.
Zoals met elke nieuwe CSS-module; nieuw speelgoed bespaart ons tijd, maar heeft een tussentijdse of cross-over periode die soms behoorlijk lang kan duren voordat bekwame compatibiliteit met crossbrowsers is bereikt. We bevinden ons momenteel in de tussen fase, waar sommige browsers ingehaald hebben, sommige inhalen en sommige achterblijven. Het is in deze fase dat we een back-upplan of fallback nodig hebben voor de browsers die nog geen ondersteuning bieden. Gelukkig heeft Cedric Savarese een script bedacht dat onze nieuwe CSS3-eigenschapswaarden leest en de kolommen met javascript weergeeft. U kunt lezen hoe u dit kunt implementeren en het script downloaden op A List Apart.
Als je in dit stadium graag wilt inspringen en spelen met een paar van de eigenschappen die we vandaag hebben besproken, heb ik een snelle 'meervoudige kolomgenerator' omgegooid waarmee je een rotzooi kunt hebben. Het is niets bijzonders, maar na een beetje gedoe zou je in staat moeten zijn om de basisbegrippen van de 'module met meervoudige kolomlay-out' te begrijpen en deze in je eigen projecten te kunnen gebruiken..
U kunt de gegenereerde code ook downloaden, zodat u verder kunt experimenteren met enkele andere eigenschappen die niet zijn opgenomen in de generator.
CSS3 Multiple Column Layout Generator
Dus dat brengt ons tot een einde op de CSS3 multi-kolom lay-outmodule. Ik hoop dat je nu een beter begrip hebt van hoe je het moet gebruiken. Het is echt heel simpel om te gebruiken als je eenmaal een beetje hebt gespeeld. Ondanks dat het nieuw is en een paar beperkingen heeft op het gebied van browserondersteuning, begint het zijn weg te vinden op het internet en ik ben er zeker van dat het slechts een kwestie van tijd zal zijn voordat het een volledig goedgekeurde en geïmplementeerde CSS-module is..
Het geeft ons de mogelijkheid om geweldige lay-outs met CSS te verkennen. Experimenteer ermee, maak er een zooitje van en download de bronbestanden voor de voorbeelden bovenaan deze tut. Ik zou graag willen horen wat je te zeggen hebt en na te denken over deze nieuwe module, laat het me weten in de reacties hieronder.
Accentsconagua