11 dingen die ik heb geleerd De CSS-rasterspecificatie lezen

Illustratie door Alex Kunchevsky

11 juni 2017 besloot ik om de CSS Grid-specificatie te lezen.

De Spec was een beetje technisch, maar het was verreweg de meest genoten specificatie die ik ooit heb gelezen. Als je een meer geavanceerde ontwikkelaar bent, maak er een bladwijzer van voor toekomstige referenties.

Dus, zal dit nuttig zijn?

Ik geloof dat het verschil tussen goede en geweldige ingenieurs is dat deze de tijd nemen om te begrijpen wat er echt gebeurt onder de motorkap. Ze leren hoe dingen werken, in plaats van te leren door 'kopiëren en plakken'.

Dus wil je een geweldige ontwikkelaar zijn?

Jazeker. Of je zou dit artikel niet lezen.

Wat je leert

Tijdens het lezen van de specificatie leerde ik een aantal zeer subtiele, maar diepgaande details.

In dit artikel zal ik ze met u delen.

1. Het CSS-raster is declaratief

Declaratieve API's zijn zo prettig om mee te werken. Denk je dat ReactJS?

Naarmate websites evolueerden van eenvoudige documenten naar complexe, interactieve applicaties, werden weblay-outs moeilijk te maken. Zo moeilijk, ze waren mijn nachtmerrie.

Dit is precies het probleem dat CSS Grid vandaag is gaan oplossen.

Van de spec.

De CSS Grid neemt het pijnlijke proces van het maken van intelligente lay-outs weg en vervangt deze door een prachtige set declaratieve regels die het proces vrijwel moeiteloos maken.

Dit zijn goede tijden in de geschiedenis van CSS.

2. De fractionele eenheid produceert niet altijd rijen en kolommen met gelijke tussenruimten

Een van de eerste dingen die iedereen leert en leuk vindt aan het CSS Grid is de fractionele eenheid. Zelfs een eend kan ermee wegkomen.

De fractionele eenheid neemt de pijn weg van het berekenen van percentages. Het is een genot om mee te werken.

De meeste mensen leren dat de fractionele eenheid (fr) gelijkmatig verdeelde kolommen of rijen oplevert.

Van een aangifte zoals 1fr 1fr 1fr wordt bijvoorbeeld verwacht dat u kolommen of rijen met gelijke tussenruimte krijgt. Zie onderstaande afbeelding:

Gelijkmatig verdeelde kolommen gemaakt door de fractionele eenheid.

Helaas is dit niet altijd waar. Arme eend.

Het volgende is van de specificatie:

De fr-eenheid vult de beschikbare ruimte MAAR deze is NOOIT kleiner dan de minimale grootte van de roostercontainer of de inhoud van de rij of kolom.

In wezen, als u een afbeelding, afbeelding of een rasteritem hebt, met een minimale breedte of minimale hoogte, kunt u onverwachte resultaten krijgen met de fractionele eenheid.

Nadat ik als een natte bange eend had gekwaakt, heb ik veel tijd besteed aan het experimenteren met de fractionele eenheid. Ik schreef een artikel over mijn bevindingen.

3. Je weet niet echt hoe de grootte van rasters is. Of wel?

Een CSS-rasterdefinitie begint altijd in de volgende lijnen:

display: rooster

Vaak wordt het gevolgd door de rij- en kolomdefinities. Iets zoals dit:

grid-template-rijen: 10px 1fr 3fr
grid-template-columns: 1fr

En ten slotte zult u waarschijnlijk de rasteritems plaatsen met de techniek die u het beste uitkomt.

Aangezien er veel manieren zijn om rasteritems te plaatsen, sla ik de vereiste code voor beknoptheid over.

Dus hier is het probleem.

Onder de motorkap moet u ervan uitgaan dat de grootte van de rasterrijen en kolommen eerst wordt berekend voordat de items worden geplaatst. Rechts?

Welnu, het lijkt erop dat de waarheid het tegenovergestelde is.

