CSS Grid in IE: CSS Grid en de Nieuwe Autoprefixer

0
23

In Deel 1 van deze serie, ik afrekende met een aantal misvattingen die veel mensen hebben rond de Internet Explorer (IE) implementatie van CSS grid. Dit artikel bouwt voort op die kennis. Het beste zou zijn om terug te gaan en lees dat artikel als eerste, als je dat nog niet hebt gedaan.

Vandaag ben ik gaan om het aanpakken van de grootste misverstand: dat het gebruik van de IE implementatie van CSS grid is uiterst moeilijk. U kunt eenvoudig gebruik maken van CSS grid in IE nu zonder het hebben van om het even welke soort crappy fallback lay-out. Het is echt niet zo moeilijk.

Serie Artikelen:

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

Geeft IE een waardeloze fallback lay-out is een beetje een moeilijk te verkopen aan klanten. Het is vooral moeilijk als deze is voor een intranet waar 90% van de gebruikers met behulp van IE. Als u wilt dat IE compatibiliteit, eerst moet je je neerleggen bij het feit dat je niet kunt gebruik maken van alle van de fancy toeters en bellen die kan worden gevonden in de moderne CSS grid spec. Laat dit niet op je kop zitten, hoewel, je zou versteld staan van hoeveel IE11 kan behandelen, vooral als het heeft wat hulp van Autoprefixer.

Voordat ik te ver op in, je moet weten dat dit niet een algemene “hoe wordt het gebruik van CSS grid” artikel. Dit artikel is voor degenen die begrijpen dat een CSS grid, maar zijn te bevreesd of niet toegestaan gebruik te maken, mede dankzij IE.

Ik zal ervan uitgaande dat je al een goed begrip van het gebruik van CSS grid in moderne browsers voor dit artikel. Als u niet zeker bent over het gebruik van CSS grid nog, ga kijken Rachel Andrew ‘ s uitstekende CSS grid video tutorial serie. Daarna ga spelen een aantal niveaus van het spel Grid Tuin om een hands-on CSS grid ervaring. Zodra u inzicht in de basisprincipes van het gebruik van CSS grid in moderne browsers, kom dan hier terug en leren hoe het te gebruiken op een manier die produceert identieke resultaten in IE10 en 11.

Het opzetten van Autoprefixer

Voordat u iets anders doet, wil je Autoprefixer up and running. Autoprefixer is een instrument dat wordt gebruikt voor het automatisch toevoegen van browser-specifieke CSS prefixen aan je CSS zodat u niets hoeft te doen. Het is een beetje als Babel, maar voor CSS. (We hebben een goed overzicht van de maker van Autoprefixer hier op CSS Trucs.)

Als u nog nooit gebruikt Autoprefixer (of een build-hulpmiddel), dan installeert u eerst Knooppunt op uw computer, volg dan deze gids op hoe te krijgen van een eenvoudige workflow-up en running. De bits in de gids specifiek over Autoprefixer is hier te vinden. (Ik raad de Gulp setup over Grunt als u niet zeker weet waar te gaan.)

Als je al een Autoprefixer in uw projecten, zorg ervoor om te updaten naar de nieuwste versie met gebruik van dit commando:

npm ik autoprefixer@nieuwste -D

Sommige van de gebruikte functies in de nieuwste versie van Autoprefixer worden niet ondersteund in PostCSS versie 5. Dit betekent dat u moet mogelijk ook het bijwerken van uw versie van PostCSS minstens versie 6. Als u de Gulp, dat betekent dat het bijwerken van de gulp-postcss ten minste v7.0.0. Als u Grunt, moet u mogelijk een update grunt-postcss ten minste v0.9.0.

Zodra u in een omgeving werkt, moet u het instellen van de Autoprefixer raster instellen op true. Zonder die instelling is ingeschakeld, Autoprefixer niet in staat zal zijn om een van de leuke dingen die ik ga het je laten zien.

De exacte methode voor het draaien van het raster instellen op, hangt erg af van hoe je het compileren van de code. Als u met behulp van de handleiding die ik gekoppeld heb aan vroeger, zou je hebben gezien dat dit stukje code:

var processorsArray = [
// geknipt voor de beknoptheid
require(‘autoprefixer’)({ browsers: [‘laatste 2 versies’, ‘ie 6-8’, ‘Firefox > 20’] })
];

Toevoegen raster: true om de opties aan te zetten raster voorvoegsel op:

var processorsArray = [
// geknipt voor de beknoptheid
require(‘autoprefixer’)({ grid: true, browsers: [‘laatste 2 versies’, ‘ie 6-8’, ‘Firefox > 20’] })
];

Door de manier, de instellingen van de browser in de tutorial zijn behoorlijk verouderd en zal het uitvoeren van veel meer voorvoegsels dan je eigenlijk nodig hebt. Gewoon gaan met “>1%” betekent dat wanneer een browser sterft, Autoprefixer zal automatisch stoppen met schrijven voorvoegsels voor die browser. Het baseert gebruik van de browser op de wereldwijde browser gegevens die zijn opgehaald uit caniuse.com.

