CSS-Nätet i IE: CSS Nätet och den Nya Autoprefixer

0
12

I Del 1 av denna serie, jag krossat ett par missuppfattningar som många människor har runt om i Internet Explorer (IE) genomförandet av CSS nätet. Denna artikel bygger på denna kunskap. Det skulle vara bäst att gå tillbaka och läsa denna artikel först om du inte redan har gjort det.

Idag ska jag ta itu med den största missuppfattningen av alla: att använda det vill säga genomförandet av CSS nätet är extremt svårt. Du kan enkelt använda CSS-nätet i IE just nu utan att behöva ge någon form av skit återgång layout. Det är verkligen inte så svårt.

Artikel-Serien:

  1. Avslöja Gemensamma IE Nätet Missuppfattningar
  2. CSS Nätet och den nya Autoprefixer (Detta Inlägg)
  3. Att fejka en automatisk placering rutnät med luckor (Kommer Snart!)

Ger det vill säga ett skit återgång layouten är lite av en tuff sälja till kunder. Det är särskilt tufft om detta är för att ett intranät där 90% av användarna använder IE. Om du vill IE kompatibilitet, första du behöver göra är att avgå till det faktum att du inte kan använda alla snygga klockor och visselpipor som kan hittas i den moderna CSS nätet spec. Låt inte detta få dig ner om du skulle bli förvånad av hur mycket IE11 kan hantera, särskilt om det har lite hjälp från Autoprefixer.

Innan jag går för långt in i detta, måste du veta att detta är inte en allmän “hur man använder CSS-grid” – artikel. Denna artikel är för dem att förstå CSS nätet, men är för rädd eller inte tillåtet att använda den, tack vare DVS.

Jag ska vara antar att du redan har en bra förståelse för hur man använder CSS-nätet i moderna webbläsare för denna artikel. Om du inte är säker på hur man använder CSS-nätet ännu, gå och titta på Rachel Andrew ‘ s utmärkta CSS galler video tutorial serien. Efter det, gå och spela vissa nivåer av webbläsaren spelet Grid Trädgård för att få lite hands-on CSS grid erfarenhet. När du förstår grunderna i hur man använder CSS-nätet i moderna webbläsare, kom tillbaka hit och lära sig att använda det på ett sätt som ger samma resultat i IE10 och 11.

Att sätta upp Autoprefixer

Innan du gör något annat, kommer du vill få Autoprefixer igång. Autoprefixer är ett verktyg som används för att automatiskt lägga till browser-specifik CSS-prefix i din CSS så att du inte behöver. Det är lite som att Babel men för CSS. (Vi har en mycket bra överblick av skaparen av Autoprefixer här på CSS-Tricks.)

Om du aldrig har använt Autoprefixer (eller någon bygga verktyg) innan, då först installera Nod på din dator så följ denna guide om hur man får en grundläggande arbetsflöde igång. Lite i guide specifikt om Autoprefixer finns här. (Jag rekommenderar Klunk setup över Grymta om du inte är säker att gå med.)

Om du redan använder Autoprefixer i ditt projekt, se till att uppdatera till den senaste versionen om du använder detta kommando:

npm jag autoprefixer@senaste -D

Vissa funktioner som används i den senaste versionen av Autoprefixer stöds inte i PostCSS version 5. Detta innebär att du kan också behöva uppdatera din version av PostCSS till minst version 6. Om du använder Gulp, som innebär en uppdatering av gulp-postcss till minst v7.0.0. Om du använder Grymta, kan du behöva uppdatera grunt-postcss till minst v0.9.0.

När du har en miljö som är igång, kommer du behöva att ställa in Autoprefixer grid inställningen till true. Utan den inställningen påslagen, Autoprefixer kommer inte att kunna göra någon av de häftiga grejer som jag ska visa er.

Den exakta metoden för att vrida rutmönster på beror mycket på hur du kompilera din kod. Om du använde guiden som jag länkade till tidigare, du skulle ha sett detta kodavsnitt:

var processorsArray = [
// tog bort idiotiska åsikter för enkelhetens
require(‘autoprefixer’)({ webbläsare: [‘2 sista versioner’, ‘ie 6-8’, ‘Firefox – > 20’] })
];

Lägg till nätet: det är sant att alternativ för att stänga nätet tecknet på:

var processorsArray = [
// tog bort idiotiska åsikter för enkelhetens
require(‘autoprefixer’)({ nätet: sant, webbläsare: [‘2 sista versioner’, ‘ie 6-8’, ‘Firefox – > 20’] })
];

