CSS Rutenett i IE: CSS Rutenett og den Nye Autoprefixer

0
46

I Del 1 av denne serien, jeg avslørte noen misoppfatninger som mange mennesker har rundt Internet Explorer (IE) gjennomføring av CSS rutenett. Denne artikkelen bygger på at kunnskap. Det ville være best å gå tilbake og lese den artikkelen først, hvis du ikke allerede har gjort det.

I dag skal jeg være å håndtere den største misforståelse av alt: at bruk av IE gjennomføring av CSS rutenett er ekstremt vanskelig. Du kan enkelt bruke CSS rutenett i IE akkurat nå uten å måtte gi noen form for crappy skifte layout. Det er egentlig ikke så vanskelig.

Artikkel-Serien:

  1. Debunking Felles DVS. Rutenett Misforståelser
  2. CSS Rutenett og den nye Autoprefixer (Dette Innlegget)
  3. Faking en auto-plassering rutenett med hull (Kommer Snart!)

Gi DVS. en crappy skifte layout er litt av en tøff selge til kunder. Det er spesielt tøff hvis dette er for et intranett der 90% av brukerne bruker IE. Hvis du vil DVS. kompatibilitet, første du trenger å trekke seg tilbake til det faktum at du ikke kan bruke alle de fancy bjeller og fløyter som kan bli funnet i den moderne CSS rutenett spec. Ikke la dette komme deg ned om du ville bli overrasket over hvor mye IE11 kan håndtere, spesielt hvis det har noen hjelp fra Autoprefixer.

Før jeg kommer for langt inn i dette, trenger du å vite at dette ikke er en generell “hvordan du bruker CSS grid” artikkel. Denne artikkelen er for de som forstår CSS rutenett, men er for redd eller ikke lov til å bruke det, takk til IE.

Jeg vil bli forutsatt at du allerede har en god forståelse av hvordan å bruke CSS rutenett i moderne nettlesere for denne artikkelen. Hvis du ikke er sikker på hvordan du bruker CSS rutenett ennå, kan du gå se Rachel Andrew ‘ s utmerkede CSS rutenett video tutorial-serien. Etter det, gå spille noen nivåer av nettleseren spillet Rutenettet Hagen for å få litt hands-on CSS rutenett erfaring. Når du forstår det grunnleggende om hvordan å bruke CSS rutenett i moderne nettlesere, kan du komme tilbake hit og lære å bruke den på en måte som gir identiske resultater i IE10 og 11.

Sette opp Autoprefixer

Før du gjør noe annet, vil du ønsker å få Autoprefixer opp og kjører. Autoprefixer er et verktøy som brukes for automatisk å legge til nettleser-spesifikke CSS prefikser å CSS, slik at du ikke må. Det er litt som Babel, men for CSS. (Vi har en stor oversikt av skaperen av Autoprefixer her på CSS Triks.)

Hvis du aldri har brukt Autoprefixer (eller et bygge-verktøyet) før, da først og installere Node på din datamaskin så kan du følge denne guiden på hvordan du skal få en grunnleggende arbeidsflyt opp og kjører. Litt i guide spesielt om Autoprefixer er funnet her. (Jeg anbefaler Jafs oppsett over Grynt hvis du ikke er sikker på å gå med.)

Hvis du allerede bruker Autoprefixer i prosjektene dine, sørg for å oppdatere det til den siste versjonen ved å bruke denne kommandoen:

npm jeg autoprefixer@nyeste -D

Noen av funksjonene som brukes i den nyeste versjonen av Autoprefixer støttes ikke i PostCSS versjon 5. Dette betyr at du også må oppdatere din versjon av PostCSS til minst versjon 6. Hvis du bruker Jafs, som betyr å oppdatere jafs-postcss til minst v7.0.0. Hvis du bruker Grynt, må du kanskje oppdatere grynt-postcss til minst v0.9.0.

Når du har et miljø som er oppe og kjører, vil du trenger for å sette Autoprefixer rutenett innstilling til true. Uten at innstillingen er aktivert, Autoprefixer vil ikke være i stand til å gjøre noe av det kule ting som jeg er om å viser du.

Den eksakte metoden for å slå på rutenettet innstilling på avhenger mye på hvordan du kompilerer koden din. Hvis du bruker guiden som jeg linket til tidligere, ville du ha sett dette kodebit:

var processorsArray = [
// bekkasin for kortfattethet
krever(‘autoprefixer’)({ nettlesere: [‘2 siste versjoner’, ‘ie 6-8’, ‘Firefox > 20’] })
];

Legg til rutenett: true til valg for å aktivere rutenettet prefixing på:

var processorsArray = [
// bekkasin for kortfattethet
krever(‘autoprefixer’)({ rutenett: true, nettlesere: [‘2 siste versjoner’, ‘ie 6-8’, ‘Firefox > 20’] })
];

