Share
We hebben een complete handleiding samengesteld om u te helpen bij het leren van CSS, of u nu net begint met de basis of als u meer geavanceerde CSS wilt verkennen.
Hoi. Mijn naam is Cory. Ik heb een beetje een obsessie. Ik ben al jaren verslaafd aan roostersystemen. Sterker nog, ik heb geholpen om een behoorlijk populair iemand te maken die Jeet heet. Ik heb altijd van de wiskunde gehouden die te maken heeft met het op de juiste manier uitdelen van dingen.
Ik denk dat we het er allemaal over eens zijn dat vaste netwerken de weg van de dinosaurus zijn ingeslagen ten gunste van vloeibare rasters, maar er waren altijd dingen die me lastig vielen met vloeibare rasters. Er is bijvoorbeeld geen manier om een dakgoot op de boven- en onderkant te hebben die even groot is als een goot aan de linker- en rechterkant. Serieus, probeer het.
En er is geen manier om voor onbepaalde tijd te nesten zonder een soort van context door te geven, samen met je tussenruimte. In Jeet moet je bijvoorbeeld typen kolom (1/3 1/2) waarbij 1/2 de afmeting van het bevattende element is. Dit wordt behoorlijk behaard als je drie of vier keer bent genest en je hebt verklaringen die er uitzien kolom (1/4 1/3 1/2 1/2). Bah. Het is niet alleen Jeet, ook elk op preprocessors gebaseerd rastersysteem heeft dit probleem.
En Bootstrap? Begrijp me niet eens hoeveel extra elementen je nodig hebt om je rastersysteem te laten werken, het is foutgevoelig als niets anders. Of het feit dat je nog meer elementen in je opmaak nodig hebt als je achtergrondkleuren op elementen wilt instellen. Hier is een voorbeeld van dat kleine probleem in de vorm van een galerij.
Argh! Zelfs Flexbox lijkt niets nieuws te bieden dan een handige manier om dingen verticaal te centreren.
Na die wervelwind tour van wat er vandaag de dag mis is met roosters, wat zou een observator van het netwerk moeten doen?
We kunnen gebruiken calc () binnen onze CSS, dus wat doet het??
"Met calc () kunt u berekeningen uitvoeren om CSS-eigenschapswaarden te bepalen." - MDN
Niet alleen dat, maar we kunnen het ook combineren eenheden met calc! Dat betekent dat als we willen dat een raster vier kolommen per rij heeft met een 20px-goot ertussen, we een combinatie van percentage en pixelwaarden kunnen schrijven, zoals breedte: berekend (25% - 20 px). Hoe fantastisch is dat?
Hier is wat opmaak - zeven kittenafbeeldingen in een verpakking sectie:
Daarna passen we wat styling toe op de afbeeldingen:
img float: left; breedte: calc (25% - 20px); marge: 10px;
Dit zorgt ervoor dat elk beeld exact 25% van de breedte van het bovenliggende element is, minus 20 px, van waaruit onze goot naar links en rechts kan. Een marge van 10px rondom plaatst de afbeelding perfect gecentreerd in de "kolom".
Vier kolommen met kittens Merk op hoe de afstand aan de boven- en onderkant hetzelfde is als de afstand aan de linker- en rechterkant? Mooi.
Laten we dit een beetje meer abstract maken voor diegenen onder ons die de berekening liever anders weergeven: breedte: calc (100% * 1/4 - 20px);
Nogmaals, dit geeft ons vier perfecte kolommen met 20px goot. We kunnen ook mediaquery's gebruiken om het aantal kolommen te wijzigen, afhankelijk van de breedte van de viewport:
img float: left; marge: 10px; breedte: calc (100% * 1/4 - 20px); @media (max-width: 900px) img width: calc (100% * 1/3 - 20px); @media (max-width: 600px) img width: calc (100% * 1/2 - 20px); @media (max-width: 400px) img width: calc (100% - 20px);
Jarenlange obsessie volledig weggevaagd door deze mooie kleine CSS-regel. Afscheidsroostersystemen. Hallo calc.
Het zou niet eerlijk zijn om deze korte tutorial af te ronden zonder je te laten weten waar en wanneer je kunt gebruiken calc (). De gebruikelijke verdachten spelen catch-up (IE9 is er bijna, maar negeert calc () wanneer -display: table is gebruikt). Vooruitblikkend is dit een zeer krachtige CSS-tool.
Neem een kijkje op http://caniuse.com/#feat=calc voor meer informatie.
Accentsconagua