Dus, dit zijn de Autoprefixer de instellingen die u moet gebruiken:

var processorsArray = [
require(‘autoprefixer’)({ grid: true, browsers: [‘>1%’] })
];

Nu op de leuke dingen! 😃

Autoprefixer heeft een nieuwe super krachten!

Je hebt kunnen lezen Rachel Andrew ‘ s artikel “Moet ik proberen om het gebruik van de IE implementatie van CSS Grid Lay-out?” Dat artikel is al over CSS grid en het begrijpen van het de steun in IE10 en 11. Het is een goed artikel en erg nuttig voor het begrijpen van IE ‘ s beperkingen. Zeker nog steeds de moeite waard om te lezen als je dat nog niet gedaan hadden. Let op: het is zeer verouderd in termen van de informatie op Autoprefixer al.

Autoprefixer heeft een lange weg afgelegd sinds Rachel schreef haar IE11 CSS grid artikel en Autoprefixer ondersteunt nu veel meer CSS grid vertalingen. Neem een kijkje op deze nieuwe, geactualiseerde versie van Rachel ‘ s tabel is gebaseerd op Autoprefixer versie 8.6.4. Opmerking items in vet vertegenwoordigen een verandering in Autoprefixer ondersteuning in vergelijking met Rachel ‘ s artikel:

CSS Grid Eigendom
IE10 Uitvoering
Autoprefixer?
Opmerkingen
grid-template-kolommen -ms-grid-kolommen Ja
grid-template-rijen -ms-grid-rijen Ja
grid-template-gebieden NA Ja Autoprefixer gebruikt deze om te begrijpen hoe het rooster eruit ziet, maar voegt geen extra eigenschappen.
grid-sjabloon NA Ja Shorthand voor raster-template-kolommen, raster-template-rijen, en raster-template-gebieden
grid-auto-columns NA Geen IE ondersteunt niet automatisch plaatsing
grid-auto-rijen NA Geen IE ondersteunt niet automatisch plaatsing
grid-auto-flow NA Geen IE ondersteunt niet automatisch plaatsing
rooster NA Geen Zie deze GitHub vraag waarom dit niet ondersteund
grid-rij-start -ms-grid-rij Ja1 Span syntaxis moet grid-rij-end te worden gedefinieerd
grid-kolom-start -ms-grid-kolom Ja1 Span syntaxis moet grid-kolom-einde worden gedefinieerd
grid-rij-einde NA Ja1 grid-rij-start moet worden gedefinieerd
grid-kolom-einde NA Ja1 grid-kolom-start moet worden gedefinieerd
grid-rij NA Ja1
grid-kolom NA Ja1
grid-omgeving NA Ja2 Autoprefixer vertaalt het raster-gedeelte in een kolom/rij-coördinaten
grid-rij-gap NA Ja3 Genereert extra rijen/kolommen in IE.
grid-column-gap NA Ja3 Genereert extra rijen/kolommen in IE.
grid-gap NA Ja3 Genereert extra rijen/kolommen in IE.
NA -ms-grid-kolom-span Ja Vertaald uit het grid-kolom-einde en grid-omgeving.
NA -ms-grid-rij-span Ja Vertaald uit het grid-rij-einde en grid-omgeving.
lijn-zelf -ms-grid-rij-lijn Ja
rechtvaardiging-zelf -ms-grid-kolom-lijn Ja

Tabel disclaimers

Ik zal de dekking van deze in veel meer detail later in het artikel:

  1. Autoprefixer niet prefix-negatieve gehele getallen.
  2. Elk raster element moet uniek gebied namen.
  3. Autoprefixer alleen voorvoegsels grid-gap als zowel raster-template-gebieden en raster-template-kolommen is gedefinieerd. Het is ook niet beerven kunnen, en raster-kloof door middel van media queries.

grid-template-gebieden is je nieuwe beste vriend

Zoals u kunt zien uit het geactualiseerde (en nog veel meer positieve ogende) tafel, er zijn veel coole, nieuwe features in Autoprefixer nu. De belangrijkste is de ondersteuning voor raster-template-gebieden (en bij uitbreiding raster-sjabloon). Door de ondersteuning van grid-template-gebieden, Autoprefixer nu precies begrijpt wat uw rooster eruit ziet. Dit effende de weg voor Autoprefixer ook ondersteunen (in een beperkte capaciteit) grid-kloof.

Merk op dat Autoprefixer nog steeds geen ondersteuning voor de snelkoppeling raster eigendom. Dit was een opzettelijke ontwerp-besluit dat u meer kunt leren over in dit GitHub issue. Het korte verhaal is dat het raster woning is niet alleen een snelkoppeling voor de template-instellingen, maar ook de auto-plaatsing instellingen. Omdat IE niet kan auto-plaatsing en de grid-sjabloon eigendom kan in feite alles doen dat het raster eigendom kan doen (dat IE aankan), werd besloten dat het raster goederen niet de moeite waard was te ondersteunen.

