Beheers de nieuwe CSS-lay-outeigenschappen

• Kennis nodig: Basis-HTML en CSS
• Vereist: Teksteditor, moderne browser
• Projecttijd: 30 minuten
• Ondersteuningsbestand

Dit artikel verscheen voor het eerst in nummer 226 van het tijdschrift .net.

Het opmaken van pagina's in CSS heeft altijd een ingewikkelder proces geleken dan het hoeft te zijn. Dus hier is geweldig nieuws: er zijn nieuwe specificaties die het maken van lay-outs voor webontwerpers een veel eenvoudiger taak maken.

De grote browsers beginnen, met de hulp van instanties als het W3C, standaarden en implementaties te bieden voor een verscheidenheid aan nieuwe lay-outopties die we vandaag kunnen gaan gebruiken. Het W3C overweegt bijvoorbeeld momenteel CSS3 Lay-outmodule met meerdere kolommen een kandidaataanbeveling. In principe betekent dit dat het W3C zich op het punt bevindt waarop browsers het als een functie kunnen implementeren.

01. Voorvoegsels van leveranciers

Andere specificaties hebben nog niet de status van kandidaataanbeveling bereikt, maar dat betekent niet dat u ze niet kunt gebruiken. Tegenwoordig gebruiken de grote browsers leveranciersvoorvoegsels om aan te geven dat een bepaalde specificatie een implementatie is die dat wel kan mogelijk veranderen en de verwachting is dat het leveranciersvoorvoegsel zal worden verwijderd zodra de specificatie en implementatie zijn voltooid stal. Jonathan Snoek

beschrijft leveranciersvoorvoegsels als twee dingen:

• Ze stellen browserontwikkelaars in staat nieuwe functionaliteit te testen zonder bang te hoeven zijn voor veranderende specificaties.
• Ze waarschuwen webontwikkelaars dat de zaken in beweging zijn.

Terwijl er enige controverse over het bestaan ​​van leveranciersvoorvoegsels ze vormen een goede gelegenheid om functies al vroeg in het standaardproces te gebruiken – hoewel ze verstandig moeten worden gebruikt. Hier kijken we naar een spectrum van lay-outeigenschappen, variërend van gevestigd tot baanbrekend. Het is waar dat je deze misschien niet allemaal in de productie implementeert, maar het is zeker nuttig om te weten wat er aan de horizon komt.

02. Meerdere kolommen

Voor onze eerste lay-outfunctie beginnen we met iets eenvoudigs: de CSS-lay-outmodule met meerdere kolommen. (Laten we het voor ons verstand gewoon Multi-kolom noemen.) Zoals u kunt raden, stelt dit ons in staat kolommen op een webpagina in te delen zonder na te hoeven denken over positionering en floats.

Het is ook leuk om een ​​functie te hebben die een passend aantal kolommen creëert op basis van de grootte van het scherm. Als u bijvoorbeeld een selector wilt hebben met een kolombreedte van 13 ems (u kunt ook pixels gebruiken) en de browser zoveel kolommen wilt laten weergeven als de ruimte toelaat, kunt u dat doen:

#mcvoorbeeld {
kolombreedte: 13ems;
}

Ja, zo simpel is het! U kunt ook een vast aantal kolommen definiëren, hoewel de kolombreedten gelijkmatig worden verdeeld op basis van de breedte.

#mcvoorbeeld {
kolomaantal: 3;
}

Als u een fijnere controle over uw kolommen wilt uitoefenen, is dat ook mogelijk. U kunt bijvoorbeeld het aantal kolommen, hun breedte, de regels tussen kolommen en hun stijlen definiëren.

#mcvoorbeeld {
kolommen: auto 13em; /* aantal kolommen,
kolombreedte */
kolomopening: 1em;
kolomregel: 1em effen zwart; /* breedte, stijl, kleur */
}

Met andere eigenschappen en attributen kunt u:

• definieer hoe kolommen moeten worden afgebroken
• definieer hoe u een element over meerdere kolommen kunt laten lopen
• Zorg ervoor dat de inhoud gelijk verdeeld is over alle kolommen.

Een van de geweldige dingen van Multi-column is hoe de inhoud automatisch op magische wijze voor u wordt weergegeven, zodat u niet hoeft te rekenen of het aantal woorden hoeft af te ronden om alles op één lijn te krijgen!

Wees echter voorzichtig bij het gebruik van Multi-column, omdat u geen situatie wilt creëren waarin iemand die uw site bezoekt, moet vanwege de lange hoogte voortdurend op en neer scrollen op de pagina kolommen.

Bijna alle huidige desktopbrowsers en mobiele browsers ondersteunen Multicolumn (voor Internet Explorer moet u op dit moment de IE10 Platform Preview gebruiken). Een van de snelste manieren om browserondersteuning voor een functie te vinden, is door naar caniuse.com te gaan en de zoekopdracht te gebruiken om uit te zoeken welke desktop- en mobiele browsers de functie ondersteunen waarnaar u op zoek bent. Houd er rekening mee dat, hoewel een functie mogelijk wordt ondersteund, deze mogelijk een leveranciersvoorvoegsel vereist of dat de browser mogelijk niet elk item in de specificatie opneemt – dus test, test, test!

03. Flexbox

De CSS-module voor flexibele boxlay-out bevindt zich op w3.org/TR/css3-flexbox. Voor onze doeleinden zullen we ernaar verwijzen met de veelgebruikte bijnaam, Flexbox.

Met Flexbox kunt u de kinderen van een doos verticaal of horizontaal neerleggen en afstandsvereisten voor die kinderen opgeven (dus flexibel).

Om bijvoorbeeld een Flexbox te maken in Internet Explorer 10 Platform Preview, kunnen we de weergave eigenschap en stel deze in om Flexbox te gebruiken:

#fbevoorbeeld {
weergave: -ms-box;
achtergrond: zwart;
}

We kunnen ook een oriëntatie instellen voor de lay-out van de onderliggende elementen door het leveranciersvoorvoegsel voor Internet Explorer te gebruiken (meestal beginnend met –ms-box):

#fbevoorbeeld {
weergave: -ms-box;
-ms-box-orient: horizontaal;
}

Flexbox geeft ons de mogelijkheid om de onderliggende elementen op verschillende manieren te oriënteren: van links naar rechts, van rechts naar links, van boven naar beneden en van onder naar boven. Misschien willen we de richting van de kinderen aangeven op een manier die loodrecht staat op de layout-as, gebaseerd op de oriëntatie.

Dit kan betekenen dat elk kindelement gecentreerd is tussen de randen van een ouderelement, zodat de ruimte boven en onder gelijkmatig verdeeld is voor elk kindelement.

#fbevoorbeeld {
weergave: -ms-box;
-ms-box-orient: horizontaal;
-ms-box-align: midden;
}

Een andere eigenschap die we kunnen gebruiken is de doos-verpakking, dat definieert hoe overtollige ruimte wordt verdeeld tussen onderliggende elementen. We kunnen ons eerste onderliggende element bijvoorbeeld laten beginnen aan de rand van het bovenliggende element in de richting van de lay-outas:

#fbevoorbeeld {
weergave: -ms-box;
-ms-box-orient: horizontaal;
-ms-box-align: midden;
-ms-box-pack: start;
}

Maar wat als we meer onderliggende elementen hebben dan er passen en we niet echt willen dat ze in een formaat worden geperst dat niet bruikbaar is? Welnu, we kunnen de browser daadwerkelijk vertellen om door te gaan en de onderliggende elementen te gebruiken box-lijnen:

#fbevoorbeeld {
weergave: -ms-box;
-ms-box-orient: horizontaal;
-ms-box-align: midden;
-ms-box-pack: start;
-ms-box-regels: meerdere;
}

