CSS Grid in IE: Debunking Common IE Raster Misvattingen

0
44

Dit is de eerste van een driedelige serie over het gebruik van CSS grid op een manier die werkt niet alleen in de moderne browsers, maar ook in Internet Explorer (IE). Stel je het schrijven van CSS grid code zonder dat het schrijven van een fallback lay-out! Velen van ons denken dat dit een verre toekomst, dat is al vele jaren weg. Als het enige wat houdt u terug van die realiteit is IE11 (controleren caniuse.com), dan heb je geluk! Die dag is het vandaag! Of op zijn minst zal worden wanneer u klaar bent met het lezen van deze serie. 😉

Serie Artikelen:

  1. Debunking Common IE Raster Misvattingen (Deze Post)
  2. CSS Grid en de nieuwe Autoprefixer (Coming Soon!)
  3. Het vervalsen van een auto-plaatsing rooster met gaten (Coming Soon!)

Om te beginnen, dit eerste deel gaat afkraken enkele veelvoorkomende misvattingen rond IE11 native grid implementatie.

In Deel 2 ga ik klap het deksel van de mythe dat met behulp van CSS grid in IE11 is super moeilijk. Niet meer crappy fallback-outs voor IE11!

In Deel 3, en ik toon je een koele flexbox techniek die ik gebruik voor het maken van eenvoudige auto-plaatsing van rasters. Deze nep-auto-plaatsing van rasters hebben een vaste pixel-gebaseerd grid gaten en raster hiaten die line-up perfect met degenen die gemaakt zou kunnen worden met de werkelijke CSS grid. Met uitzondering van, in dit geval, ze werken perfect in IE11, zijn volledig responsive, en het bijwerken van hun kolom telling gebaseerd op de breedte van het scherm vereist alleen het veranderen van een enkele breedte van de waarde in een media query.

Dat is genoeg intro ‘ s kunt aan de slag op deze misvattingen!

IE doet een impliciete grid

In CSS grid, de expliciete grid is dat u handmatig definiëren met alle van de raster-template-* eigenschappen. De impliciete rooster is hoe de browser de plaatsing van de cellen die worden geplaatst buiten de expliciet raster.

Wanneer met behulp van CSS grid in moderne browsers, de impliciete grid is vrij duidelijk, aangezien de grid zal blijven maken en plaatsen raster cellen automatisch op nieuwe rijen zonder te definiëren. Heeft IE geen auto-plaatsing, dus het is gemakkelijk om te veronderstellen dat IE het niet hebben van een impliciete raster. Het is alsof je hoeft alleen maar een beetje meer expliciet als het gaat om het gebruiken van het.

Zie de Pen Expliciete versus impliciete raster door Daniel Tonon (@daniel-tonon) op CodePen.

De meest voorkomende use case voor het gebruik van IE ‘ s impliciete grid wordt gebruikt voor het genereren van uw rijen voor je. Als u wilt dat alle rijen in het raster hebben hun hoogte bepaald door de hoogte van de inhoud ervan, hoeft u niet lastig te definiëren -ms-grid-rijen (de IE-versie van grid-template-rijen). De rijen worden automatisch voor u gegenereerd in IE bij het plaatsen van een raster van cellen.

Een belangrijk ding om op te merken is echter dat moderne browsers hebben toegang tot de eigenschappen raster-auto-rijen en raster-auto-kolommen. Deze eigenschappen kunt u bepalen hoe de browser de grootte van rijen en kolommen in de impliciete raster. IE heeft geen concept van deze eigenschappen. IE is de impliciete rijen en kolommen kunnen alleen de grootte van de auto.

IE is herhaal functionaliteit

Vrees niet! Er is geen behoefte om te schrijven 1fr 20px 12 keer voor al uw kostbare 12-raster (IE geen native grid-gap-ondersteuning). IE komt voorverpakte met volledige herhaal() functionaliteit. Het is gewoon zich te verschuilen achter een andere syntaxis.

De moderne syntaxis voor het herhalen van de waarden die in kolommen en rijen herhaald(12, 1fr 20px) betekenis, “herhaal de 1fr 20px patroon 12 keer.” De IE-versie van de syntaxis (1fr 20px)[12]. De IE-versie heeft dezelfde functionaliteit, maar een andere syntaxis.