Hoe raar.

Het volgende is van de specificatie:

2.3. Grootte van het raster
Nadat de rasteritems zijn geplaatst, worden de afmetingen van de rasterbanen (rijen en kolommen) berekend, rekening houdend met de grootte van hun inhoud en / of beschikbare ruimte zoals gespecificeerd in de rasterdefinitie.

Let op de voortgang.

  1. De rasteritems worden geplaatst.
  2. De afmetingen van de rasterbanen worden berekend

Je hebt hier waarschijnlijk vragen over. Dus ik zal proberen die zorgen van jou op te lossen.

Merk ten eerste op dat aan elk rasteritem een ​​rastergebied wordt toegewezen. De rasteritems worden vervolgens in dit gebied op maat gemaakt. Dus, hoe precies worden de rasteritems geplaatst zonder de grootte van de tracks al te berekenen?

Als je een kijkje neemt in het gedeelte Rasteritems plaatsen van de specificatie, zul je een aanwijzing vinden.

Er wordt veel rekening gehouden bij het dimensioneren van rasters, en dat omvat grotendeels de grootte van de rasteritems.

Formaatroosters kunnen op het volgende zijn gebaseerd:

  • Een vaste maatfunctie (lengte of percentage dat kan worden opgelost).
  • Een intrinsieke maatfunctie (min-content, max-content, auto, fit-content ()), of
  • Een flexibele formaatfunctie (flex).

Wat volgens mij onder de motorkap gebeurt, is dat de rasteritems worden geplaatst.

Dat wil zeggen, het bevattende blok voor het artikel wordt bepaald, de dimensioneringsfunctie voor het artikel wordt vervolgens bepaald. Dit beïnvloedt op zijn beurt de grootte van de rasterbanen.

Zie je?

Niet wat je aanvankelijk dacht.

4. Standaard worden rasteritems uitgerekt zodat ze in hun rastergebied passen, behalve in bepaalde gevallen

Zonder uw tussenkomst worden rasteritems altijd uitgerekt om in hun rastergebied te passen.

Dus als u een dergelijke verklaring had:

grid-template-areas: 'header header header'
                     'hoofdbalk zijbalk'
                     'zijbalk footer footer'

En u had divs toegewezen aan de specifieke rastergebieden, zoals hier:

.div1 {
   rastergebied: koptekst
}
.div2 {
   rastergebied: zijbalk
}
.div3 {
   rastergebied: hoofd
}
.div4 {
   rastergebied: voettekst
}

U hoeft de breedte en hoogte van de div's hierboven niet aan te geven tot 100%

Ze zullen automatisch strekken om hun respectieve gebieden te vullen.

Dit is het addertje onder het gras.

Dit gedrag is niet consistent met afbeeldingen.

Zoals Rachel Andrew heeft opgemerkt, zegt de spec verder dat dit gedrag anders is voor rasteritems met een intrinsieke beeldverhouding.

Laat je niet afschrikken door de grote woorden. Het is geen demogorgon.

Een afbeelding is standaard een inline-block-element, maar ze hebben ook specifieke afmetingen. Ze hebben dimensies die er natuurlijk mee verbonden zijn. Een afbeelding kan 400 px bij 600 px breed zijn, of helemaal geen afmetingen hebben.

Regelmatige blokelementen zoals divs hebben echter geen intrinsieke dimensies. Dat wil zeggen, ze hebben geen dimensies die van nature bij hen horen.

Hoewel rasteritems met GEEN intrinsieke afmetingen zich uitstrekken zodat ze in hun rastergebied passen, is dit niet het geval voor rasteritems met een intrinsieke dimensie, bijvoorbeeld afbeeldingen.

5. Weet u echt wat een rasteritem is?

Overweeg het onderstaande codeblok:

    
block     
zweven         Ik ben een willekeurige tekst              item 4     

Kun je in het bovenstaande codeblok de rasteritems herkennen?

Hoeveel rasteritems bevinden zich in het codeblok, 3 of 4?

