CSS-Nätet i IE: Debunking Gemensamma IE Nätet Missuppfattningar

0
41

Detta är den första i en tredelad serie om hur man kan använda CSS nätet på ett sätt som kommer att arbeta inte bara i moderna webbläsare, men även i Internet Explorer (IE). Tänk dig att skriva CSS-grid-kod utan att behöva skriva en återgång layout! Många av oss tycker att detta är lite långt bort i framtiden, det är många år bort. Om det enda som håller dig tillbaka från att verkligheten är IE11 (in caniuse.com), då har du tur! Den dagen är idag! Eller åtminstone att det kommer att bli när du är klar med att läsa denna serie. 😉

Artikel-Serien:

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

Till att börja med, denna första del kommer att avslöja några vanliga missuppfattningar kring IE11 infödda elnät genomförandet.

I Del 2 kommer jag att blåsa locket på myten om att med hjälp av CSS-nätet i IE11 är super svårt. Ingen mer skit alternativa layouter för IE11!

I Del 3, jag ska visa er en cool flexbox teknik som jag använder för att skapa enkla auto-placering nät. Dessa falska auto-placering nät har fast pixel-baserade nätet luckor och grid luckor att rada upp perfekt med sådana som kan göras med faktiska CSS nätet. Utom i detta fallet, de fungerar perfekt i IE11, är helt responsiv och uppdatera sin kolumn räkna baserat på skärmens bredd enda som krävs för att ändra en enda bredd värde i en media query.

Det är nog intro: s kan komma igång på dessa missuppfattningar!

IE har en implicit nätet

I CSS-grid, uttryckligt grid är den som du manuellt ange alla grid-template-* egenskaper. Den implicita nätet är hur webbläsaren hanterar placering i celler som är placerade utanför den explicita nätet.

När du använder CSS-nätet i moderna webbläsare, den implicita nätet är ganska uppenbart eftersom rutnätet kommer att fortsätta att skapa och placera ut rutorna automatiskt på nya rader utan att definiera dem. DVS inte har auto-placering, så det är lätt att anta att IE inte har en implicit nätet. Det gör ändå — du behöver bara vara lite mer explicita när det gäller att använda det.

Se Pennan vs Explicit implicit rutnät av Daniel Tonon (@daniel-tonon) på CodePen.

Det mest vanliga att använda IE: s implicita nätet använder det för att skapa rader för dig. Om du vill att alla rader i nätet för att få sin höjd bestäms av höjden av sitt innehåll, behöver du inte bry sig om att definiera -ms-grid-rader (IE version av grid-template-rader). Rader automatiskt att skapas för dig i IE när du gör din rutorna.

En viktig sak att notera är dock att moderna webbläsare har tillgång till egenskaper grid-auto-rader och grid-auto-kolumner. Dessa egenskaper gör att du kan styra hur webbläsaren hanterar storlek på rader och kolumner i den implicita nätet. IE har inget begrepp om dessa egenskaper. DVS implicita rader och kolumner kan bara vara medelstora auto.

IE har upprepa funktionalitet

Frukta inte! Det finns ingen anledning att skriva ut 1fr 20px 12 gånger för din dyrbara 12-kolumn nätet (DVS inte ha native-grid-gap-stöd). DVS kommer förpackade med full upprepa() funktionaliteten. Det är bara att gömma sig bakom en annan syntax.

Den moderna syntax för upprepade värden i kolumner och rader är att upprepa(12, 1fr 20px) som betyder “upprepa 1fr 20px mönster 12 gånger.” Den IE-version av syntax (1fr 20px)[12]. Den IE-version har identisk funktionalitet, bara en annorlunda syntax.

/* Det här nätet… */
.grid-en {
displayen visar: -ms-nätet.
display: nätet.
-ms-grid-kolumner: 1fr 20px 1fr 20px 1fr 20px 1fr;
grid-template-kolumner: 1fr 20px 1fr 20px 1fr 20px 1fr;
}

/* …är exakt samma sak som att detta galler: */
.grid-två {
displayen visar: -ms-nätet.
display: nätet.

/* DVS upprepa syntax */
-ms-grid-kolumner: 1fr (20px 1fr)[3];

/* Moderna upprepa syntax */
grid-template-kolumner: 1fr upprepa(3, 20px 1fr);
}

Andra än syntaxen, det är bara en skillnad mellan hur moderna webbläsare och IE genomföra upprepa () – funktionen. Moderna webbläsare lagt auto-fit) och auto-fill sökord till funktionen. Eftersom IE inte stödjer auto-placering, dessa sökord är ganska meningslöst att IE så undvik att använda dem.

minmax() stöds direkt i IE

minmax() är en CSS-dimensionering funktion som är exklusiv för CSS-grid (just nu i alla fall). Dess funktionalitet är ganska självförklarande. Du ger det minsta värdet i den första parametern och ett högsta värde i den andra parametern. Kolumnen eller raden som detta tillämpas för att sedan kunna krympa och växa mellan de två värden som det utrymme som finns för att det ökar och minskar. Prova att ändra storlek codepen nedan för att se den i aktion.