Förresten, inställningarna för webbläsaren i handledning är ganska föråldrad, och kommer att generera mycket mer prefix än du faktiskt behöver. Det är bara att gå med “1%” kommer att innebära att när en webbläsare dör, Autoprefixer kommer automatiskt att sluta skriva prefix för webbläsaren. Det grundar webbläsare användning på global data hämtas från webbläsaren caniuse.com.

Så dessa är Autoprefixer inställningar som du bör sluta med:

var processorsArray = [
require(‘autoprefixer’)({ nätet: sant, webbläsare: [‘>1%’] })
];

Nu till det roliga! 😃

Autoprefixer har nya super powers!

Du kanske har läst Rachel Andrew ‘ s artikel “Ska jag prova att använda IE genomförandet av CSS-Grid Layout?” Denna artikel handlar om CSS nätet och förstå att det finns stöd i IE10 och 11. Det är en bra artikel och mycket användbara för att förstå IE: s begränsningar. Definitivt värt att läsa om du inte redan har checkat ut. Observera att det är mycket föråldrad i termer av dess information om Autoprefixer om.

Autoprefixer har kommit en lång väg sedan Rachel skrev sin IE11 CSS grid artikel och Autoprefixer stöder nu långt mer CSS nätet översättningar. Ta en titt på denna nya, uppdaterade versionen av Rakels tabell baserat på Autoprefixer version 8.6.4. Observera att poster i fetstil representerar en förändring i Autoprefixer stöd jämfört med Rachel ‘ s artikel:

CSS-Grid Egendom
IE10 Genomförande
Autoprefixer?
Anteckningar
grid-template-kolumner -ms-grid-kolumner Ja
grid-template-rader -ms-grid-rader Ja
grid-template-områden NA Ja Autoprefixer använder denna för att förstå hur nätet ser ut men inte lägga till några extra egenskaper.
grid-mall NA Ja Förkortning för grid-template-kolumner, grid-template-rader, och grid-template-områden
grid-auto-kolumner NA Inga IE inte stödjer auto-placering
grid-auto-rader NA Inga IE inte stödjer auto-placering
grid-auto-flöde NA Inga IE inte stödjer auto-placering
nätet NA Inga Se detta GitHub frågan om varför detta inte stöds
grid-rad-start -ms-grid-raden Ja1 Span syntax kräver grid-rad-end för att definieras
grid-kolumn-start -ms-grid-kolumn Ja1 Span syntax kräver grid-kolumn-end för att definieras
grid-rad-slutet NA Ja1 grid-rad-start måste definieras
grid-kolumn-slutet NA Ja1 grid-kolumn-start måste definieras
grid-raden NA Ja1
grid-kolumn NA Ja1
grid-området NA Ja2 Autoprefixer översätter rutnätet i kolumn/rad koordinater
grid-rad-gap NA Ja3 Skapar extra rader/kolumner i IE.
grid-kolumn-gap NA Ja3 Skapar extra rader/kolumner i IE.
grid-gap NA Ja3 Skapar extra rader/kolumner i IE.
NA -ms-grid-kolumn-p Ja Översatt från grid-kolumn-end och grid-området.
NA -ms-grid-rad-p Ja Översatt från grid-rad-end och grid-området.
align-själv -ms-grid-rad-align Ja
motivera-själv -ms-grid-kolumn-align Ja

Tabell disclaimer

Jag kommer att täcka dessa i större detalj senare i artikeln:

  1. Autoprefixer inte prefix negativa heltal.
  2. Varje rutnät element måste ha unika namn område.
  3. Autoprefixer bara prefix grid-gap om både grid-template-områden och grid-template-kolumner har definierats. Det kan inte heller ärva grid-gap med hjälp av media queries.

grid-template-områden är din nya bästa vän

Som du kan se från den uppdaterade (och betydligt mer positiv-ser) tabell, det finns en hel del coola nya funktioner i Autoprefixer nu. Den viktigaste av dessa är dess stöd för grid-template-områden (och i förlängningen grid-mall). Genom att stödja grid-template-områden, Autoprefixer nu förstår exakt vad din nätet ser ut. Detta banade väg för Autoprefixer att även stödja (i en begränsad kapacitet) grid-gap.

Observera att Autoprefixer fortfarande inte har stöd för genvägen nätet egendom. Detta var en avsiktlig design beslut som du kan läsa mer om här på GitHub fråga. Den korta historien är att nätet egendom är inte bara en genväg för mallhantering inställningar men också auto-placering inställningar. Eftersom IE inte kan göra auto-placering och grid-mall egendom kan i princip göra allt som nätet egendom kan göra (att IE kan hantera), det var beslutat att nätet egendom var inte värt att stödja.

Tillbaka när Rachel skrev sin artikel, detta var typ av grid-kod som du måste skriva på för att stödja DVS:

/* IE-vänliga källkoden 26 November 2016 */
/* Kod som behövs för att göra Autoprefixer fungerar korrekt */

.grid {
display: nätet.
grid-template-kolumner: 1fr 10px 1fr;
grid-template-rader: 100px 10px 100px;
}

.cell-En {
grid-kolumn: 1;
grid-rad: 1;
}

.cell-B {
grid-kolumn: 3;
grid-rad: 1;
}

.cell-C {
grid-kolumn: 1;
grid-rad: 3;
}

.cell-D {
grid-kolumn: 3;
grid-rad: 3;
}

Nu kan du skriva kod så här istället:

/* Dagens IE-vänliga källkod */
/* Autoprefixer kan nu göra denna kod IE säker */

.grid {
display: nätet.
grid-gap: 10px;
grid-mall:
“a b” 100px
“c d” 100px /
1fr 1fr;
}

.cell-En {
grid-området: en;
}

.cell-B {
grid-område: b;
}

.cell-C {
grid-område: c;
}

.cell-D {
grid-området: d
}

Autoprefixer kommer att ta ovanstående kod och översätta det till så mycket mer IE-vänliga kod för dig:

/* Autoprefixer IE-vänliga översättning */

.grid {
displayen visar: -ms-nätet.
display: nätet.
grid-gap: 10px;
-ms-grid-rader: 100px 10px 100px;
-ms-grid-kolumner: 1fr 10px 1fr;
grid-mall:
“a b” 100px
“c d” 100px /
1fr 1fr;
}

.cell-En {
-ms-grid-rad: 1;
-ms-grid-kolumn: 1;
grid-området: en;
}

.cell-B {
-ms-grid-rad: 1;
-ms-grid-kolumn: 3;
grid-område: b;
}

.cell-C {
-ms-grid-rad: 3;
-ms-grid-kolumn: 1;
grid-område: c;
}

.cell-D {
-ms-grid-rad: 3;
-ms-grid-kolumn: 3;
grid-området: d
}

Det bästa av allt, du kan sedan enkelt ändra grid-mall eller grid-template-områden fastighet med en media query och Autoprefixer kommer automatiskt att uppdatera alla på nätet cellens koordinater för dig:

/* Ändra en grid-mall med en media-query */

.grid {
display: nätet.
grid-gap: 10px;
grid-mall:
“a b” 100px
“c d” 100px
“e och f” 100px /
1fr 1fr;
}

@media (min-width: 600px){
.grid {
/* Autoprefixer 8.6.4 inte ärver nätet luckor 🙁 */
grid-gap: 10px;
grid-mall:
“a b c” 100px
“d e f” 100px /
1fr 1fr 1fr;
}
}

.cell-En {
grid-området: en;
}

.cell-B {
grid-område: b;
}

.cell-C {
grid-område: c;
}

.cell-D {
grid-området: d
}

.cell-E {
grid-område: e;
}

.cell-F {
grid-område: f;
}

Ovanstående blir översatt till detta IE-vänlig-kod:

/* Autoprefixer IE-vänlig media query översättning */

.grid {
displayen visar: -ms-nätet.
display: nätet.
grid-gap: 10px;
-ms-grid-rader: 100px 10px 100px 10px 100px;
-ms-grid-kolumner: 1fr 10px 1fr;
grid-mall:
“a b” 100px
“c d” 100px
“e och f” 100px /
1fr 1fr;
}

@media (min-width: 600px) {
.grid {
/* Autoprefixer 8.6.4 inte ärver luckor 🙁 */
grid-gap: 10px;
-ms-grid-rader: 100px 10px 100px;
-ms-grid-kolumner: 1fr 10px 1fr 10px 1fr;
grid-mall:
“a b c” 100px
“d e f” 100px /
1fr 1fr 1fr;
}
}

.cell-En {
-ms-grid-rad: 1;
-ms-grid-kolumn: 1;
grid-området: en;
}

.cell-B {
-ms-grid-rad: 1;
-ms-grid-kolumn: 3;
grid-område: b;
}

.cell-C {
-ms-grid-rad: 3;
-ms-grid-kolumn: 1;
grid-område: c;
}

.cell-D {
-ms-grid-rad: 3;
-ms-grid-kolumn: 3;
grid-området: d
}

.cell-E {
-ms-grid-rad: 5;
-ms-grid-kolumn: 1;
grid-område: e;
}

.cell-F {
-ms-grid-rad: 5;
-ms-grid-kolumn: 3;
grid-område: f;
}