Terug bij Rachel schreef haar artikel, dit was het soort grid code die je nodig zou hebben om te schrijven ter ondersteuning van IE:

/* IE-vriendelijke broncode 26 November 2016 */
/* De Code die nodig is om Autoprefixer goed werkt */

.raster {
display: grid;
grid-template-kolommen: 1fr 10px 1fr;
grid-template-rijen: 100px 10px 100px;
}

.cel-A {
grid-kolom: 1;
grid-rij: 1;
}

.cel-B {
grid-kolom: 3;
grid-rij: 1;
}

.cel-C {
grid-kolom: 1;
grid-rij: 3;
}

.cel-D {
grid-kolom: 3;
grid-rij: 3;
}

Nu kun je code schrijven als deze in de plaats:

/* Vandaag de dag de IE-vriendelijke source code */
/* Autoprefixer kunt nu deze code IE veilig is */

.raster {
display: grid;
grid-gap: 10px;
grid-sjabloon:
“een b” 100px
“c d” 100px /
1fr 1fr;
}

.cel-A {
grid-gebied: een;
}

.cel-B {
grid-omgeving: b;
}

.cel-C {
grid-omgeving: c;
}

.cel-D {
grid-omgeving: d;
}

Autoprefixer zal de bovenstaande code en te vertalen naar een veel meer IE-vriendelijke code voor u:

/* Autoprefixer de IE-vriendelijke vertaling */

.raster {
display: -ms-net;
display: grid;
grid-gap: 10px;
-ms-grid-rijen: 100px 10px 100px;
-ms-grid-kolommen: 1fr 10px 1fr;
grid-sjabloon:
“een b” 100px
“c d” 100px /
1fr 1fr;
}

.cel-A {
-ms-grid-rij: 1;
-ms-grid-kolom: 1;
grid-gebied: een;
}

.cel-B {
-ms-grid-rij: 1;
-ms-grid-kolom: 3;
grid-omgeving: b;
}

.cel-C {
-ms-grid-rij: 3;
-ms-grid-kolom: 1;
grid-omgeving: c;
}

.cel-D {
-ms-grid-rij: 3;
-ms-grid-kolom: 3;
grid-omgeving: d;
}

Het beste van alles, je kunt dan gewoon de grid-sjabloon of raster-template-gebieden woning met een media query en Autoprefixer wordt automatisch bijwerken van alle van de cel coördinaten voor u:

/* Het wijzigen van een raster-sjabloon met een media-query */

.raster {
display: grid;
grid-gap: 10px;
grid-sjabloon:
“een b” 100px
“c d” 100px
“e f” 100px /
1fr 1fr;
}

@media (min-width: 600px){
.raster {
/* Autoprefixer 8.6.4 niet erven raster gaten 🙁 */
grid-gap: 10px;
grid-sjabloon:
“a b c” 100px
“d e f” 100px /
1fr 1fr 1fr;
}
}

.cel-A {
grid-gebied: een;
}

.cel-B {
grid-omgeving: b;
}

.cel-C {
grid-omgeving: c;
}

.cel-D {
grid-omgeving: d;
}

.cel-E {
grid-gebied: e;
}

.cel-F {
grid-omgeving: f;
}

De hierboven wordt vertaald in deze IE-vriendelijke code:

/* Autoprefixer de IE-vriendelijk media query vertaling */

.raster {
display: -ms-net;
display: grid;
grid-gap: 10px;
-ms-grid-rijen: 100px 10px 100px 10px 100px;
-ms-grid-kolommen: 1fr 10px 1fr;
grid-sjabloon:
“een b” 100px
“c d” 100px
“e f” 100px /
1fr 1fr;
}

@media (min-width: 600px) {
.raster {
/* Autoprefixer 8.6.4 niet erven gaten 🙁 */
grid-gap: 10px;
-ms-grid-rijen: 100px 10px 100px;
-ms-grid-kolommen: 1fr 10px 1fr 10px 1fr;
grid-sjabloon:
“a b c” 100px
“d e f” 100px /
1fr 1fr 1fr;
}
}

.cel-A {
-ms-grid-rij: 1;
-ms-grid-kolom: 1;
grid-gebied: een;
}

.cel-B {
-ms-grid-rij: 1;
-ms-grid-kolom: 3;
grid-omgeving: b;
}

.cel-C {
-ms-grid-rij: 3;
-ms-grid-kolom: 1;
grid-omgeving: c;
}

.cel-D {
-ms-grid-rij: 3;
-ms-grid-kolom: 3;
grid-omgeving: d;
}

.cel-E {
-ms-grid-rij: 5;
-ms-grid-kolom: 1;
grid-gebied: e;
}

.cel-F {
-ms-grid-rij: 5;
-ms-grid-kolom: 3;
grid-omgeving: f;
}