Forresten, nettleser innstillinger i opplæringen er ganske utdatert og vil være å gi ut langt mer prefikser enn du faktisk trenger. Bare gå med “>1%” vil bety at når en nettleser dør, Autoprefixer vil automatisk slutte å skrive prefikser for at nettleseren. Det baserer nettleser bruk på global nettleser data hentet fra caniuse.com.

Så, dette er Autoprefixer innstillinger som du bør ende opp med å bruke:

var processorsArray = [
krever(‘autoprefixer’)({ rutenett: true, nettlesere: [‘>1%’] })
];

Nå på morsomme ting! 😃

Autoprefixer har nye super krefter!

Du har kanskje lese Rachel Andrew ‘ s artikkel “Skal jeg prøve å bruke IE gjennomføring av CSS Grid Layout?” Som artikkelen handler om CSS rutenett og forstå at det er støtte i IE10 og 11. Det er en flott artikkel og veldig nyttig for å forstå IE ‘ s begrensninger. Definitivt fortsatt verdt å lese hvis du ikke allerede har sjekket det ut. Merk at det er svært utdatert i form av sin informasjon på Autoprefixer om.

Autoprefixer har kommet en lang vei siden Rachel skrev sin IE11 CSS rutenett artikkelen og Autoprefixer støtter nå langt mer CSS rutenett oversettelser. Ta en titt på denne nye, oppdaterte versjonen av Rachel er tabellen basert på Autoprefixer versjon 8.6.4. Vær oppmerksom på at elementer i fet skrift representerer en endring i Autoprefixer støtte i forhold til Rachel ‘ s artikkel:

CSS-Grid Eiendom
IE10 Gjennomføring
Autoprefixer?
Notater
grid-mal-kolonner -ms-grid-kolonner Ja
grid-mal-rekker -ms-grid-rekker Ja
grid-mal-områder NA Ja Autoprefixer bruker dette for å forstå hva nettet ser ut som, men ikke legge til noen ekstra egenskaper.
grid-mal NA Ja Forkortelse for grid-mal-kolonner, grid-mal-rader, og grid-mal-områder
grid-auto-kolonner NA Ingen DVS ikke støtter auto-plassering
grid-auto-rekker NA Ingen DVS ikke støtter auto-plassering
grid-auto-flyt NA Ingen DVS ikke støtter auto-plassering
rutenett NA Ingen Se denne GitHub problem pa hvorfor dette ikke er støttet
grid-rad-start -ms-grid-rad Yes1 Span syntaks krever grid-rad-end å bli definert
grid-kolonne-start -ms-grid-kolonnen Yes1 Span syntaks krever grid-kolonne-end å bli definert
grid-rad-end NA Yes1 grid-rad-start må være definert
grid-kolonne-end NA Yes1 grid-kolonne-start må være definert
grid-rad NA Yes1
grid-kolonnen NA Yes1
grid-området NA Yes2 Autoprefixer oversetter nettet området i kolonne/rad-koordinater
grid-rad-gap NA Yes3 Genererer ekstra rader/kolonner i IE.
grid-kolonne-gap NA Yes3 Genererer ekstra rader/kolonner i IE.
grid-gap NA Yes3 Genererer ekstra rader/kolonner i IE.
NA -ms-grid-kolonne-span Ja Oversatt fra grid-kolonne-end og grid-området.
NA -ms-grid-rad-span Ja Oversatt fra grid-rad-end og grid-området.
rett-selv -ms-grid-rad-align Ja
rettferdiggjøre selv -ms-grid-kolonne-align Ja

Tabell ansvarsfraskrivelser

Jeg vil dekke dette i langt mer detalj senere i artikkelen:

  1. Autoprefixer ikke prefiks negative heltall.
  2. Hvert rutenett element må ha unike området navn.
  3. Autoprefixer bare prefikser grid-gap hvis begge grid-mal-områder og grid-mal-kolonnene har blitt definert. Det kan heller ikke arve grid-gap via media queries.

grid-mal-områder er din nye beste venn

Som du kan se fra oppdatert (og mye mer positive-jakt) bordet, det er massevis av kule nye funksjoner i Autoprefixer nå. De viktigste av disse er støtte for grid-mal-områder (og i forlengelsen av grid-mal). Ved å støtte grid-mal-områder, Autoprefixer nå forstår nøyaktig hva din rutenett ser ut som. Dette banet veien for Autoprefixer å også støtte (i et begrenset kapasitet) grid-gap.

Vær oppmerksom på at Autoprefixer fortsatt støtter ikke snarveien til eiendom rutenett. Dette var en tilsiktet design beslutning som du kan lære mer om i dette GitHub problemet. Den korte historien er at rutenettet eiendom er ikke bare en snarvei for templating-innstillinger, men også auto-plassering-innstillinger. Siden IE kan ikke gjøre auto-plassering og grid-mal eiendom kan egentlig gjøre noe som rutenettet eiendom kan gjøre (DVS. at du kan håndtere), ble det besluttet at rutenettet eiendommen ikke var verdt å støtte.