@media (min-width: 600px) {
.cell-En {
-ms-grid-rad: 1;
-ms-grid-kolumn: 1;
}

.cell-B {
-ms-grid-rad: 1;
-ms-grid-kolumn: 3;
}

.cell-C {
-ms-grid-rad: 1;
-ms-grid-kolumn: 5;
}

.cell-D {
-ms-grid-rad: 3;
-ms-grid-kolumn: 1;
}

.cell-E {
-ms-grid-rad: 3;
-ms-grid-kolumn: 3;
}

.cell-F {
-ms-grid-rad: 3;
-ms-grid-kolumn: 5;
}
}

Den dubbla media query kanske ser lite fult, men jag försäkrar er att detta är det bästa sättet att Autoprefixer kan hantera media query översättning. Den nya IE nätet cellens koordinater kan inte placeras i samma media query som galler mall definition. Detta skulle leda till en av två möjliga utfall. Ett av resultaten är att den standard nätet cell positioner skulle åsidosätta den förändrade positioner angivna i media query. Detta skulle medföra media query för att ha någon effekt i IE. Det andra resultatet skulle bli för Autoprefixer att flytta alla stilar inne media query (ja, det inkluderar alla de stilar som du skrev själv) till en annan plats i stilmallen, och kan orsaka fruktansvärda CSS specificitet frågor. Du kan läsa mer om tanken bakom detta beslut i den nu stängda GitHub fråga för det.

Autoprefixer fortfarande inte kan rädda dig från allt

Även Stålmannen kan inte alltid rädda alla och Autoprefixer är inte annorlunda. Medan Autoprefixer är möjligt att skära ner på en hel del av arbetsbördan är inblandade i att göra våra elnät IE-kompatibel, kan inte fixa allt. Det kan bara översätta saker att IE kan förstå. Dessa är många viktiga saker som du måste vara medveten om, om du inte vill öppna webbplatsen i IE en dag och ha det blåsa upp i ansiktet.

Grid Gap har ett begränsat stöd

Som du kanske har sett i det förra exemplet, grid-gapet är för närvarande inte kunna ärvas genom media frågor. Om du vill använda grid-gap, du kommer att behöva för att duplicera grid-gap ställa över alla media frågor där du definierar ett rutnät mall för att grid. Det är en fråga som är öppen på GitHub om detta. Gå ge det en tummen upp om du vill Autoprefixer att stödja det. Förhoppningsvis problemet är åtgärdat snart.

Det är inte det enda problemet kring att använda grid-gapet dock. Det är endast stöds av Autoprefixer när både nätet-template-områden och grid-template-kolumner har definierats.

Autoprefixer lägger grid-gap stöd genom att använda grid-template-områden för att förstå vad din nätet ser ut. Det tar sedan din grid-template-kolumner och rutnät-template-rader definitioner och sprutar nätet-gap värde mellan varje rad och kolumn, vilket skapar extra rader och kolumner i IE.

Om du försöker använda grid-gap på egen hand utan grid-template-områden, Autoprefixer har ingen möjlighet att veta vad som cellen tillhör vad galler. Utan att viktig kunskap, är det inte säkert att injicera extra kolumner och rader som IE behov.

Det förklarar grid-template-områden, men varför gör vi också behov av att definiera grid-template-kolumner? Borde inte något som detta att vara lika lätt för Autoprefixer att översätta?

.grid {
display: nätet.
grid-gap: 20px;
grid-template-områden:
“a b c”
“d e f”;
}

.cell-en {
grid-området: en;
}

.cell-f {
grid-område: f;
}

Rader och kolumner i CSS rutnät standard till ett värde av auto så kan inte Autoprefixer bara lägga till något liknande-ms-grid-kolumner: auto 20px auto 20px auto;? Det gör det för rader, så varför kan det inte göra samma sak för kolumner?

Jo, min nyfikna vän, som jag förklarade i Del 1 som auto i IE fungerar på ett lite annorlunda sätt att auto i moderna webbläsare. När kolumnerna är inställd på auto i IE, du kommer alltid att krympa ned till ett värde av max-innehåll. Moderna rutnät kolumner, å andra sidan, kommer att expandera till 1fr om det finns ingen annan fr enheter som används i detta galler mall förklaring. Denna diskrepans kan orsaka en enorm skillnad i utseende mellan den moderna och den IE-version av ett rutnät. Den Autoprefixer laget kände att det var för farligt att göra antaganden om detta, så de gjorde grid-template-kolumner en obligatorisk ställa i ordning för grid-gap för att ta effekt.

Så det förklarar varför Autoprefixer inte har stöd för grid-gap när grid-template-pelare saknas. Om auto beter sig så olika i IE, så varför inte Autoprefixer stödja grid-gap utan att användaren explicit med att definiera grid-template-rader? Är inte det lika illa?