@media (min-width: 600px) {
.cel-A {
-ms-grid-rij: 1;
-ms-grid-kolom: 1;
}

.cel-B {
-ms-grid-rij: 1;
-ms-grid-kolom: 3;
}

.cel-C {
-ms-grid-rij: 1;
-ms-grid-kolom: 5;
}

.cel-D {
-ms-grid-rij: 3;
-ms-grid-kolom: 1;
}

.cel-E {
-ms-grid-rij: 3;
-ms-grid-kolom: 3;
}

.cel-F {
-ms-grid-rij: 3;
-ms-grid-kolom: 5;
}
}

De dubbele media query ziet er misschien een beetje lelijk, maar ik verzeker u dat dit de best mogelijke manier die Autoprefixer kan omgaan met de media query vertaling. De nieuwe IE grid cel coördinaten kon niet geplaatst worden in dezelfde media query als het raster de definitie van een sjabloon. Dit zou leiden tot een van de twee mogelijke uitkomsten. Een van de resultaten is dat de standaard grid cel posities boven de veranderde standpunten in de media query. Dit zou ervoor zorgen dat de media query geen effect te hebben in IE. De andere uitkomst zou zijn voor Autoprefixer te verschuiven alle stijlen binnen de media query (ja, die bestaat uit alle van de stijlen die je zelf geschreven hebt) naar een andere locatie in de style sheet, mogelijk veroorzaakt door gruwelijke CSS specificiteit problemen. U kunt meer te weten komen over de gedachte achter dit besluit in de nu gesloten GitHub issue.

Autoprefixer nog steeds niet kunt opslaan die je van alles

Zelfs Superman kan niet altijd iedereen te redden en Autoprefixer is niet anders. Terwijl Autoprefixer is in staat om te bezuinigen op veel van de werklast betrokken bij het maken van onze netten IE-compatibel zijn, niet kunnen repareren alles. Het kan alleen vertalen dingen die IE kan begrijpen. Deze zijn veel belangrijke dingen die u moet weten als u niet wilt dat om de site te openen in IE op een dag en heb het een klap in je gezicht.

Raster Gap heeft beperkte ondersteuning

Zoals je misschien hebt gezien in het laatste voorbeeld, raster-gap is op dit moment niet in staat om te worden overgenomen door media queries. Als u gebruik wilt maken rooster-gap, moet u het dubbele van de raster-gap-instelling in alle media query ‘ s waar u een raster sjabloon voor dat het net. Er is een probleem open op GitHub. Ga er een thumbs up als je wilt Autoprefixer om het te ondersteunen. Hopelijk is het probleem snel opgelost.

Dat is niet het enige probleem rond het gebruik van het elektriciteitsnet kloof al. Het is slechts ondersteund door Autoprefixer wanneer zowel raster-template-gebieden en raster-template-kolommen is gedefinieerd.

Autoprefixer voegt grid-gap ondersteuning met behulp van grid-template-gebieden om te begrijpen wat uw rooster eruit ziet. Het duurt vervolgens een raster-template-kolommen en raster-template-rijen definities en injecteert de grid-gap waarde in tussen elke rij en kolom, het creëren van extra rijen en kolommen in IE.

Als u probeert te gebruiken grid-kloof op eigen houtje zonder raster-template-gebieden, Autoprefixer heeft geen manier om te weten wat de cel behoort tot wat rooster. Zonder die essentiële kennis, is het niet veilig injecteren de extra kolommen en rijen dat IE heeft.

Dat verklaart grid-template-gebieden, maar waarom hebben we ook nodig hebben om te bepalen grid-template-kolommen? Moet niet iets als dit net zo makkelijk voor Autoprefixer te vertalen?

.raster {
display: grid;
grid-gap: 20px;
grid-template-gebieden:
“a b c”
“d e f”;
}

.cel-a {
grid-gebied: een;
}

.cel-f {
grid-omgeving: f;
}

Rijen en kolommen in een CSS grid standaard waarde van de auto kan dus niet Autoprefixer net zoiets als ms-grid-kolommen: auto 20px auto 20px auto;? Het doet dat voor rijen, dus waarom kan het niet doe hetzelfde voor de kolommen?

Nou mijn nieuwsgierige vriend, ik heb uitgelegd in Deel 1, dat de auto in IE werkt een beetje anders naar auto in de moderne browsers. Wanneer de kolommen zijn ingesteld om automatisch in IE, ze zullen altijd krimpen omlaag om de waarde van het max-inhoud. Moderne grid van kolommen, aan de andere kant, het zal uitbreiden naar 1fr als er geen andere fr-eenheden dat wordt gebruikt in grid sjabloon verklaring. Deze discrepantie kan leiden tot een enorm verschil in uiterlijk tussen de moderne en de IE-versie van een raster. De Autoprefixer team van mening dat het te gevaarlijk was om veronderstellingen te maken over dit, dus ze gemaakt grid-template-kolommen een verplichte instelling om voor raster-kloof te voeren.