Tilbake når Rachel skrev sin artikkel, dette var slags grid code ville du trenger å skrive for å støtte IE:

/* IE-vennlig kildekoden 26 November 2016 */
/* Kode som er nødvendig for å gjøre Autoprefixer fungere på riktig måte */

.grid {
visning: rutenett;
grid-mal-kolonner: 1fr 10px 1fr;
grid-mal-rader: 100px 10px 100px;
}

.celle-Et {
grid-kolonnen: 1;
grid-rad: 1;
}

.celle-B {
grid-kolonnen: 3;
grid-rad: 1;
}

.celle-C {
grid-kolonnen: 1;
grid-rad: 3;
}

.celle-D {
grid-kolonnen: 3;
grid-rad: 3;
}

Nå, du kan skrive kode som dette i stedet:

/* I dag er IE-vennlig kilde kode */
/* Autoprefixer kan nå gjøre denne koden DVS. trygt */

.grid {
visning: rutenett;
grid-gap: 10px;
grid-malen:
“a b” 100px
“c” 100px /
1fr 1fr;
}

.celle-Et {
grid-området: en;
}

.celle-B {
grid-området: b;
}

.celle-C {
grid-området: c;
}

.celle-D {
grid-området: d;
}

Autoprefixer vil ta koden ovenfor og oversette det til så mye mer IE-vennlig-koden for deg:

/* Autoprefixer er IE-vennlig oversettelse */

.grid {
skjerm: -ms-grid;
visning: rutenett;
grid-gap: 10px;
-ms-grid-rader: 100px 10px 100px;
-ms-grid-kolonner: 1fr 10px 1fr;
grid-malen:
“a b” 100px
“c” 100px /
1fr 1fr;
}

.celle-Et {
-ms-grid-rad: 1;
-ms-grid-kolonnen: 1;
grid-området: en;
}

.celle-B {
-ms-grid-rad: 1;
-ms-grid-kolonnen: 3;
grid-området: b;
}

.celle-C {
-ms-grid-rad: 3;
-ms-grid-kolonnen: 1;
grid-området: c;
}

.celle-D {
-ms-grid-rad: 3;
-ms-grid-kolonnen: 3;
grid-området: d;
}

Best av alt, kan du bare endre grid-mal eller grid-mal-områder eiendom med en media query og Autoprefixer vil automatisk oppdatere alle av celle i rutenettet koordinater for deg:

/* Endre en grid-mal med en media-query */

.grid {
visning: rutenett;
grid-gap: 10px;
grid-malen:
“a b” 100px
“c” 100px
“e f” 100px /
1fr 1fr;
}

@media (min-width: 600px){
.grid {
/* Autoprefixer 8.6.4 ikke arve rutenett hull 🙁 */
grid-gap: 10px;
grid-malen:
“a b c” 100px
“d e f” 100px /
1fr 1fr 1fr;
}
}

.celle-Et {
grid-området: en;
}

.celle-B {
grid-området: b;
}

.celle-C {
grid-området: c;
}

.celle-D {
grid-området: d;
}

.celle-E {
grid-området: e;
}

.celle-F {
grid-området: f;
}

Ovenfor blir oversatt til dette IE-vennlig-kode:

/* Autoprefixer er IE-vennlig media query oversettelse */

.grid {
skjerm: -ms-grid;
visning: rutenett;
grid-gap: 10px;
-ms-grid-rader: 100px 10px 100px 10px 100px;
-ms-grid-kolonner: 1fr 10px 1fr;
grid-malen:
“a b” 100px
“c” 100px
“e f” 100px /
1fr 1fr;
}

@media (min-width: 600px) {
.grid {
/* Autoprefixer 8.6.4 ikke arve hull 🙁 */
grid-gap: 10px;
-ms-grid-rader: 100px 10px 100px;
-ms-grid-kolonner: 1fr 10px 1fr 10px 1fr;
grid-malen:
“a b c” 100px
“d e f” 100px /
1fr 1fr 1fr;
}
}

.celle-Et {
-ms-grid-rad: 1;
-ms-grid-kolonnen: 1;
grid-området: en;
}

.celle-B {
-ms-grid-rad: 1;
-ms-grid-kolonnen: 3;
grid-området: b;
}

.celle-C {
-ms-grid-rad: 3;
-ms-grid-kolonnen: 1;
grid-området: c;
}

.celle-D {
-ms-grid-rad: 3;
-ms-grid-kolonnen: 3;
grid-området: d;
}

.celle-E {
-ms-grid-rad: 5;
-ms-grid-kolonnen: 1;
grid-området: e;
}

.celle-F {
-ms-grid-rad: 5;
-ms-grid-kolonnen: 3;
grid-området: f;
}