Nu we begrijpen hoe we onze container moeten instellen, hoe kunnen we onderliggende elementen beheren? Eerst moeten we ze instellen als onderliggende elementen van het Flexbox-element:

::

Om de flexibiliteit van een kindelement te definiëren, kunnen we de flexibiliteit ervan instellen box-flex eigenschap naar 0, wat betekent dat deze niet flexibel is, of een getal zoals 1 of 2, dat definieert hoeveel van een fractie van de ruimte het krijgt.

Als we bijvoorbeeld drie onderliggende elementen hebben waar kind1 heeft een waarde van 0, kind2 heeft een waarde van 1 en kind3 heeft een waarde van 2, kind1 zou dezelfde grootte blijven omdat het niet flexibel is, kind2 zou 1/3 van de beschikbare ruimte gedeeld krijgen kind3 – die 2/3 van de beschikbare ruimte zou krijgen. Het beste is dat u de berekeningen niet zelf hoeft te doen, omdat de browser het voor u doet!

#fbchild1 {
achtergrond: blauw;
-ms-box-flex: 0;
}
#fbchild2 {
achtergrond: groen;
-ms-box-flex: 1;
}
#fbchild3 {
achtergrond: rood;
-ms-box-flex: 2;
}

Als je een scherp oog hebt, heb je misschien naar de nieuwste specificaties gekeken en je gerealiseerd dat sommige van de bovenstaande eigenschappen er niet helemaal goed uitzien. Op dit moment wordt Flexbox door het W3C beschouwd als een werkconcept, wat betekent dat het zich nog vroeg in de standaardcyclus bevindt. Dus omdat het een werk in uitvoering is, is het redelijk veilig om aan te nemen dat het zal veranderen. In feite zijn hier de data van recente versies van de specificatie:

• 29 november 2011
• 22 maart 2011
• 23 juli 2009

Als je kijkt caniuse.com en zoek naar de Flexibele Box Layout Module, u zult zien dat u met leveranciersvoorvoegsels Flexbox kunt gebruiken zoals hierboven. Maar het blijkt dat sommige implementaties van de browsers de specificaties van 2009 volgen (zoals de voorbeelden hierboven) in plaats van de nieuwste versie van november 2011. Daarom is het altijd belangrijk om niet zomaar aan te nemen dat ‘het werkt’ omdat een browserleverancier dat zegt, maar om enkele prototypes te maken om te begrijpen wat de ondersteuning eigenlijk is.

Het goede nieuws is dat het niet zo moeilijk is om over te stappen naar de bijgewerkte specificaties. Dus bijvoorbeeld het declareren van een element als Flexbox is nu:

#fbevoorbeeld {
weergave: -ms-flexbox; /* In plaats van – ms-box */
}

Nogmaals, de specificatie staat op het punt te veranderen, aangezien het een werkend concept is, maar laat dit je er niet van weerhouden om het uit te proberen met de juiste leveranciersvoorvoegsels.

04. Rasterindeling

Historisch gezien werd IE beschouwd als de achterblijver van desktopbrowsers op het gebied van standaardinnovatie. Maar nu er nieuwere versies in de pijplijn zitten, begint IE dit in twijfel te trekken. In de nieuwste IE10 Platform Preview is bijvoorbeeld ondersteuning geïntroduceerd voor CSS Grid Layout. De specificatie op w3.org/TR/css3-grid-layout werd afgelopen april door Microsoft ingediend bij de W3C CSS Working Group, en op het moment van schrijven is Internet Explorer 10 de enige browser die dit implementeert.

Rasterindeling is behoorlijk fundamenteel, zelfs buiten webontwerp, dus het is slechts een kwestie van tijd voordat alle browsers dit gaan ondersteunen. En hopelijk zal dit een einde maken aan de tirannie van HTML-tabelelementen die voor de lay-out worden gebruikt! Met de specificatie kunnen we onze pagina indelen in rijen en kolommen en definiëren hoe de inhoud zich over individuele rijen en cellen zal uitstrekken, terwijl we onze inhoud gescheiden houden van de lay-out. Eerst moeten we ons raster definiëren door een leveranciersvoorvoegsel te gebruiken:

#rastervoorbeeld {
weergave: -ms-raster;
}

We kunnen de grootte van onze kolommen en rijen definiëren:

#rastervoorbeeld {
weergave: -ms-raster;
-ms-grid-rijen: 30px 5em auto;
-ms-grid-kolommen: auto 70px 2fr 1fr;
}

Wat wat? Fr? Meerdere attributen? Oké, laten we het opsplitsen. De bovenstaande code verklaart dat we vier rijen en drie kolommen zullen hebben.

• De eerste rij is verticaal 30 pixels.
• De tweede rij is verticaal 5 ems.
• De grootte van de derde rij wordt aangepast aan de inhoud van de rij.
• De grootte van de eerste kolom wordt aangepast aan de inhoud van de kolom.
• De tweede kolom is horizontaal 70 pixels.
• De derde kolom zal twee fractionele eenheden van de beschikbare ruimte zijn …
• …terwijl de vierde kolom één fractie van de beschikbare ruimte in beslag neemt.

Nu kunnen we onderliggende elementen hebben die we op specifieke locaties in ons raster willen hebben. Als we willen dat een element in de eerste rij en tweede kolom staat, declareren we:

#griditem1 {
-ms-rasterrij: 1;
-ms-grid-kolom: 2;
}

Houd er rekening mee dat onze onderliggende elementen, net als bij de Flexbox, onderliggende elementen van het rasterelement moeten zijn. Misschien willen we ook dat een element zich over rijen uitstrekt – we kunnen dit doen met behulp van raster-rij-overspanning:

#griditem1 {
-ms-rasterrij: 1;
-ms-grid-kolom: 2;
-ms-grid-rij-span: 2;
}

Of misschien willen we elementen uitlijnen met behulp van raster-rij-uitlijnen of raster-kolom-uitlijnen. Met deze eigenschappen kunt u definiëren of de inhoud binnen de rij/kolom wordt gecentreerd, of u kunt zelfs de uitlijning ervan horizontaal of verticaal definiëren. Als u bijvoorbeeld binnen een kolom wilt centreren, doet u het volgende:

#griditem1 {
-ms-rasterrij: 1;
-ms-grid-kolom: 2;
-ms-grid-kolom-uitlijnen: midden;
}

Vroeger veroorzaakten op HTML-tabellen gebaseerde lay-outs problemen omdat individuele cellen de neiging hadden gedefinieerd te worden op basis van hun volgorde in de opmaak, wat de zaken broos maakte. Maar met Grid Layout kunnen we functies zoals Mediaquery's gebruiken om verschillende stijlen op ons raster toe te passen, afhankelijk van de breedte, hoogte en oriëntatie van het apparaat.

05. Conclusie

Als je meer een visueel persoon bent, raad ik je aan om eens te kijken Presentatie van Markus Mielke. Hierin worden de lay-outfuncties besproken die in dit artikel en in andere artikelen worden behandeld, en hoe deze samen in een app kunnen worden gebruikt.

In dit artikel hebben we functies besproken die in alle browsers zijn geïmplementeerd, en enkele die nog maar net in opkomst zijn. Het kan lijken alsof sommige van deze laatste nog niet klaar zijn voor gebruik op productielocaties, en in sommige gevallen heeft u misschien gelijk. Maar als ontwerpers moeten we ons bewust zijn van wat ze zijn en hoe ze werken, want laten we eerlijk zijn: alle CSS-functies die we elke dag gebruiken, begonnen met een specificatie en implementatie.

Thomas Lewis is een technische evangelist bij Microsoft die zich richt op HTML5 en de webontwerper/ontwikkelaarsgemeenschap: asimplepixel.tumblr.com

Ontdek 101 CSS en Javascript tutorials.