Se Pennan minmax() demo av Daniel Tonon (@daniel-tonon) på CodePen.

Folk tror ofta att detta awesome lilla funktionen stöds inte i IE men det är i själva verket inbyggt stöd. Jag gissar att detta beror på att minst en av dessa två skäl:

  1. Det är coolt funktionalitet och de tror att IE kan inte ha coola saker som detta, eftersom IE suger.
  2. Alla har sett denna magiska kod utdrag och fick sina drömmar krossade när de insåg att det inte skulle fungera i IE: grid-template-kolumner: upprepa( auto-fit, minmax(250px, 1fr) );.

(Om du har aldrig tidigare sett en snutt innan, titta på denna korta video och förbereder dig för att ha ditt sinne blåst.)

Eftersom den magiska snutt inte fungerar i IE, människor förmodligen anta att ingenting i utdraget är IE-vänliga. I verkligheten, den enda anledningen till att koden inte visas i IE eftersom IE inte stödjer auto-fit sökord och auto-placering.

min-och max-innehåll är båda 100% IE-vänlig

IE har full inbyggt stöd för både min-och max-värden på innehåll.

min-innehållet är ett sökord värde som kommer att krympa kolumn/rad ned till lägsta möjliga bredd att innehållet kan krympa ned till. Om det tillämpas i en kolumn, detta i huvudsak innebär att kolumnen kommer att bredden av det längsta ordet.

Se Pennan min-innehåll demo av Daniel Tonon (@daniel-tonon) på CodePen.

max-innehåll, å andra sidan, kommer att växa kolumnen/raden upp till den maximala möjliga bredd som dess innehåll tar upp, och ingen mer. Om du har någonsin white-space: nowrap på en stor del av texten, detta kommer synas mycket liknande.

Se Pennan max-innehåll demo av Daniel Tonon (@daniel-tonon) på CodePen.

Jag hade inte förväntat IE för att stödja dessa värden främst på grund av en anledning under minmax(). Jag blev glatt förvånad när jag var fel medan forska IE11 grid stöd. I kombination med minmax () det finns inte så många nät som en modern webbläsare som kan göra att IE inte kan hantera (så länge det galler inte innebär auto-placering).

i form-innehåll (i) är inte IE vänlig men…

i form-innehåll() fungerar inte inbyggt i IE. 😢

Lyckligtvis, passform-innehåll() är ett slags stenografi syntax och när du skriver ut det den långa vägen, DVS inte stöd för det! 🎉

Den långa vägen för att skriva det är genom att tillämpa auto (eller mer specifikt, minmax(min -, max-innehåll) till kolumn/rad i rutnätet mall, sedan ställa max-width: [värde] på det underordnade elementet.

Här är ett exempel på hur du kan använda passform-innehåll() funktion i en modern webbläsare:

/* Detta är inte IE-vänliga */
.grid {
display: nätet.
grid-template-kolumner: 100px passform-innehåll(300px) 1fr;
}

.cell {
grid-kolumn: 2;
}

Vad passar-innehåll (i) är i princip säga här är, att “göra den mellersta kolumnen tar upp största möjliga bredd av dess innehåll (dvs max-värde) upp tills den når 300px vid vilken punkt, inte odla något större om inte tvingas.”

Se Pennan passform-innehåll() moderna exempel 1 av Daniel Tonon (@daniel-tonon) på CodePen.

Om du läser detta på mobil, se detta avsnitt Codepen demos i liggande riktning för en bättre förståelse.

För att göra det vill säga att bete sig på ett liknande sätt, skulle du behöver för att skriva koden så här:

/* IE-vänliga `fit-innehåll () alternativ */
.grid {
displayen visar: -ms-nätet.
display: nätet.
-ms-grid-kolumner: 100px auto 1fr;
grid-template-kolumner: 100px auto 1fr;
}

.cell {
-ms-grid-kolumn: 2;
grid-kolumn: 2;
max-width: 300px;
}

Se Pennan passform-innehåll DVS hack av Daniel Tonon (@daniel-tonon) på CodePen.

Observera att detta inte är en full-bevis metod för replikering passform-innehåll() i IE. Om det finns en annan ruta i rutnätet som har ett innehåll som tar upp mer bredd än max-width inställning av den andra cellen, nätet kolumn kommer att växa för att passa den större cellen. Det kommer inte att bli fastklämd vid 300px som det skulle med fit-innehåll().

Se Pennan Sönder passform-innehåll hack av Daniel Tonon (@daniel-tonon) på CodePen.

Jämför det med modern passform-innehåll() funktion som klämmor hela kolumnen:

Se Pennan passform-innehåll() moderna exempel av Daniel Tonon (@daniel-tonon) på CodePen.

Medan jag är inne på ämnet, jag borde klara upp en vanlig missuppfattning kring passform-innehåll() funktionen i sig. Missuppfattningen är att den kolumn eller rad) att det används till kan aldrig överstiga det värde som du angav funktion. Detta är inte fallet. Om en kolumn är satt till en bredd av fit-innehåll(300px), och ett rutnät cell i kolumnen är satt till en bredd av 400px, kolumnbredden kommer att vara 400px, inte 300px som många kanske förväntar sig.