@media (min-width: 600px) {
.celle-Et {
-ms-grid-rad: 1;
-ms-grid-kolonnen: 1;
}

.celle-B {
-ms-grid-rad: 1;
-ms-grid-kolonnen: 3;
}

.celle-C {
-ms-grid-rad: 1;
-ms-grid-kolonnen: 5;
}

.celle-D {
-ms-grid-rad: 3;
-ms-grid-kolonnen: 1;
}

.celle-E {
-ms-grid-rad: 3;
-ms-grid-kolonnen: 3;
}

.celle-F {
-ms-grid-rad: 3;
-ms-grid-kolonnen: 5;
}
}

Den duplikat media query kan se litt stygg, men jeg forsikrer deg at dette er den best mulige måte som Autoprefixer kan håndtere media query oversettelse. Den nye IE celle i rutenettet koordinatene kan ikke være plassert i samme media spørring som rutenett mal definisjon. Dette ville føre til en av to mulige utfall. Ett resultat er at standard celle i rutenettet posisjoner ville overstyre den endrede posisjoner angitt i media query. Dette ville føre til at media query til å ha noen effekt i IE. Det andre utfallet ville bli for Autoprefixer å skifte alle stilarter innenfor media query (ja, som inkluderer alle stiler som du skrev selv) til en annen plassering i stilarket, og potensielt forårsake forferdelige CSS spesifisitet problemer. Du kan lære mer om tankegangen bak denne beslutningen i nå stengt GitHub problem for det.

Autoprefixer fortsatt ikke kan frelse deg fra alt

Selv Supermann kan ikke alltid lagre alle og Autoprefixer er ikke annerledes. Mens Autoprefixer er i stand til å kutte ned på mye av arbeidsmengden involvert i å gjøre våre nett IE-kompatibelt, og det kan ikke fikse alt. Det kan bare oversett ting som IE kan forstå. Disse er det mange kritiske tingene som du trenger å være klar over hvis du ikke ønsker å åpne området opp i IE én dag, og det kan blåse opp i ansiktet ditt.

Grid Gap har begrenset støtte

Som du kanskje har sett i det siste eksempelet, grid-gapet er for øyeblikket ikke i stand til å nedarves via media queries. Hvis du ønsker å bruke rutenett-gap, vil du trenger å duplisere grid-gap-innstillingen på tvers av alle medier søk der du definerer et rutenett mal for at rutenettet. Det er et problem, åpne på GitHub om dette. Gå gi den en tommel opp hvis du ønsker Autoprefixer for å støtte det. Forhåpentligvis problemet er fikset snart.

Det er ikke det eneste problemet rundt ved hjelp av grid-gapet selv. Det er bare støttes av Autoprefixer når både grid-mal-områder og grid-mal-kolonnene har blitt definert.

Autoprefixer legger grid-gap støtte ved hjelp av grid-mal-områder for å forstå hva rutenett ser ut som. Det tar deretter din grid-mal-kolonner og grid-mal-rader definisjoner og injiserer grid-gap verdi mellom hver rad og kolonne, og skaper ekstra rader og kolonner i IE.

Hvis du prøver å bruke rutenett-gap på egen hånd, uten grid-mal-områder, Autoprefixer har ingen måte å vite hva cellen tilhører hva nettet. Uten at kritisk kunnskap, er det ikke sikkert injisere ekstra kolonner og rader som IE behov.

Som forklarer grid-mal-områder, men hvorfor har vi også behov for å definere grid-mal-kolonner? Ikke noe sånt som dette være like lett for Autoprefixer å oversette?

.grid {
visning: rutenett;
grid-gap: 20 piksler;
grid-mal-områder:
“a b c”
“d e f”;
}

.celle-et {
grid-området: en;
}

.celle-f {
grid-området: f;
}

Rader og kolonner i CSS-grid-standard til en verdi av auto så kan ikke Autoprefixer bare legge til noe sånt som-ms-grid-kolonner: auto 20 piksler auto 20 piksler automatisk;? Det gjør at du for rader, så hvorfor kan ikke det gjøre det samme for kolonner?

Vel min nysgjerrige venn, jeg forklart i Del 1, at funksjonen for automatisk i IE fungerer litt annerledes for å automatisk i moderne nettlesere. Når kolonner er satt til auto i IE, vil de alltid krympe ned til verdien av maks-innhold. Moderne rutenett kolonner, på den annen side, vil utvide til 1fr hvis det er ingen andre fr enheter blir brukt i at rutenett mal erklæring. Dette avviket kan føre til en massiv forskjell i utseende mellom den moderne og den IE-versjon av et rutenett. Den Autoprefixer teamet følte at det var for farlig å gjøre antagelser om dette, så de gjorde grid-mal-kolonner et obligatorisk innstillingen for grid-gap til å ta effekt.