Dus dat verklaart waarom Autoprefixer geen ondersteuning voor raster-gap als raster-template-kolommen ontbreekt. Indien de auto gedraagt zich dus anders in IE, waarom dan niet Autoprefixer ondersteuning grid-gap, zonder dat de gebruiker expliciet hoeft te definiëren grid-template-rijen? Is dat niet net zo erg?

Niet echt. Wanneer u display: grid; op iets, het is de breedte groeien tot de volle breedte van de container. In zijn hoogte, op de andere kant, meestal verkleind om de hoogte van de inhoud ervan. Natuurlijk is dit niet altijd het geval. Er zijn een aantal redenen waarom een raster kan groter zijn dan de inhoud. Als het raster is ook een flex-item en de flex-container is groter dan het rooster, dan zou dat een reden waarom het raster kan groter zijn dan de inhoud. In het algemeen echter, als er geen andere krachten, dan is een raster container altijd op de hoogte van de inhoud.

Aangezien de hoogte van een typische raster is op de hoogte van de inhoud, in de meeste gevallen auto in zowel IE en moderne browsers zal gedragen zich identiek aan een ander. Het zal alleen verschillen in functionaliteit als de hoogte van het rooster bedraagt dan de hoogte van de inhoud van de binnenkant van het. Voor de beste balans tussen gebruikersgemak en de browser van de consistentie, de Autoprefixer team een keuze gemaakt. Ze besloten dat het ondersteunen van een ontbrekende grid-template-rijen woning, maar niet van een ontbrekende grid-template-kolommen was een van de beste manier voor het verwerken van raster-gap ondersteunen.

Geen auto-plaatsing! Geen auto-plaatsing! Geen auto-plaatsing!

Ik kan het echt niet genoeg zeggen. De meest belangrijke ding om te onthouden bij het gebruik van CSS grid in IE is dat alles moet worden geplaatst handmatig. Op het moment dat je begint te denken over het gebruik van auto-plaatsing is de instant uw site blaast in IE. Ik heb een methode voor het omgaan met roosters hebben een onbekend aantal cellen in hen. Ik ben die dat in Deel 3 van deze serie. Het belangrijkste ding om te weten is dat als u gebruik wilt maken van CSS grid in een IE-vriendelijke manier, moet je alleen gebruiken als er een bekend nummer van de cellen voor een bekend aantal rijen en kolommen.

Het is dit gebrek aan auto-plaatsing in IE dat maakt het hebben van toegang tot het net door Autoprefixer een zegen. In plaats van het berekenen van de coördinaten handmatig, kunt u in plaats daarvan de naam van elke cel en laat Autoprefixer de berekeningen voor u doen. Bij het gebruik van media queries, hoeft u alleen maar aan het herdefiniëren van het raster sjabloon en autoprefixer herberekent alle coördinaten voor je. U zelden hebben om een kolom of rij te tellen. Het is geweldig!

Gebied namen moeten uniek zijn

De mogelijkheid tot het gebruik van grid-template-gebieden is een van Autoprefixer ‘ s sterkste punten, maar het heeft zijn grenzen. Autoprefixer heeft geen toegang tot de DOM. Vanwege dit, Autoprefixer is geheel afhankelijk van het gebruik van het gebied de naam voor het begrijpen waar elke cel moet worden geplaatst in het raster. Dit kan leiden tot botsingen als u dezelfde naam gebied twee keer in dezelfde stylesheet.

Hier is een klein voorbeeld. Vroeg in de stylesheet, Raster Alpha heeft grid-template-gebieden: “delta echo”. Later in de stylesheet, Raster Beta heeft grid-template-gebieden: “echo van de delta”. We zeggen dat onze cel behoort tot het gebied echo… dus gaat hij in kolom 1 of 2?

.grid-alpha {
grid-template-gebieden: “delta echo”;
}

.grid-beta {
grid-template-gebieden: “echo delta”;
}

.grid-cel {
/* Welke kolom wordt .grid-cel in gaan? */
-ms-grid-kolom: ???;
grid-omgeving: echo;
}

Moderne browsers exact weten wat de kolom plaats de cel in omdat zij toegang hebben tot de DOM. Als de cel is geplaatst in Raster Alpha, gaat het in de eerste kolom. Als het is geplaatst in een Raster Beta zal gaan in de tweede kolom. Autoprefixer lees je CSS. Is het geen idee als het vakje van het rooster geplaatst in een Raster Alpha of Raster Beta. Al weet is dat het vakje van het rooster dient te worden geplaatst in de “echo”. Autoprefixer verhelpt dit probleem door te gaan met welke van de twee kwam als laatste in de stylesheet. In dit geval, Autoprefixer eer Raster Beta ‘ s “echo delta gebieden”, definitie, omdat het zich voordoet als laatste. Als u het plaatsen van de cel in het Raster Alpha, het ziet er geweldig uit in moderne browsers, maar het zou geplaatst worden in de verkeerde kolom in IE.