/* Dit rooster… */
.grid-een {
display: -ms-net;
display: grid;
-ms-grid-kolommen: 1fr 20px 1fr 20px 1fr 20px 1fr;
grid-template-kolommen: 1fr 20px 1fr 20px 1fr 20px 1fr;
}

/* …is precies hetzelfde als dit raster: */
.grid-twee {
display: -ms-net;
display: grid;

/* IE herhaal syntaxis */
-ms-grid-kolommen: 1fr (20px 1fr)[3];

/* Moderne herhaal syntaxis */
grid-template-kolommen: 1fr herhaal(3, 20px 1fr);
}

Andere dan de syntaxis, er is alleen een verschil tussen de manier waarop moderne browsers en internet explorer de uitvoering van de herhaal() functie. Moderne browsers toegevoegd de auto-fit en automatisch invullen van trefwoorden aan de functie. Omdat IE geen ondersteuning voor auto-plaatsing, deze zoekwoorden zijn vrij zinloos om IE zo vermijd het gebruik van hen.

minmax() wordt standaard ondersteund in IE

minmax() is een CSS dimensionering van de functie die is exclusief voor CSS grid (op het moment dan). De functionaliteit is vrij voor zichzelf. U geeft dit een minimale waarde in de eerste parameter en een maximale waarde in de tweede parameter. De kolom of rij waarin deze wordt toegepast, dan kunnen krimpen en groeien tussen die twee waarden als de beschikbare ruimte voor het stijgingen en dalingen. Probeer de grootte van de codepen hieronder in actie te zien.

Zie de Pen minmax() demo door Daniel Tonon (@daniel-tonon) op CodePen.

Mensen denken vaak dat dit geweldige kleine functie wordt niet ondersteund in internet explorer, maar het is in feite ondersteund. Ik vermoed dat dit te wijten is aan ten minste één van deze twee redenen:

  1. Het is cool functionaliteit en ze denken dat IE het niet kan hebben leuke dingen als deze omdat IE zuigt.
  2. Iedereen heeft gezien dat deze magische code en hadden hun dromen in duigen, toen ze zich realiseerden dat het niet zou werken in IE: grid-template-kolommen: herhaal( auto-fit, minmax(250px, 1fr) );.

(Als u nog nooit gezien dat fragment voor, bekijk deze korte video en voor te bereiden op je geest geblazen.)

Sinds de magie fragment niet werkt in IE, mensen waarschijnlijk aannemen dat niets in het fragment is IE-vriendelijk. In werkelijkheid, de enige reden waarom de code niet repliceerbaar in IE is omdat IE geen ondersteuning voor de auto-fit trefwoord en auto-plaatsing.

min-inhoud en max-inhoud zijn beide 100% IE-vriendelijk

IE is voor volledige “native” ondersteuning voor zowel de min-inhoud en max-content waarden.

min-inhoud is een sleutelwoord waarde die krimpen de kolom of rij neer op de minimale breedte die de inhoud kan krimpen. Indien toegepast op een kolom, dit betekent in wezen dat de kolom de breedte van het langste woord.

Zie de Pen min-inhoud demo door Daniel Tonon (@daniel-tonon) op CodePen.

max-inhoud, aan de andere kant, zal het groeien van de kolom/rij aan de maximale breedte die de inhoud neemt, en niet verder. Als je ooit set white-space: nowrap op een groot deel van de tekst, zal dit lijken erg op elkaar.

Zie de Pen max-inhoud demo door Daniel Tonon (@daniel-tonon) op CodePen.

Ik had niet verwacht IE voor de ondersteuning van deze waarden voornamelijk omwille van de reden dat iemand onder minmax(). Ik was blij verrast toen ik werd bewezen mis tijdens het onderzoeken van IE11 raster ondersteuning. In combinatie met minmax(), er zijn niet veel rasters die een moderne browser kan maken dat IE het niet aankan (zolang de netten niet inhouden auto-plaatsing).

fit-inhoud() is niet IE vriendelijk maar…

fit-content (inhoud) niet native werken in IE. 😢

Gelukkig, fit-content (inhoud) is een soort steno-syntaxis en als je het schrijft de lange weg, IE doet ondersteuning! 🎉

De lange weg om het te schrijven is door het toepassen van een auto (of meer specifiek, minmax(min-inhoud, max-inhoud)) naar de kolom/rij in de raster-sjabloon, het vervolgens instellen van een max-width: [waarde] op het onderliggende element.