Så det forklarer hvorfor Autoprefixer ikke støtter grid-gap når grid-mal-kolonner mangler. Hvis auto oppfører seg så forskjellig i IE, så hvorfor ikke Autoprefixer støtte grid-gap-uten at brukeren eksplisitt har til å definere grid-mal-rader? Er ikke det like ille?

Egentlig ikke. Når du angi visning: rutenett, på noe, det er bredden som vil vokse til hele bredden av emballasjen. Dens høyde, på den annen side, vanligvis krymper til høyden av sitt innhold. Selvfølgelig dette er ikke alltid tilfelle. Det finnes en rekke grunner til at et rutenett kan være høyere enn dens innhold. Hvis nettet er også en flex-element og flex beholderen er høyere enn nettet, så det ville være en grunn til at nettet kan være høyere enn dens innhold. Generelt om, hvis det ikke er andre krefter som er involvert, så et rutenett beholder vil alltid være den samme høyde som dens innhold.

Siden høyden på en typisk rutenett er i samme høyde som dens innhold, i de fleste tilfeller, auto i både IE og moderne nettlesere vil oppføre seg likt til en annen. Det vil bare varierer i funksjonalitet hvis høyden av nettet overstiger høyden av innholdet på innsiden av det. For best mulig balanse mellom betjeningskomfort og nettleser konsistens, Autoprefixer laget et valg. De bestemte seg for at støtte en manglende grid-mal-rader eiendom, men ikke en manglende grid-mal-kolonner eiendom var den beste måten å håndtere grid-gap støtte.

Ingen auto-plassering! Ingen auto-plassering! Ingen auto-plassering!

Jeg kan virkelig ikke si dette nok. Det viktigste å huske når du bruker CSS rutenett i IE er at alt må være plassert manuelt. Det øyeblikk du begynner å tenke på å bruke auto-plassering er instant nettstedet blåser opp i IE. Jeg har en metode for å håndtere nett som har et ukjent antall celler i dem. Jeg dekker at i Del 3 av denne serien. Det viktigste å vite akkurat nå, er at hvis du ønsker å bruke CSS rutenett i en IE-vennlig måte, bør du bare bruke det hvis det er et kjent antall celler for et visst antall rader og kolonner.

Det er denne mangelen på auto-plassering i IE som gjør at det å ha tilgang til nettet områder gjennom Autoprefixer en slik velsignelse. I stedet for å måtte beregne alle koordinater manuelt, kan du i stedet navn på hver celle og deretter la Autoprefixer gjøre regnestykket for deg. Når du bruker media queries, trenger du bare å omdefinere rutenett mal og autoprefixer vil beregne alle koordinatene for deg. Du sjelden trenger å gjøre noe som helst kolonne eller rad telle. Det er flott!

Området må være unikt navn

Muligheten til å bruke rutenett-mal-områder er en av Autoprefixer største styrker, men det har sine begrensninger. Autoprefixer ikke har noen tilgang til DOM. På grunn av dette, Autoprefixer er helt avhengig av å bruke navn på område for å forstå hvor hver celle har behov for å bli plassert i rutenettet. Dette kan føre til sammenstøt hvis du bruker samme navn på område to ganger i samme stilsett.

Her er en liten eksempel. Tidlig i stilsettet, Grid Alpha har grid-mal-områder: “delta echo”. Senere i stilsettet, Grid Beta har grid-mal-områder: “echo delta”. Vi sier at vår celle i rutenettet tilhører området ekko… så går den i kolonne 1 eller 2?

.grid-alfa {
grid-mal-områder: “delta echo”;
}

.grid-beta {
grid-mal-områder: “echo delta”;
}

.grid-celle {
/* Hva kolonnen gjør .grid-celle gå i? */
-ms-grid-kolonnen: ???;
grid-området: echo;
}

Moderne nettlesere vet nøyaktig hva kolonne for å plassere celle i rutenettet i fordi de ikke har tilgang til DOM. Hvis cellen er plassert i Rutenett Alpha, det går i den første kolonnen. Hvis det er plassert i Rutenett Beta-det vil gå i den andre kolonnen. Autoprefixer kan bare lese CSS. Det har ingen idé om celle i rutenettet er plassert i Rutenett Alfa eller Rutenett Beta. Alle vet er at grid celle trenger for å bli plassert i “echo” – området. Autoprefixer løser denne conundrum ved å gå med den som kom sist i stilsettet. I dette tilfellet, Autoprefixer vil hedre Rutenett Beta “echo delta” områder definisjon, siden det oppstår siste. Hvis du har plassert celle i rutenettet inne Rutenett Alpha, det ville se flott ut i moderne nettlesere, men det ville være plassert i feil kolonne i IE.

Dette betyr også at du ikke kan egentlig bruke strategi for å gi en komponent én bestemt navn på område som er flere ganger omtalt. Refererer til at området navn i mer enn ett rutenett-mal-områder eiendom vil bryte SI for sikkert. Hvert eneste navn på område over hver enkelt rutenett i stilarket må være unik eller Autoprefixer vil freak pokker ut.