Dit betekent ook dat je niet echt kunt gebruik maken van de strategie van het geven van een component van een enkele aangewezen gebied de naam die wordt herhaaldelijk verwezen. Het verwijzen naar dat gebied een naam in meer dan één raster-template-gebieden eigendom breken zal IE zeker. Elk gebied naam op elke grid in je stylesheet moet uniek of Autoprefixer zal freak de heck uit.

Autoprefixer momenteel niet waarschuwen u wanneer u een dubbele naam gebied in je stylesheet. Als u wilt beginnen met het zien van waarschuwingen voor dubbele gebied namen, is er een probleem open op GitHub die u kunt toevoegen aan uw steun. In de tussentijd, de eenvoudigste manier om ervoor te zorgen dat elk gebied zijn naam uniek is waarschijnlijk de vaststelling van een BEM stijl benadering voor het benoemen van de gebieden.

.grid-alpha {
grid-template-gebieden: “grid-alpha__delta grid-alpha__echo”;
}

.grid-beta {
grid-template-gebieden: “grid-beta__echo grid-beta__delta”;
}

.grid-cel {
/* Geen conflict 🙂 */
-ms-grid-kolom: 2;
grid-omgeving: grid-alpha__echo;
}

Dit kan worden vrij uitgebreid zijn als er veel kolommen en rijen. Wilt u misschien in te korten tot een afkorting voor in de plaats. Natuurlijk, de minder uitgebreid uw regio namen, hoe meer kans er is een conflict.

.grid-alpha {
grid-template-gebieden: “ga_delta ga_echo”;
}

.grid-beta {
grid-template-gebieden: “gb_echo gb_delta”;
}

.grid-cel {
-ms-grid-kolom: 2;
arid-gebied: ga_echo;
}

Er is een grote uitzondering. Raster gebieden in de media query ‘ s worden toegestaan om duplicaten van andere gebieden zo lang als het gebied namen die zijn gedefinieerd in de media query zijn gericht op hetzelfde element. Zonder deze uitzondering zou het onmogelijk zijn om het net te wijzigen gebieden op basis van de grootte van het scherm. Het belangrijkste ding om te onthouden is dat elk net heeft het zijn eigen unieke gebied namen die niet mogen worden gedeeld met de andere netten.

@media (min-width: 600px) {
.grid-een {
grid-template-gebieden:
“alpha bravo”
“alpha charlie”;
}
}

@media (min-width: 900px) {
.grid-een {
/* Dit is fijn */
/* Het is gericht op hetzelfde element */
grid-template-gebieden:
“alpha bravo charlie”;
}
}

@media (min-width: 900px) {
/* NIET FIJN! */
/* De “alpha” gebied wordt hergebruikt op een ander element! */
.grid-twee {
grid-template-gebieden:
“alpha delta”;
}
}
Autoprefixer heeft een beperkte rij-en kolom spanning ondersteuning

Er zijn slechts twee eigenschappen in IE de implementatie van CSS grid die u zullen helpen span meerdere kolommen. De belangrijkste is -ms-grid-kolom/rij-span die vertelt dat wil zeggen hoe veel kolommen/rijen te span. De andere is -ms-grid-kolom/rij die vertelt waar IE om het aftellen te starten.

.grid-cel {
-ms-grid-kolom-span: 2; /* aantal cellen span */
-ms-grid-kolom: 1; /* het starten van de cel */
}

In moderne browsers, hebt u toegang tot veel meer mogelijkheden.

Autoprefixer vriendelijk

Uit de moderne manieren om meerdere cellen, Autoprefixer volledig ondersteunt de volgende. Voel je vrij om een van deze methoden zo veel als je wilt:

Geef een startlijn en het aantal regels in te span (vergelijkbaar met IE):

.grid-cel {
grid-kolom: 1 / span 2;
}

Geef een einde aan de lijn, dan span backwards:

.grid-cel {
grid-kolom: span 2 / 3;
}

Geef een start en een einde regel direct:

.grid-cel {
grid-kolom: 1 / 3;
}

Geef alleen een aantal cellen te span met behulp van grid-kolom/rij-end. Vergeet niet dat IE niet kan auto-plaatsing al. Een startlijn zal nog moeten worden elders in de style sheet:

.grid-cel {
/* Zorg ervoor dat u een startlijn elders */
grid-kolom-einde: span 2;
}

Geef alleen een startlijn:

.grid-cel {
/* De korte weg */
grid-kolom: 1;

/* De meer uitgebreide manier */
grid-kolom-start: 1;
}
Autoprefixer onvriendelijk. Hier zijn draken!

Nu dit is waar Autoprefixer zijn limiet bereikt. De volgende methodes worden ondersteund in moderne browsers, maar worden niet ondersteund door Autoprefixer. Dit is voornamelijk te wijten aan Autoprefixer hebben geen idee wat grid het grid cel behoort te worden, omdat het kan alleen zijn beslissingen baseren op wat er in de stylesheet.