Inte riktigt. När du ställer in displayen: rutnät, men på något, det är bredden kommer att växa till den fulla bredden av dess behållare. Dess höjd, å andra sidan, vanligtvis krymper till höjden av dess innehåll. Detta är naturligtvis inte alltid fallet. Det finns ett antal skäl till varför ett rutnät kan vara högre än dess innehåll. Om rutnätet är också en flex-post och flex behållaren är högre än nätet, då det skulle vara en anledning till varför nätet kan vara högre än dess innehåll. I allmänhet är dock om det inte finns andra krafter som är inblandade, då ett rutnät container kommer alltid vara samma höjd som dess innehåll.

Eftersom höjden på en typisk nätet är det samma höjd som dess innehåll, i de flesta fall ger funktionen auto i både IE och modern webbläsare kommer att bete sig på samma sätt till en annan. Det bara kommer att skilja sig åt i funktionalitet om höjden på nätet överstiger höjden av innehållet i den. För bästa balans mellan användarnas bekvämlighet och webbläsare konsekvens, Autoprefixer laget gjort ett val. De bestämde sig för att stödja en saknad grid-template-rader egendom, men inte en saknad grid-template-kolumner egendom var det bästa sättet att hantera grid-gap stöd.

Ingen auto-placering! Ingen auto-placering! Ingen auto-placering!

Jag kan verkligen inte säga att detta är tillräckligt. Det viktigaste att komma ihåg när man använder CSS-nätet i IE är att allt måste göras manuellt. I samma ögonblick som du börjar tänka på att använda auto-placering är instant din webbplats blåser upp i IE. Jag har en metod för att hantera nät som har ett okänt antal celler i dem. Jag täcker det i Del 3 av denna serie. Det viktigaste att veta just nu är att om du vill använda CSS nätet i en IE-vänligt sätt, bör du endast använda det om det är ett känt antal celler för ett känt antal rader och kolumner.

Det är denna brist på auto-placering i IE som gör att ha tillgång till nätet områden genom Autoprefixer en sådan välsignelse. I stället för att beräkna alla koordinater manuellt, kan du istället namnge varje cell och sedan låta Autoprefixer göra matten för dig. När du använder media queries, du behöver bara omdefiniera nätet mall och autoprefixer kommer att räkna alla koordinaterna för dig. Du har sällan att göra en kolumn eller rad räkna. Det är bra!

Området namn måste vara unikt

Förmågan att använda grid-template-områden är en av Autoprefixer s största styrkor, men det har sina begränsningar. Autoprefixer inte har någon tillgång till DOM. På grund av detta, Autoprefixer är helt beroende av att använda namnet på området för att förstå vart varje cell måste placeras i rutnätet. Detta kan orsaka krockar om du använder samma område namn två gånger i samma stilmall.

Här är ett litet exempel. Tidigt i stilmallen, Grid Alpha har grid-template-områden: “delta echo”. Senare i stilmallen, Grid Beta har grid-template-områden: “echo delta”. Vi säger att vårt nät cell hör till området echo… så går det i kolumn 1 eller 2?

.grid-alpha {
grid-template-områden: “delta echo”;
}

.grid-beta {
grid-template-områden: “echo delta”;
}

.grid-cell {
/* Vad kolumn gör .grid-cell gå i? */
-ms-grid-kolumn: ???;
grid-område: echo.
}

Moderna webbläsare, vet exakt vad kolumn att placera rutnätet cell i eftersom de har tillgång till DOM. Om cellen är placerade inuti Rutnät Alpha, det kommer att gå i den första kolumnen. Om den är placerad på Nätet Beta det kommer att gå i den andra kolumnen. Autoprefixer kan bara läsa din CSS. Den har ingen aning om grid cellen placeras i Rutnätet Alpha eller Rutnät Beta. Allt den vet är att nätet cell behöver för att vara placerade i “echo”. Autoprefixer löser den här gåtan genom att gå med den som kom sist i stilmallen. I detta fall, Autoprefixer kommer att hedra Nätet Beta “echo delta” områden definition eftersom det inträffar sist. Om du har placerat nätet cell i Rutnätet Alpha, det skulle se bra i moderna webbläsare, men det skulle vara placerad i fel kolumn i IE.

Detta innebär också att du egentligen inte kan använda strategin för att ge en komponent av ett enda område som utsetts namn som upprepade gånger refereras. Hänvisning till att namnet på området i mer än en grid-template-områden egendom kommer att bryta DVS för säker. Varje enskilt område namn i varje rutnät i din formatmall måste vara unikt eller Autoprefixer kommer freak fan.