Se Pennan Sönder modern passform-innehåll av Daniel Tonon (@daniel-tonon) på CodePen.

DVS auto != Moderna auto

Auto värde i IE beter sig lite annorlunda än “auto” i moderna webbläsare. I IE, auto strikt lika minmax(min -, max-innehåll). En kolumn eller rad inställd på auto i IE kan aldrig krympa något mindre än min-innehåll. Det kan aldrig bli större än max-innehåll.

Moderna bläddrar behandla auto värde på ett lite annorlunda sätt. För det mesta, när de används värdet på sin egen, att de fortfarande behandla auto som minmax(min -, max-innehåll). Det är en liten men avgörande skillnad: auto i moderna webbläsare kan sträckas av de anpassa innehåll och motivera-innehåll egenskaper. DVS tillåter inte det.

När auto används för dimensionering kolumner i en modern webbläsare, auto beter sig mer som 1fr om det inte finns tillräckligt med innehåll för att fylla i kolumnen. DVS inte. DVS kommer alltid att krympa kolumnen ner till storlek av max-innehåll.

Så, om du har denna kod som definierar din grid:

.grid {
displayen visar: -ms-nätet.
display: nätet.
-ms-grid-kolumner: auto auto;
grid-template-kolumner: auto auto;
}

Du kommer att sluta upp med detta i moderna webbläsare:

Moderna webbläsare auto bredd på kolumnerna med lite innehåll. Kolumner fylla nätet.

…och detta i IE:

DVS auto bredd på kolumnerna med lite innehåll. Kolumner krympa till innehållet.

Ok, modern webbläsare man ser en hel del som vad vi får när vi använder 1fr. Kan vi använda minmax(min-innehåll, 1fr) för IE då? Som kommer att sträcka det ut som det gör i moderna webbläsare, kommer det inte?

Ja, men då kör vi i denna fråga:

.grid {
displayen visar: -ms-nätet.
display: nätet.
-ms-grid-kolumner: minmax(min-innehåll, 1fr) minmax(min-innehåll, 1fr);
grid-template-kolumner: auto auto;
}

Moderna webbläsare:

Moderna webbläsare auto bredd på kolumnerna med massor av innehåll i en cell. Kolumnerna är olika bredder.

DVS:

DVS minmax(min-innehåll, 1fr) kolumner med massor av innehåll i en cell. Kolumner är lika bredder.

FYI, minmax(min-innehåll, 1fr) är i huvudsak 1fr och 1fr och inte lika auto. Jag försökte också minmax(min-innehåll, 100%) i IE, men som bara resulterade i samma letar rutnät som du använder 1fr. Så långt kan jag säga, det är inte möjligt att replikera moderna webbläsare auto-funktionen i IE.

Det finns en annan avgörande skillnad mellan IE och moderna versioner av auto värde även om. Eftersom IE version av auto uttryckligen är lika minmax(min -, max-innehåll), auto kan inte användas i minmax() uttryck. minmax() kan inte användas inuti en annan minmax () – funktion auto är jävig.

Moderna webbläsare är lite mer nyanserad. De inser att automatiskt kan betyda olika saker i olika sammanhang. Om den används på egen hand, det motsvarar i huvudsak minmax(min -, max-innehåll), men med den extra möjligheten att sträcka ut. När det används som ett max värde, auto är identisk med max-innehåll. När det används som ett min värde motsvarar i huvudsak min-innehåll.

Om, just nu är du lovade att aldrig använda auto i din grid mallar någonsin igen, kanske du vill tänka om detta. Det finns bara tre omständigheter där auto kommer att bete sig på olika sätt mellan moderna webbläsare och IE. Dessa är:

  1. auto används i grid-template-kolumner utan en fr enhet i samma deklaration.
  2. auto används i grid-template-rader utan en fr enhet i samma deklaration och höjden på nätet är större än höjden av sin rutorna.
  3. auto används i ett minmax () – funktionen.

Det är det! De är de enda tillfällen när auto kommer att bete sig annorlunda i IE till hur det fungerar i moderna webbläsare. auto är mycket lättare att skriva än minmax(min -, max-innehåll) så det är inte riktigt värt att fördöma det över ett par lite webbläsare inkonsekvenser som är lätt att undvika.

Så vad har vi lärt oss?

  • 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() stöds inte, men du kan komma runt det med auto och max-width inställningar.
  • DVS auto är inte lika med auto i moderna webbläsare.

Inte få ut nät bara ännu dock. Det finns fortfarande en hel del saker som du behöver veta innan du kan börja på ett säkert sätt genomföra DVS nät i dina webbplatser. Se till att hålla sig för Del 2! Jag kommer att visa dig allt du behöver veta för att säkert bygga webbplatser för både IE och modern webbläsare som endast använder CSS nätet. Det bästa av allt, det blir inga fler behöver för skit alternativa layouter!

Artikel-Serien:

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

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!