Geef een startlijn en hoe veel regels van het einde van de expliciete raster span:

.grid-cel {
grid-kolom: 1 / -1;
}

Geef zowel het begin-en eindpunt lijn van het einde van de expliciete raster:

.grid-cel {
grid-kolom: -3 / -1;
}

Geeft alleen het aantal regels om te span met behulp van de verkorte syntax (probleem in GitHub):

.grid-cel {
grid-kolom: span 2;
}

Geef alleen een naar achteren span (dat wil zeggen niet span backwards):

.grid-cel {
grid-kolom-start: span 2;
}

Geef alleen een einde aan de lijn (dat wil zeggen niet begrijpt einde en Autoprefixer niet weet waar de start is):

.grid-cel {
grid-kolom-einde: 3;
}

Dus, in principe voorkomen terugtelt vanaf het einde van de grid en je zult wel goed. 😊

Vermijd het gebruik van de lijn namen voor nu

Een van de leuke kenmerken van de moderne roosters is het geven van raster sjablonen lijn namen. In plaats van met behulp van cijfers verwezen naar een lijn, kan je de regel een naam en een verwijzing die in de plaats. Sinds Autoprefixer ondersteunt raster gebieden, zou je denken dat ze ook ondersteuning van de lijn namen. Helaas is dat niet het geval. Vanaf versie 8.6.4, Autoprefixer biedt geen ondersteuning voor lijn namen (op het moment van schrijven). Maar maak je geen zorgen! Het is niet dat het onmogelijk is om ondersteuning (althans niet geheel), het gewoon niet is voor hen een hoge prioriteit. Als u houdt van het gebruik van de lijn namen in uw rasters, laat het dan weten in de GitHub issue. Post je use cases en het zal zeker verhogen van de prioriteit van de functie. In de tussentijd, kijk of je kunt gebruik maken van raster gebieden in plaats daarvan voor nu.

Houd in gedachten dat, als het gaat om uitgevoerd te worden, dan wordt elke regel de naam in je stylesheet zou moeten uniek zijn. Zoals met grid-gebieden, Autoprefixer zou niet weten welke lijn naam behoort tot wat rooster. De enige manier waarop het kan vertellen is als elke regel de naam in de stylesheet is uniek (met uitzondering van media-query ‘ s).

Je moet nog steeds om te testen!

IE zal gedragen zich het meest van de tijd zo lang als u alle van de regels die we tot dusver hebben besproken. Dat gezegd hebbende, kan IE nog een beetje onvoorspelbaar. Onlangs heb ik een rooster item een verticale stromen flex-container en er is een vreemde bug in IE11. De breedte van de kolom is ingesteld op minmax(min-inhoud, 350px), maar IE leek voor de behandeling van min-inhoud, zoals max-inhoud in deze omstandigheid. Dit volledig brak de lay-out. Het te wijzigen minmax(0, 350px) probleem opgelost. Gaat gewoon om te laten zien dat IE het grid van de uitvoering is niet helemaal perfect.

Er zijn ook momenten dat je misschien per ongeluk vergeten om expliciet plaats grid cellen. We bouwen onze netten in moderne browsers, omdat ze het leuk grid development tools (met name Firefox). Moderne browsers hebben een auto-plaatsing, hoewel. Dit betekent dat u misschien wel halverwege het bouwen van uw rooster krijgt dan weggeroepen voor een moment. Als u teruggaat naar je bureau, je ziet de lay-out mooi in uw browser, maar u helemaal vergeet dat u niet expliciet een grid cellen nog. U gaan naar het volgende ding, er zich niet van bewust dat je IE in een volledig gebroken staat.

Geen van deze problemen zal zich openbaren, totdat u aan het testen van uw site in IE11. Elke keer dat u een raster op zoek goed in een moderne browser, opent het in internet explorer en controleer dat het nog steeds lijkt op de manier die u verwacht.

Autoprefixer controle opmerkingen

Ondanks Autoprefixer de beste inspanningen, zijn er nog enkele zeldzame momenten dat het lijkt alsof Autoprefixer belemmeren u meer op dan het u helpt. Als je je ooit in een situatie waar het gemakkelijker zou zijn om niet Autoprefixer het vertalen van uw code, kunt u Autoprefixer uit met behulp van iets genaamd een “control reactie.”

autoprefixer: uit

Deze controle commentaar gaat uit Autoprefixer vertalingen voor de gehele CSS blok. Het zal niet voorvoegsel alle stijlen, voor of na het punt waar de opmerking wordt gemaakt.

/* Invoer CSS */

.normaal-gedrag {
display: grid;
grid-template-kolommen: 1fr 1fr;
grid-template-rijen: 1fr 1fr;
}

.off-gedrag {
display: grid;
/* autoprefixer: off */
grid-template-kolommen: 1fr 1fr;
grid-template-rijen: 1fr 1fr;
}

.normaal-gedrag-weer {
display: grid;
}
/* Uitvoer CSS */