Autoprefixer för närvarande varnar dig inte när du har använt en kopia områdets namn i din stilmall. Om du vill börja se varningar för samma namn område, det är en fråga som är öppen på GitHub som du kan lägga ditt stöd. Under tiden är det enklaste sättet att se till att varje område är unikt är nog att anta en BEM stil strategi för att namnge områden.

.grid-alpha {
grid-template-områden: “grid-alfa – __delta grid-alfa – __echo”;
}

.grid-beta {
grid-template-områden: “grid-beta__echo grid-beta__delta”;
}

.grid-cell {
/* Inga mer konflikter 🙂 */
-ms-grid-kolumn: 2;
grid-område: grid-alfa – __echo.
}

Detta kan vara ganska utförligt om det finns massor av kolumner och rader. Du kanske vill förkorta ner det till en förkortning istället. Naturligtvis mindre utförlig ditt namn område, desto större chans är det att en konflikt.

.grid-alpha {
grid-template-områden: “ga_delta ga_echo”;
}

.grid-beta {
grid-template-områden: “gb_echo gb_delta”;
}

.grid-cell {
-ms-grid-kolumn: 2;
torra-område: ga_echo;
}

Det finns ett stort undantag. Grid-områden i media frågor är tillåtna att vara kopior av andra områden så länge som namn område som definieras i media query som är riktade till samma element. Utan detta undantag skulle det vara omöjligt att ändra rutnätet områden baserat på skärmstorlek. Det viktigaste att komma ihåg är att varje ruta har sin egen uppsättning unika namn område som inte ska delas med andra nät.

@media (min-width: 600px) {
.grid-en {
grid-template-områden:
“alpha bravo”
“alpha charlie”;
}
}