Ik heb deze vraag flagrant beantwoord.

Let op: de tekst Ik ben een willekeurige tekst wordt niet ingepakt door HTML-tags.

welke is het?

Wat is je antwoord?

Nou, als je 3 hebt geantwoord, heb je het mis. Haha, ik heb je!

Volgens de specificatie wordt een anoniem rasteritem rond elke tekststap binnen een raster gewikkeld.

Ja, dat betekent dat ik een willekeurige tekst ben en ook een rasteritem.

block     
zweven
    
    Ik ben een willekeurige tekst

    
        item 4
    

Ja, het antwoord is 4. We hebben 3 expliciete rasteritems en 1 anoniem rasteritem!

Heb het?

6. De marges van aangrenzende rasteritems worden niet samengevouwen.

Er zijn grote verschillen tussen blokelementen en rastercontainers.

Wat ik bedoel is, een element met display: block en een ander met display: grid hebben veel fundamentele verschillen.

Het verschil dat ik hier wil bespreken, heeft te maken met opvouwbare marges.

Een van de eerste dingen die u leert met CSS is het concept van opvouwbare marges. Ik wil niet veel tijd besteden aan het uitleggen van opvouwbare marges. Als je het in de commentaren naar voren brengt, zal ik dat doen.

Dus, terug naar rasters.

Bij elk rasteritem worden de marges nooit samengevouwen.

Welnu, dit is begrijpelijk. Ik zal je laten zien waarom.

Aangrenzende rasteritems zijn onafhankelijk opgenomen in het bevattende blok gevormd door hun rastergebieden.

Wat die complexe paragraaf hierboven betekent, is dit. Elk rasteritem leeft en ademt binnen een rastergebied

Rasteritems worden binnen hun respectieve rastergebieden geplaatst. Ze verblijven in hun eigen ongestoorde gebieden. Ze worden niet beïnvloed door opvouwbare marges. Hoe cool.

Dus technisch gezien kun je zeggen dat het rasteritem geen directe buur is van de andere rasteritems. Maar bevindt zich in een ononderbroken gesloten gebied - het rastergebied.

Als je nieuwsgierig bent naar andere verschillen tussen blokelementen en rasterelementen, heb ik een interessant artikel over dit onderwerp geschreven.

7. automatisch invullen en automatisch aanpassen. Wat is het verschil?

Hoewel automatisch invullen en automatisch aanpassen dezelfde functies lijken, verschillen ze op een bepaalde manier.

Ze zijn vergelijkbaar in de zin dat ze automatisch rastersporen maken die de rastercontainer op de een of andere manier vullen.

Met de volgende code worden bijvoorbeeld zoveel 200px-kolommen gemaakt als in de vensterbreedte passen. Als er nog ruimte over is, wordt deze verdeeld over de 200 px-kolommen.

lichaam {
  weergave: rooster;
  grid-template-kolommen: herhalen (automatisch vullen, minmax (200 px, 1fr));
}

Wat is het verschil?

automatisch vullen maakt tracks, zelfs als er geen rasteritem is om het op te vullen. auto-fit doet dit niet. Het zal lege tracks tot nul laten leeglopen.

Dat is alles.

8. In de definitie van raster-sjabloon-gebieden MOET het aantal woorden in een string gelijk zijn.

Herinner je je de vreemd uitziende waarden van raster-sjabloongebieden die op een kaart lijken?

Nou, het lijkt erop dat het de dingen heel snel kan verpesten.

In een aangifte rastersjabloongebieden moeten alle strings hetzelfde aantal kolommen hebben, anders is de aangifte ongeldig.

Bijvoorbeeld:

/ * dit is geldig * /
grid-template-areas: "header header header sidebar"
                     "hoofd hoofd hoofdzijbalk"
                     "hoofd hoofd hoofdzijbalk"
/* dit is fout */
grid-template-areas: "header header header sidebar"
                     "hoofd hoofd hoofdzijbalk"
                     "hoofdzijbalk"