.normaal-gedrag {
display: -ms-net;
display: grid;
-ms-grid-kolommen: 1fr 1fr;
grid-template-kolommen: 1fr 1fr;
-ms-grid-rijen: 1fr 1fr;
grid-template-rijen: 1fr 1fr;
}

.off-gedrag {
display: grid;
/* autoprefixer: off */
grid-template-kolommen: 1fr 1fr;
grid-template-rijen: 1fr 1fr;
}

.normaal-gedrag-weer {
display: -ms-net;
display: grid;
}
autoprefixer: negeren volgende

Als u na meer van een scalpel dan een sledge hammer, de /* autoprefixer: negeren volgende */ controle commentaar is meer voor u. “Negeren volgende” sla de volgende CSS-declaratie in plaats van het negeren van de gehele CSS blok.

/* Invoer CSS */

.normaal-gedrag {
display: grid;
grid-template-kolommen: 1fr 1fr;
grid-template-rijen: 1fr 1fr;
}

.negeren-volgend-gedrag {
display: grid;
/* autoprefixer: negeren volgende */
grid-template-kolommen: 1fr 1fr;
grid-template-rijen: 1fr 1fr;
}
/* Uitvoer CSS */

.normaal-gedrag {
display: -ms-net;
display: grid;
-ms-grid-kolommen: 1fr 1fr;
grid-template-kolommen: 1fr 1fr;
-ms-grid-rijen: 1fr 1fr;
grid-template-rijen: 1fr 1fr;
}

.negeren-volgend-gedrag {
display: -ms-net;
display: grid;
/* autoprefixer: negeren volgende */
grid-template-kolommen: 1fr 1fr;
-ms-grid-rijen: 1fr 1fr;
grid-template-rijen: 1fr 1fr;
}
Pre-processor opmerkingen

Als u Sass (of een ander CSS pre-processor) in uw project, geen gebruik maken van de dubbele slash (//) methode voor het schrijven van deze toelichting. Sass strip zal deze opmerkingen voordat Autoprefixer heeft een kans om het vertalen van de code.

/* Invoer SCSS */

.normaal-gedrag {
display: grid;
}

.mislukt-off-gedrag {
// autoprefixer: uit
display: grid;
}

.succesvolle off-gedrag {
/* autoprefixer: off */
display: grid;
}
/* Uitvoer CSS */

.normaal-gedrag {
display: -ms-net;
display: grid;
}

.mislukt-off-gedrag {
display: -ms-net;
display: grid;
}

.succesvolle off-gedrag {
/* autoprefixer: off */
display: grid;
}

Laten we het samenvatten!

Zo, na al dat, hier is de lijst van alle dingen die je moet onthouden om een IE11 CSS grid master:

  • Gebruik de nieuwste versie van Autoprefixer (npm ik autoprefixer@nieuwste -D).
  • Zet de Autoprefixer raster instellen.
  • Probeer niet te gebruiken auto-plaatsing, elke cel moet geplaatst worden handmatig.
  • Gebruik raster-template-gebieden als uw primaire methode voor het plaatsen van een raster van cellen in de juiste positie.
  • Gebruik raster-sjabloon (geen raster) als een snelkoppeling.
  • Gebruik geen dubbele gebied namen, tenzij zij binnen een media query richten op dezelfde element. Ook geeft dit GitHub issue uw ondersteuning als u wilt Autoprefixer om u te waarschuwen wanneer u een dubbele naam gebied.
  • U kunt gebruik maken van raster-gap zolang u het definiëren van zowel raster-template-gebieden en raster-template-kolommen.
  • grid-gap is momenteel niet overgenomen door media queries. Ga dit GitHub issue een thumbs up als je wilt schrijven minder grid-gap-code.
  • Wanneer de spanning van meerdere kolommen en rijen vermijden terugtelt vanaf het einde van het raster. Autoprefixer niet begrijpt uw rasters goed genoeg om dit ondersteunt.
  • Vermijd het gebruik van de lijn namen voor nu. Geef deze GitHub issue een thumbs up als u wilt beginnen met het gebruik ervan.
  • Gebruik het commentaar /* autoprefixer: off */ en /* autoprefixer: negeren volgende */ om te voorkomen dat Autoprefixer van het vertalen van bepaalde onderdelen van uw stijlblad dat de problemen worden veroorzaakt.
  • Vergeet niet om te testen!

…en van Deel 1:

  • 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 met de auto en max-width instellingen.
  • De IE auto is niet gelijk aan de auto in de moderne browsers.

Als u nog vragen heeft, of als dit echt hielp u uit, laat het me weten in de comments! Ik ben ook @Daniel_Tonon op . 😁

Tot de volgende…

In Deel 3 zal ik het hebben over hoe te maken van een volledig responsive flexbox-gebaseerd grid in IE11. Dit flexbox techniek zelfs een replica van raster-gap functionaliteit!

Serie Artikelen:

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

SHARE
Previous articleDe Elfde Vierde
Next articlePrototyping i Webbläsaren