Hier is een voorbeeld van het gebruik van de fit-inhoud() functie in een moderne browser:

/* Dit is niet IE-vriendelijk */
.raster {
display: grid;
grid-template-kolommen: 100px fit-inhoud(300 pixels) 1fr;
}

.cel {
grid-kolom: 2;
}

Wat fit-content (inhoud) is in principe zeggen: hier is het, “het maken van de middelste kolom de maximale breedte van de inhoud ervan (d.w.z. de max-inhoud-waarde) tot het bereikt 300px op dat punt niet verder groeien, tenzij gedwongen.”

Zie de Pen aanpassen content (inhoud) modern voorbeeld 1 door Daniel Tonon (@daniel-tonon) op CodePen.

Als u dit leest op mobiele bekijk dit secties Codepen demo ‘ s op in de liggende stand voor een beter begrip.

Om IE zich gedragen in de vorm van de op dezelfde manier, zou je nodig hebt om de code te schrijven, zoals dit:

/* IE-vriendelijke `fit-inhoud()` alternatief */
.raster {
display: -ms-net;
display: grid;
-ms-grid-kolommen: 100px auto 1fr;
grid-template-kolommen: 100px auto 1fr;
}

.cel {
-ms-grid-kolom: 2;
grid-kolom: 2;
max-width: 300px;
}

Zie de Pen aanpassen de inhoud IE hack door Daniel Tonon (@daniel-tonon) op CodePen.

Let op: dit is niet een full-proof methode van het repliceren van fit-content (inhoud) in IE. Als er een andere cel met inhoud, dat neemt meer breedte dan de max breedte instelling van de andere cel, het raster kolom zal groeien om te passen de grotere cel. Het zal niet worden geklemd aan 300px als het zou met fit-content (inhoud).

Zie de Pen Gebroken fit-inhoud hack door Daniel Tonon (@daniel-tonon) op CodePen.

Vergelijk dat met de moderne fit-inhoud() functie van de klemmen van de gehele kolom:

Zie de Pen aanpassen content (inhoud) moderne bijvoorbeeld door Daniel Tonon (@daniel-tonon) op CodePen.

Terwijl ik op het onderwerp, ik moet duidelijk een veel voorkomende misvatting rond de fit-inhoud() functie zelf. De misvatting is dat de kolom (of rij) dat het van toepassing is, kan nooit hoger zijn dan de waarde die u hebt opgegeven met de functie. Dit is niet het geval. Als een kolom is ingesteld op een breedte van fit-inhoud(300 pixels), en een grid cel in die kolom is ingesteld op een breedte van 400px, de breedte van de kolom zal worden 400px, niet 300px zoals veel mensen misschien verwachten.

Zie de Pen Gebroken modern fit-inhoud door Daniel Tonon (@daniel-tonon) op CodePen.

De IE auto != Moderne auto

De waarde auto in IE gedraagt zich een beetje anders dan de auto in de moderne browsers. In IE, auto strikt gelijk aan minmax(min-inhoud, max-inhoud). Een kolom of rij ingesteld op auto in IE kan nooit krimpen kleiner dan bij het min-inhoud. Het kan ook nooit te groeien groter dan max-inhoud.

Moderne browsers behandeling van de waarde auto in een beetje anders. Voor het grootste deel, wanneer de waarde gebruikt op haar eigen, ze nog steeds in de behandeling van auto als minmax(min-inhoud, max-inhoud). Er is een klein maar essentieel verschil is echter: auto in moderne browsers kan worden opgerekt door de lijn-inhoud en de rechtvaardigen-eigenschappen content. IE niet mogelijk is.

Als de auto wordt gebruikt voor de dimensionering van de kolommen in een moderne browser, auto gedraagt zich meer als 1fr als er niet genoeg inhoud om de kolom te vullen. IE doet het niet. Zal IE altijd krimpt de kolom omlaag om de grootte van max-inhoud.

Dus, als u deze code definiëren van het raster:

.raster {
display: -ms-net;
display: grid;
-ms-grid-kolommen: auto;
grid-template-kolommen: auto;
}

Je zal eindigen met dit in moderne browsers:

Moderne browser die automatisch de breedte van kolommen met weinig inhoud. Kolommen het rooster te vullen.