Het aantal woorden in de tekenreeks moet gelijk zijn.

9. Vermijd het gebruik van percentages in opvullingen of marges op rasteritems

Van de CSS Grid Spec

De reden hiervoor is eenvoudig. Op het moment dat u dit schrijft, krijgt u ander gedrag in verschillende browsers.

Volgens de specificatie kan het percentage worden opgelost tegen de breedte van het element alleen of links / rechts marges tegen de breedte, terwijl de boven- / onderkant worden opgelost tegen de hoogte

Voor een consistente weergave in de meeste browsers, vermijd het gebruik van percentages in opvullingen of marges van rasteritems.

Wat nog belangrijker is, er zijn al een paar verwarrende stukjes met het CSS Grid. Schiet jezelf niet in de voet met percentages paddings of marges in rasteritems.

10. Hoe is de grootte van het expliciete raster opgelost bij een conflict?

Stel dat u een rasterverklaring als volgt hebt:

grid-template-areas: "header header header sidebar"
                     "hoofd hoofd hoofdzijbalk"
                     "hoofd hoofd hoofdzijbalk"

In het bovenstaande codeblok hebt u 4 kolommen en 3 rijen.

Wat als u dit ook deed:

grid-template-columns: herhaal (5, 1fr)
grid-template-rijen: herhalen (4, 1fr)

Nu heb je meer kolommen en rijen. 5 kolommen en 4 rijen.

Je hebt het?

Er is nu een conflict in de verklaringen. Dus, hoe is dit opgelost?

Volgens de specificatie wordt de grootte van het expliciete raster bepaald door het grootste aantal rijen / kolommen gedefinieerd door raster-sjabloongebieden en het aantal rijen / kolommen gerangschikt door raster-sjabloon-rijen / raster-sjabloon-kolommen .

De spec lijkt misschien iets ingewikkelds. Dat betekent in gewone taal dat de aangifte met het grootste aantal rijen of kolommen wint.

In het bovenstaande voorbeeld neemt het raster 5 kolommen in, en 4 rijen NIET 4 kolommen en 3 rijen.

* BEWERKEN: de eigenschap grid-template-areas wordt gebruikt om rasteritems op een raster te plaatsen. Dus, waarom zouden we een conflict hebben in de rasterdefinitie? Moeten grids niet worden gedefinieerd met alleen de eigenschappen grid-template-kolommen en grid-template-rijen? Ik beantwoord dit in het commentaargedeelte. Bekijken.

11. De grootte van het raster is niet louter de som van de spoorgroottes

Rasterbanen verwijzen naar de afstand tussen rasterlijnen.

Hoewel dit eenvoudig is, is het het vermelden waard als je een raster met vaste breedte hebt ingesteld.

De grootte van het raster kan worden beïnvloed door de raster-rij-opening, raster-kolom-opening en justify-content, align-content. Die helaas ook extra ruimte tussen tracks kan toevoegen.

Wees dus voorzichtig bij het berekenen van vaste breedten binnen het raster.

BONUS: We kunnen allemaal bijdragen aan het verbeteren van de DOCS

Omdat ik een vriendelijke ziel ben, heb ik hier nog een tip toegevoegd

De Spec is geschreven door mensen. En het gebeurt zo dat mensen fouten kunnen maken.

Tijdens het lezen van de specificatie zag ik een kleine typfout.

Ik wist toen nog niet zo goed wat ik moest doen. Dus vroeg ik rond op Twitter.

Het soort Jen Simmons hielp bij het indienen van een probleem op github, en het werd opgelost.

Wat is de moraal?

U kunt helpen de documenten beter te maken door op elke mogelijke manier bij te dragen.

Ja jij!

Laten we het web samen verbeteren.

Wil je Pro worden?

Download mijn gratis CSS Grid-gids en ontvang ook gratis twee hoogwaardige interactieve Flexbox-cursussen!

Hoe u het CSS-raster onder de knie krijgt en wat u onderweg moet bouwen (gratis PDF-gids)

Koop ze nu