Autoprefixer foreløpig ikke advare deg når du har brukt et duplikat området navn i stilsettet. Hvis du ønsker å begynne å se advarsler for duplikat-området navn, det er et problem, åpne på GitHub at du kan legge til dine støtte til. I mellomtiden, den enkleste måten å sikre at hvert område navn som er unikt er trolig vedta en BEM stil tilnærming til å navngi områder.

.grid-alfa {
grid-mal-områder: “grid-alfa – __delta grid-alfa – __echo”;
}

.grid-beta {
grid-mal-områder: “grid-beta – __ – ekko grid-beta – __delta”;
}

.grid-celle {
/* Ikke mer konflikt 🙂 */
-ms-grid-kolonnen: 2;
grid-området: grid-alfa – __ – ekko;
}

Dette kan være ganske detaljert om det er mange kolonner og rader. Du ønsker kanskje å redusere det ned til en forkortelse i stedet. Selvfølgelig, jo mindre detaljert området ditt navn, jo større sjanse det er en konflikt.

.grid-alfa {
grid-mal-områder: “ga_delta ga_echo”;
}

.grid-beta {
grid-mal-områder: “gb_echo gb_delta”;
}

.grid-celle {
-ms-grid-kolonnen: 2;
tørre-området: ga_echo;
}

Det er ett viktig unntak. Grid områder i media queries er lov til å være duplikater av andre områder, så lenge området navn som er definert i media query er rettet mot samme element. Uten dette unntaket, vil det være umulig å endre rutenett områder basert på skjermstørrelsen. Det viktigste å huske er at hver grid har til å ha sitt eget sett med unike området navn som ikke må bli delt med noen andre nett.

@media (min-width: 600px) {
.grid-ett {
grid-mal-områder:
“alfa bravo”
“alfa charlie”;
}
}

@media (min-width: 900px) {
.grid-ett {
/* Dette er greit */
/* Det er rettet mot det samme element */
grid-mal-områder:
“alfa bravo charlie”;
}
}

@media (min-width: 900px) {
/* IKKE FINE! */
/ * “Alfa” området blir gjenbrukt på et annet element! */
.grid-to {
grid-mal-områder:
“alfa delta”;
}
}
Autoprefixer har begrenset kolonne og rad som strekker seg over støtte

Det er bare to egenskaper i IE implementering av CSS nett som vil hjelpe deg spenner over flere kolonner. Det viktigste som blir -ms-grid-kolonne/rad-span, som forteller DVS. hvor mange kolonner/rader span. Den andre er -ms-grid-kolonne/rad som forteller DVS. der hvor å begynne å telle fra.

.grid-celle {
-ms-grid-kolonne-spenn: 2; /* antall celler span */
-ms-grid-kolonnen: 1; /* starter celle */
}

I moderne nettlesere, og du har tilgang til langt flere valg.

Autoprefixer vennlig

Ut av den moderne måter å bruke flere celler, Autoprefixer fullt støtter følgende. Føl deg fri til å bruke noen av disse metodene så mye som du liker:

Angi en start-linje, og antall linjer som skal spenner (lik IE):

.grid-celle {
grid-kolonnen: 1 / span 2;
}

Angi en slutt linje, så span bakover:

.grid-celle {
grid-kolonnen: span 2 / 3;
}

Angi en start og en slutt linje direkte:

.grid-celle {
grid-kolonnen: 1 / 3;
}

Angi bare en rekke celler til å dekke ved hjelp av grid-kolonne/rad-end. Husk at IE kan ikke gjøre auto-plassering selv. En startstreken vil fortsatt trenger å være spesifisert andre steder i stilarket:

.grid-celle {
/* Kontroller at du angir en startstreken andre steder */
grid-kolonne-end: span 2;
}

Angi bare en startstreken:

.grid-celle {
/* Kort vei */
grid-kolonnen: 1;

/* Mer detaljert måte */
grid-kolonne-start: 1;
}
Autoprefixer uvennlig. Her bli drager!

Nå er dette der Autoprefixer når sin grense. Følgende metoder er støttet i moderne nettlesere, men støttes ikke av Autoprefixer. Dette er hovedsakelig på grunn av Autoprefixer å ha ingen anelse om hva rutenett, rutenett cellen tilhører siden det kan bare basere sine avgjørelser på hva som er i stilsettet.

Angi en startstreken og hvor mange linjer fra slutten av eksplisitt nett span:

.grid-celle {
grid-kolonnen: 1 / -1;
}

Angi både start-og slutt-linje fra slutten av eksplisitt nettet:

.grid-celle {
grid-kolonnen: -3 / -1;
}

Bare angi hvor mange linjer du vil span bruke en forkortelse syntaks (problemet i GitHub):

.grid-celle {
grid-kolonnen: span 2;
}