…en dit in IE:

IE automatisch de breedte van kolommen met weinig inhoud. Kolommen krimpen aan de inhoud.

Ok, het moderne browser een veel lijkt op wat we krijgen als we gebruik 1fr. Kunnen we gebruik maken van minmax(min-inhoud, 1fr) voor IE dan? Dat rekt het uit, net zoals in de moderne browsers niet?

Ja, maar dan lopen we in deze uitgave:

.raster {
display: -ms-net;
display: grid;
-ms-grid-kolommen: minmax(min-inhoud, 1fr) minmax(min-inhoud, 1fr);
grid-template-kolommen: auto;
}

Moderne browsers:

Moderne browser die automatisch de breedte van kolommen met veel van de inhoud in een cel. Kolommen zijn in verschillende breedtes.

IE:

IE minmax(min-inhoud, 1fr) kolommen met veel van de inhoud in een cel. Kolommen van gelijke breedte.

FYI, minmax(min-inhoud, 1fr) is in wezen 1fr en 1fr en niet gelijk de auto. Ik heb ook geprobeerd minmax(min-inhoud, 100%) in IE, maar dat slechts resulteerde in het zelfde op zoek raster als het gebruik van 1fr. Voor zover ik kan vertellen, het is niet mogelijk na te bootsen van de moderne browser auto functionaliteit in IE.

Er is nog een essentieel verschil tussen IE en moderne versies van de waarde auto wel. Sinds de IE-versie van de auto expliciet is gelijk aan minmax(min-inhoud, max-inhoud), de auto kan niet worden gebruikt in minmax () – expressies. minmax() kan niet worden gebruikt in een andere minmax () – functie, zodat automatisch gediskwalificeerd.

Moderne browsers zijn een beetje genuanceerder. Zij erkennen dat de auto kan verschillende dingen betekenen in verschillende contexten. Als het gebruikt wordt op zijn eigen, in wezen gelijk is aan minmax(min-inhoud, max-inhoud), maar met de mogelijkheid toegevoegd om op te rekken. Wanneer gebruikt als een max-waarde, auto is identiek aan het max-inhoud. Wanneer het gebruikt wordt als een min waarde het in wezen gelijk is aan min-inhoud.

Als nu, u zweren om nooit gebruik automatisch in uw raster sjablonen ooit weer, wilt u misschien heroverwegen. Er zijn slechts drie omstandigheden waar de auto zich anders zal gedragen tussen de moderne browsers en IE. Deze zijn:

  1. auto wordt gebruikt in grid-template-kolommen zonder een fr-eenheid in dezelfde verklaring.
  2. auto wordt gebruikt in grid-template-rijen zonder een fr-eenheid in dezelfde verklaring en de hoogte van het rooster is groter dan de hoogte van de rastercellen.
  3. auto wordt gebruikt in een minmax() functie.

Dat is het! Dat zijn de enige keer wanneer de auto zich anders zal gedragen in IE naar hoe het zich gedraagt in de moderne browsers. auto is veel makkelijker te schrijven dan minmax(min-inhoud, max-inhoud) dus het is niet echt de moeite waard veroordeelt het over een paar kleine browser inconsistenties die gemakkelijk kan worden vermeden.

Dus wat hebben we geleerd?

  • IE doet een impliciete raster.
  • IE ondersteunt herhaal functionaliteit.
  • minmax(), min-inhoud en max-inhoud worden allemaal ondersteund.
  • fit-inhoud() niet ondersteund, maar u kunt dit omzeilen met auto en max-width instellingen.
  • De IE auto is niet gelijk aan de auto in de moderne browsers.

Niet de netten het net nog wel. Er zijn nog een heleboel dingen die je moet weten voordat je kunt beginnen met het veilig implementeren van IE grids in uw websites. Zorg ervoor om te blijven voor Deel 2! Ik zal laten zien dat u alles wat u moet weten om veilig bouwen van websites voor zowel IE en moderne browsers met alleen CSS grid. Het beste van alles, er zal niet meer nodig zijn voor de crappy fallback-outs!

Serie Artikelen:

  1. Debunking Common IE Raster Misvattingen (Deze Post)
  2. CSS Grid en de nieuwe Autoprefixer (Coming Soon!)
  3. Het vervalsen van een auto-plaatsing rooster met gaten (Coming Soon!)

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!