@media (min-width: 900px) {
.grid-en {
/* Detta är bra */
/* Det riktar samma element. * /
grid-template-områden:
“alpha bravo charlie”;
}
}

@media (min-width: 900px) {
/* INTE BRA! */
/ * “Alpha” området är återanvänds på ett annat element! */
.grid-två {
grid-template-områden:
“alpha delta”;
}
}
Autoprefixer har begränsad kolumn och rad spänner stöd

Det finns bara två fastigheter i IE: s genomförande av CSS rutnät som hjälper dig att sträcka sig över flera kolumner. Den viktigaste är att -ms-grid-kolumn/rad-span som berättar DVS hur många kolumner/rader till span. Den andra är -ms-grid-kolumnen/raden som berättar DVS där att börja räkna från.

.grid-cell {
-ms-grid-kolumn-span: 2; /* antal celler att sträcka */
-ms-grid-kolumn: 1; /* börjar cell */
}

I moderna webbläsare, som du har tillgång till långt fler alternativ.

Autoprefixer vänlig

Ur den moderna sätt att sträcka sig över flera celler, Autoprefixer stödjer till fullo följande. Känn dig fri att använda någon av dessa metoder så mycket som du vill:

Ange en start linje och antal linjer som du vill span (liknande IE):

.grid-cell {
grid-kolumn: 1 / span 2;
}

Ange ett slut linjen, sedan span bakåt:

.grid-cell {
grid-kolumn: p 2 / 3;
}

Ange ett start och ett slut direkt online:

.grid-cell {
grid-kolumn: 1 / 3;
}

Ange bara ett antal celler att sträcka sig över med hjälp av grid-kolumn/rad-end. Kom ihåg att IE kan inte göra automatisk placering ändå. En startlinje kommer fortfarande att behöva vara som anges på annat ställe i stilmallen:

.grid-cell {
/* Se till att du anger en startlinje på annan plats */
grid-kolumn slut: p 2;
}

Ange endast ett startlinjen:

.grid-cell {
/* Den korta vägen */
grid-kolumn: 1;

/* Mer utförligt sätt */
grid-kolumn-start: 1;
}
Autoprefixer ovänliga. Här finnes drakar!

Detta är nu där Autoprefixer når sin gräns. Följande metoder stöds i moderna webbläsare, men stöds inte av Autoprefixer. Detta är främst på grund av att Autoprefixer har ingen aning vad galler nätet cell tillhör, eftersom det kan endast grunda sina beslut på vad som finns i stilmallen.

Ange en startlinje och hur många rader från slutet av erotiska nätet för att span:

.grid-cell {
grid-kolumn: 1 / -1;
}

Specificera både början och slutet av raden från slutet av erotiska nätet:

.grid-cell {
grid-kolumn: -3 / -1;
}

Endast ange hur många rader för att span använda stenografi syntax (fråga i GitHub):

.grid-cell {
grid-kolumn: p 2;
}

Ange endast ett bakåt span (DVS kan inte span bakåt):

.grid-cell {
grid-kolumn-börja: p 2;
}

Ange endast ett slutet linje (IE inte förstår sig på slutet och Autoprefixer vet inte vart starten är):

.grid-cell {
grid-kolumn-end: 3;
}

Så, i princip undvika att räkna bakåt från slutet av nätet och du ska vara bra. 😊

Undvik att använda linje namn för nu

En av de häftiga funktioner i moderna nät är att ge grid mallar linje namn. Istället för att använda siffror för att referera till en linje så kan du ge den linje ett namn och en hänvisning som i stället. Eftersom Autoprefixer stöder grid-områden, man skulle kunna tro att de också skulle stödja linjen namn. Tyvärr, så är inte fallet. Från och med version 8.6.4, Autoprefixer inte stödlinjen namn (i skrivande stund). Men oroa dig inte! Det är inte så att det är omöjligt att stödja (åtminstone inte helt och hållet), det har bara inte varit av hög prioritet för dem. Om du älskar att använda linje namn i ditt nät för att sedan låta dem veta det på GitHub fråga för det. Skicka ditt användningsfall och det kommer säkert att öka prioriteringen av funktionen. Under tiden, se om du kan använda grid-områden istället för nu.

Tänk på att, om det kommer genomföras, då varje rad namn över din stilmall skulle behöva vara unika. Som med grid-områden, Autoprefixer skulle inte veta vad namnet tillhör vad galler. Det enda sättet man kan säga är att om varje rad namn i stilmallen är unik (exklusive media frågor).

Du behöver fortfarande att testa!

IE kommer att bete sig mest av tiden så länge som du följer alla de regler som vi har täckt så långt. Som sagt, DVS att det fortfarande kan vara lite oförutsägbar. Bara nyligen, jag gjorde ett rutnät punkt ett vertikalt flyter flex behållare och stött på ett udda fel i IE11. Kolumnbredden var inställd på att minmax(min-innehåll, 350px) men IE verkade för att behandla min-innehåll som max-innehåll i denna omständighet. Detta helt bröt layout. Ändra det till minmax(0, 350px) fast frågan. Bara går att visa att IE: s elnät genomförandet är inte helt perfekt.

Det finns också tillfällen när du skulle råka glömma att uttryckligen plats rutorna. Vi bygger våra nät i moderna webbläsare, eftersom de har den trevliga nätet verktyg för utveckling (särskilt Firefox). Moderna webbläsare har auto-placering, dock. Detta innebär att du kan vara halvvägs genom att bygga ditt rutnät sedan få kallas bort för en stund. När du återvänder till ditt skrivbord, kan du se layouten ser vacker i din webbläsare, men du helt glömma bort att du inte uttryckligen har placerat alla rutorna ändå. Du flyttar till nästa sak, lyckligt omedveten om att du har kvar det vill säga i ett helt trasiga tillstånd.

Ingen av dessa frågor kommer att avslöja sig själva tills du testa din webbplats i IE11. Varje gång du får ett rutnät ser bra ut i en modern webbläsare, öppna den i IE och dubbelkolla att det fortfarande ser ut på det sätt du förväntar dig.

Autoprefixer kontroll kommentarer

Trots Autoprefixer bästa ansträngningar, finns det fortfarande vissa sällsynta tillfällen när det verkar som Autoprefixer hindrar dig mer än det hjälper dig. Om du någonsin befinner dig i en situation där det skulle vara lättare att inte ha Autoprefixer att översätta din kod, kan du vända Autoprefixer av att använda något som kallas en “kontroll kommentar.”

autoprefixer: off

Denna kontroll kommentar kommer att stänga av Autoprefixer översättningar för hela CSS-block. Det kommer inte prefix alla stilar före eller efter punkten där kommentaren är gjord.

/* Ingång CSS */

.normal-beteende {
display: nätet.
grid-template-kolumner: 1fr 1fr;
grid-template-rader: 1fr 1fr;
}

.off-beteende {
display: nätet.
/* autoprefixer: av */
grid-template-kolumner: 1fr 1fr;
grid-template-rader: 1fr 1fr;
}

.normal-beteende-igen {
display: nätet.
}
/* Output CSS */

.normal-beteende {
displayen visar: -ms-nätet.
display: nätet.
-ms-grid-kolumner: 1fr 1fr;
grid-template-kolumner: 1fr 1fr;
-ms-grid-rader: 1fr 1fr;
grid-template-rader: 1fr 1fr;
}

.off-beteende {
display: nätet.
/* autoprefixer: av */
grid-template-kolumner: 1fr 1fr;
grid-template-rader: 1fr 1fr;
}

.normal-beteende-igen {
displayen visar: -ms-nätet.
display: nätet.
}
autoprefixer: ignorera nästa

Om du är ute efter mer av en skalpell än en slägga, / * autoprefixer: ignorera nästa */ kontroll kommentar är mer för dig. “Ignorera nästa” för att hoppa över nästa CSS-deklaration i stället för att ignorera hela CSS-block.

/* Ingång CSS */

.normal-beteende {
display: nätet.
grid-template-kolumner: 1fr 1fr;
grid-template-rader: 1fr 1fr;
}

.ignorera-nästa-beteende {
display: nätet.
/* autoprefixer: ignorera nästa */
grid-template-kolumner: 1fr 1fr;
grid-template-rader: 1fr 1fr;
}
/* Output CSS */

.normal-beteende {
displayen visar: -ms-nätet.
display: nätet.
-ms-grid-kolumner: 1fr 1fr;
grid-template-kolumner: 1fr 1fr;
-ms-grid-rader: 1fr 1fr;
grid-template-rader: 1fr 1fr;
}

.ignorera-nästa-beteende {
displayen visar: -ms-nätet.
display: nätet.
/* autoprefixer: ignorera nästa */
grid-template-kolumner: 1fr 1fr;
-ms-grid-rader: 1fr 1fr;
grid-template-rader: 1fr 1fr;
}
Pre-processor kommentarer

Om du använder Sass (eller annan CSS-pre-processor) i ditt projekt, inte använda dubbla snedstreck (//) metod för att skriva dessa kommentarer. Sass kommer strip dessa kommentarer innan Autoprefixer har en chans att översätta koden.

/* Ingång SCSS */

.normal-beteende {
display: nätet.
}

.misslyckades-off-beteende {
// autoprefixer: off
display: nätet.
}

.framgångsrik-off-beteende {
/* autoprefixer: av */
display: nätet.
}
/* Output CSS */

.normal-beteende {
displayen visar: -ms-nätet.
display: nätet.
}

.misslyckades-off-beteende {
displayen visar: -ms-nätet.
display: nätet.
}

.framgångsrik-off-beteende {
/* autoprefixer: av */
display: nätet.
}

Låt oss sammanfatta!

Så, efter allt detta, här är en lista över alla de saker du behöver komma ihåg för att vara en IE11 CSS nätet mästare:

  • Använd den senaste versionen av Autoprefixer (npm jag autoprefixer@senaste -D).
  • Slå på Autoprefixer rutmönster.
  • Försök inte använda funktionen auto-placering, varje cell måste placeras manuellt.
  • Använd grid-template-områden som din primära metod för att placera rutorna på plats.
  • Använd grid-mall (inte på nätet) som en genväg.
  • Behöver inte använda samma område som namn, om de är inne i en media query som är inriktade på samma element. Dessutom ger detta GitHub fråga ditt stöd om du skulle vilja Autoprefixer för att varna dig när du har använt en kopia namnet på området.
  • Du kan använda grid-gap så länge du definiera båda grid-template-områden och grid-template-kolumner.
  • grid-gapet är för närvarande inte ärvt genom media frågor. Gå ge denna GitHub fråga en tummen upp om du vill skriva mindre grid-gap-kod.
  • När spänner över flera kolumner och rader, undvika att räkna bakåt från slutet av rutnätet. Autoprefixer inte förstår din elnät samt tillräckligt stöd för detta.
  • Undvik att använda linje namn för nu. Ge denna GitHub fråga en tummen upp om du vill börja använda dem.
  • Använd kontroll kommentarer /* autoprefixer: av */ och /* autoprefixer: ignorera nästa */ för att förhindra Autoprefixer att översätta vissa delar av din stil-ark som orsakar problem.
  • Glöm inte att testa!

…och från Del 1:

  • IE har en implicit nätet.
  • IE stödjer upprepa funktionalitet.
  • minmax(), min-och max-innehåll är allt inbyggt stöd.
  • i form-innehåll (i) är inte inbyggt stöd, men du kan komma runt detta med auto och max-width inställningar.
  • DVS auto är inte lika med auto i moderna webbläsare.

Om du har några frågor, eller om detta verkligen hjälpte dig, låt mig veta i kommentarerna! Jag är också @Daniel_Tonon på . 😁

Upp nästa…

I Del 3 kommer jag att täcka hur du vill göra en helt responsiv flexbox-baserade nätet i IE11. Detta flexbox teknik även replikerar grid-gap funktionalitet!

Artikel-Serien:

  1. Avslöja Gemensamma IE Nätet Missuppfattningar
  2. CSS Nätet och den nya Autoprefixer (Detta Inlägg)
  3. Att fejka en automatisk placering rutnät med luckor (Kommer Snart!)

SHARE
Previous articleDen Elfte Fjärde
Next articleDen Ellevte Fjerde