Angi bare en bakover span (IE kan ikke span bakover):

.grid-celle {
grid-kolonne-start: span 2;
}

Angi bare en slutt linje (DVS. ikke forstår slutten og Autoprefixer ikke vet hvor starten er):

.grid-celle {
grid-kolonne-end: 3;
}

Så, i utgangspunktet unngå å telle bakover fra slutten av nett og du blir fin. 😊

Unngå å bruke navn linje for nå

En av de kule funksjonene i moderne nett er å gi grid maler linje navn. I stedet for å bruke tall for å referere til en linje, kan du gi linje et navn og referanse som i stedet. Siden Autoprefixer støtter rutenett områder, du ville tro at de ville også støtte linje navn. Dessverre, det er ikke tilfelle. Fra versjon 8.6.4, Autoprefixer ikke støtter linje navn (i skrivende stund). Ikke bekymre deg! Det er ikke det at det er umulig å støtte (i hvert fall ikke helt), det har bare ikke blitt en høy prioritet for dem. Hvis du elsker ved hjelp av linje navn i nettene så la dem få vite om det i GitHub problem for det. Post din bruk tilfeller, og det vil sikkert øke prioritering av funksjonen. I mellomtiden, se om du kan bruke rutenettet områder i stedet for nå.

Husk at, hvis det kommer til å bli implementert, deretter hver linje navn i stilsettet må være unike. Som med rutenett områder, Autoprefixer ville ikke vet hva linje navnet tilhører hva nettet. Den eneste måten den kan fortelle er at hvis hver linje navn i stilsettet er unik (med unntak av media queries).

Du fortsatt trenger å teste!

IE vil oppføre seg selv mesteparten av tiden så lenge du følger alle reglene vi har dekket så langt. Når det er sagt, DVS. kan fortsatt være litt uforutsigbar. Bare nylig, gjorde jeg et rutenett elementet en vertikal flyter flex container og støtt en merkelig bug i IE11. Kolonnebredden ble satt til å minmax(min-innhold, 350px), men IE syntes å behandle min-innhold som maks-innhold i dette forholdet. Dette fullstendig brøt layout. Endre den til minmax(0, 350px) har løst problemet. Går bare for å vise at IE ‘ s rutenett implementering er ikke helt perfekt.

Det er også ganger når du kan ved et uhell glem å eksplisitt sted grid celler. Vi bygger vårt rutenett i moderne nettlesere fordi de har fin grid development tools (spesielt Firefox). Moderne nettlesere har auto-plassering, skjønt. Dette betyr at du kan være halvveis gjennom å bygge din rutenett, for deretter å bli kalt for et øyeblikk. Når du kommer tilbake til skrivebordet, kan du se oppsettet ser vakkert ut i nettleseren din, men du helt glemmer at du ikke har eksplisitt satt noen grid celler ennå. Du flytter til neste ting, lykkelig uvitende om at du har forlatt DVS. i en helt knust tilstand.

Ingen av disse problemene vil avsløre seg selv til du teste ditt nettsted i IE11. Noen gang at du får et rutenett ser bra ut på en moderne nettleser, åpner det opp i IE og dobbeltsjekke at det fortsatt ser ut slik du forventer.

Autoprefixer kontroll kommentarer

Til tross for Autoprefixer beste innsats, det er fortsatt noen sjeldne anledninger når det virker som Autoprefixer er å hindre deg mer enn det hjelper deg. Hvis du skulle finne deg selv i en situasjon hvor det ville være lettere å ikke ha Autoprefixer å oversette koden din, kan du slå Autoprefixer av ved hjelp av noe som kalles en “kontroll kommentar.”

autoprefixer: av

Denne kontrollen kommentar vil slå av Autoprefixer oversettelser for hele CSS-blokk. Det vil ikke prefiks noen stiler før eller etter punktet der kommentaren er gjort.

/* Inngang CSS */

.normal atferd {
visning: rutenett;
grid-mal-kolonner: 1fr 1fr;
grid-mal-rader: 1fr 1fr;
}

.off-atferd {
visning: rutenett;
/* autoprefixer: av */
grid-mal-kolonner: 1fr 1fr;
grid-mal-rader: 1fr 1fr;
}

.normal atferd-igjen {
visning: rutenett;
}
/* Utgang CSS */

.normal atferd {
skjerm: -ms-grid;
visning: rutenett;
-ms-grid-kolonner: 1fr 1fr;
grid-mal-kolonner: 1fr 1fr;
-ms-grid-rader: 1fr 1fr;
grid-mal-rader: 1fr 1fr;
}

.off-atferd {
visning: rutenett;
/* autoprefixer: av */
grid-mal-kolonner: 1fr 1fr;
grid-mal-rader: 1fr 1fr;
}

.normal atferd-igjen {
skjerm: -ms-grid;
visning: rutenett;
}
autoprefixer: ignorere neste

Hvis du er ute etter mer av en skalpell enn en sledge hammer, / * autoprefixer: ignorere neste */ kontroll kommentar er mer for deg. “Ignorer neste” vil du hoppe over neste CSS erklæring snarere enn å ignorere hele CSS-blokk.

/* Inngang CSS */

.normal atferd {
visning: rutenett;
grid-mal-kolonner: 1fr 1fr;
grid-mal-rader: 1fr 1fr;
}

.ignorer-neste-atferd {
visning: rutenett;
/* autoprefixer: ignorere neste */
grid-mal-kolonner: 1fr 1fr;
grid-mal-rader: 1fr 1fr;
}
/* Utgang CSS */

.normal atferd {
skjerm: -ms-grid;
visning: rutenett;
-ms-grid-kolonner: 1fr 1fr;
grid-mal-kolonner: 1fr 1fr;
-ms-grid-rader: 1fr 1fr;
grid-mal-rader: 1fr 1fr;
}

.ignorer-neste-atferd {
skjerm: -ms-grid;
visning: rutenett;
/* autoprefixer: ignorere neste */
grid-mal-kolonner: 1fr 1fr;
-ms-grid-rader: 1fr 1fr;
grid-mal-rader: 1fr 1fr;
}
Pre-prosessor kommentarer

Hvis du bruker Sass (eller en annen CSS-pre-prosessor) i prosjektet ditt, må du ikke bruke dobbel skråstrek (//) metode for å skrive disse kommentarene. Sass vil kle disse kommentarene ut før Autoprefixer har en sjanse til å oversette koden.

/* Inngang SCSS */

.normal atferd {
visning: rutenett;
}

.mislyktes-off-atferd {
// autoprefixer: av
visning: rutenett;
}

.vellykket-off-atferd {
/* autoprefixer: av */
visning: rutenett;
}
/* Utgang CSS */

.normal atferd {
skjerm: -ms-grid;
visning: rutenett;
}

.mislyktes-off-atferd {
skjerm: -ms-grid;
visning: rutenett;
}

.vellykket-off-atferd {
/* autoprefixer: av */
visning: rutenett;
}

La oss oppsummering!

Så, etter alt det, her er listen over alle tingene du må huske å være en IE11 CSS grid master:

  • Bruk den nyeste versjonen av Autoprefixer (npm jeg autoprefixer@nyeste -D).
  • Slå på Autoprefixer grid-innstillingen.
  • Ikke forsøk å bruke auto-plassering, hver celle må legges inn manuelt.
  • Bruk grid-mal-områder som primær metode for å plassere grid celler i posisjon.
  • Bruk grid-mal (ikke på nett) som en snarvei.
  • Ikke bruk dupliserte området navn med mindre de er inne i en media query rettet mot det samme element. Også, kan du gi denne GitHub problem med din støtte hvis du ønsker Autoprefixer til å advare deg når du har brukt en dupliserte navn på område.
  • Du kan bruke grid-gap, så lenge du definere både grid-mal-områder og grid-mal-kolonner.
  • grid-gapet er for tiden ikke arvet gjennom media queries. Å gå til å gi denne GitHub utstede en tommel opp hvis du ønsker å skrive mindre grid-gap-koden.
  • Når som strekker seg over flere kolonner og rader, unngå å telle bakover fra slutten av nettet. Autoprefixer ikke forstår ditt nett godt nok til å støtter dette.
  • Unngå å bruke navn linje for nå. Gi denne GitHub utstede en tommel opp hvis du vil begynne å bruke dem.
  • Bruke kontroll kommentarer /* autoprefixer: av * / / * autoprefixer: ignorere neste */ for å hindre Autoprefixer fra oversette visse deler av din stil-ark som forårsaker problemer.
  • Ikke glem å teste!

…og fra Del 1:

  • IE har en implisitt rutenett.
  • IE støtter gjenta funksjonalitet.
  • minmax(), min-innhold og maks-innholdet er alle opprinnelig støttet.
  • passer-innhold() ikke er opprinnelig støttet, men du kan omgå dette med auto-og max-width innstillinger.
  • IE auto er ikke lik for å automatisk i moderne nettlesere.

Hvis du har noen spørsmål, eller om dette virkelig hjulpet deg ut, gi meg beskjed i kommentarfeltet! Jeg er også @Daniel_Tonon på . 😁

Opp neste gang…

I Del 3, jeg vil dekke hvordan å lage en fullt responsive flexbox-basert rutenett i IE11. Dette flexbox teknikken selv replikater grid-gap funksjonalitet!

Artikkel-Serien:

  1. Debunking Felles DVS. Rutenett Misforståelser
  2. CSS Rutenett og den nye Autoprefixer (Dette Innlegget)
  3. Faking en auto-plassering rutenett med hull (Kommer Snart!)

SHARE
Previous articleDen Ellevte Fjerde
Next articleDen Elften Vierten