CSS Rutenett i IE: Debunking Felles DVS. Rutenett Misforståelser

0
34

Dette er den første i en tredelt serie om hvordan å bruke CSS rutenett på en måte som vil fungere ikke bare i moderne nettlesere, men også i Internet Explorer (IE). Tenk å skrive CSS-grid-kode uten å måtte skrive et tilbakefall layout! Mange av oss tror at dette er noe langt frem i fremtiden som er mange år unna. Hvis det eneste som holder deg tilbake fra at virkeligheten er IE11 (sjekk caniuse.com), så du er på hell! Den dagen er i dag! Eller i det minste det vil være når du er ferdig med å lese denne serien. 😉

Artikkel-Serien:

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

For å begynne, denne første delen kommer til å ta livet av noen vanlige misoppfatninger rundt IE11 sitt rutenett gjennomføring.

I Del 2, jeg kommer til å blåse lokket av myten at ved hjelp av CSS rutenett i IE11 er super vanskelig. Ikke mer crappy fallback oppsett for IE11!

I Del 3 vil jeg vise deg en kul flexbox teknikk som jeg bruker for å lage enkel auto-plassering nett. Disse falske auto-plassering nett har fast pixel-basert rutenett hull og rutenett hull som linje opp perfekt med de som kan gjøres med selve CSS-rutenett. Bortsett fra, i dette tilfellet, de fungerer perfekt i IE11, er fullt responsiv, og å oppdatere sine kolonne count basert på skjerm bredde eneste du trenger å endre en enkelt bredde verdi i en media query.

Det er nok intro ‘ s kan komme i gang på disse misforståelser!

IE har en implisitt rutenett

I CSS rutenett, eksplisitt rutenett er det du manuelt angi med alle grid-mal-* egenskaper. Den implisitte rutenett er hvordan nettleseren håndterer plassering av celler som er plassert på utsiden av den eksplisitte rutenett.

Når du bruker CSS rutenett i moderne nettlesere, de implisitte rutenett er ganske opplagt, siden nettet vil fortsette å skape og sted grid celler automatisk på nye rader uten å definere dem. DVS ikke har auto-plassering, så det er lett å anta at IE ikke har en implisitt rutenett. Gjør det selv — du trenger bare å være litt mer eksplisitt når det gjelder å bruke det.

Se Penn Eksplisitt vs. implisitt rutenett av Daniel Tonon (@daniel-tonon) på CodePen.

Den mest vanlige bruken tilfelle for bruk av IE er implisitt grid er å bruke den til å generere din rader for deg. Hvis du vil at alle linjer i rutenett til å ha sin høyde diktert av høyden av deres innhold, trenger du ikke å bry deg med å definere -ms-grid-rader (IE-versjon av grid-mal-rader). Radene vil automatisk bli generert for deg i IE når du legger inn din grid celler.

En viktig ting å merke seg om er at moderne nettlesere har tilgang til egenskaper for grid-auto-rader og grid-auto-kolonner. Disse egenskapene lar deg kontrollere hvordan nettleseren håndterer størrelsen av rader og kolonner i implisitt rutenett. IE har ingen oppfatning av disse egenskapene. IE er implisitt rader og kolonner kan bare noen gang være dimensjonert som auto.

DVS. har du gjenta funksjonalitet

Frykt ikke! Det er ikke nødvendig å skrive ut 1fr 20 piksler 12 ganger for din dyrebare 12-kolonnen rutenett (DVS. ikke har native grid-gap-støtte). DVS. kommer pre-pakket med full gjenta () – funksjonen. Det er bare gjemmer seg bak en annen syntaks.

Den moderne syntaks for å gjenta verdier i kolonnene og radene er repeat(12, 1fr 20 piksler) som betyr, “gjenta 1fr 20 piksler mønster 12 ganger.” IE-versjon av syntaksen er (1fr 20 piksler)[12]. IE-versjonen har identisk funksjonalitet, bare en annen syntaks.

/* Dette rutenettet… */
.grid-ett {
skjerm: -ms-grid;
visning: rutenett;
-ms-grid-kolonner: 1fr 20 piksler 1fr 20 piksler 1fr 20 piksler 1fr;
grid-mal-kolonner: 1fr 20 piksler 1fr 20 piksler 1fr 20 piksler 1fr;
}

/* …er akkurat det samme som dette rutenettet: */
.grid-to {
skjerm: -ms-grid;
visning: rutenett;

/* IE gjenta syntaks */
-ms-grid-kolonner: 1fr (20 piksler 1fr)[3];

/* Moderne gjenta syntaks */
grid-mal-kolonner: 1fr gjenta(3, 20 piksler 1fr);
}

Andre enn syntaks, det er bare en forskjell mellom måten moderne nettlesere og IE implementere gjenta () – funksjonen. Moderne nettlesere lagt auto-fit og auto-fyll søkeord til funksjonen. Siden DVS. ikke støtter auto-plassering, disse søkeordene er ganske meningsløst å SI så unngå å bruke dem.

minmax() er opprinnelig støttet i IE

minmax() er en CSS-dimensjonering funksjon som er eksklusivt for CSS-grid (i øyeblikket, uansett). Funksjonaliteten er ganske selvforklarende. Du gi det en minimum verdi i første parameter og en maksimal verdi i den andre parameteren. Kolonnen eller raden at dette er brukt til er da i stand til å krympe og vokse mellom de to verdiene som den tilgjengelige plassen til den øker og minker. Prøv å endre størrelsen på codepen nedenfor for å se det i aksjon.

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

Folk tror ofte at denne awesome liten funksjonen støttes ikke i IE, men det er faktisk opprinnelig støttet. Jeg gjetter dette er på grunn av minst én av følgende to årsaker:

  1. Det er kult funksjonalitet og de tror IE kan ikke ha kule ting som dette, fordi IE suger.
  2. Alle har sett denne magiske kodebiten og hadde sine drømmer knust da de innså at det ikke ville fungere i IE: grid-mal-kolonner: repeat( auto-fit, minmax(250px, 1fr) );.

(Hvis du aldri har sett denne kodebiten før, se denne korte videoen og forberede seg til å ha ditt sinn blåst.)

Siden det magiske kodebiten ikke fungerer i IE, folk sannsynligvis anta at ingenting i tekstutdraget er IE-vennlig. I virkeligheten, den eneste grunnen til at kodebiten er ikke sammenlignbar i IE er fordi DVS. ikke støtter auto-fit søkeord og auto-plassering.

min-innhold og maks-innhold er begge 100% IE-vennlig

IE har full innebygd støtte for både min-innhold og maks-innhold verdier.

min-innhold er et nøkkelord verdi som vil krympe kolonne/rad ned til minst mulig bredde at innholdet kan krympe ned til. Hvis det brukes til-kolonnen, dette betyr i hovedsak at kolonnen vil bli bredden av de lengste ordet.

Se Pennen min-innhold demo av Daniel Tonon (@daniel-tonon) på CodePen.

max-innhold, på den annen side, vil vokse kolonne/rad opp til størst mulig bredde på at innholdet tar opp, og ingen videre. Hvis du har noen gang satt white-space: nowrap på en stor del av teksten, vil dette vises veldig lik.

Se Penn max-innhold demo av Daniel Tonon (@daniel-tonon) på CodePen.

Jeg ventet ikke at IE for å støtte disse verdiene hovedsakelig på grunn av grunn under minmax(). Jeg ble forbauset over når jeg ble påvist feil mens forsker IE11 rutenett støtte. I kombinasjon med minmax(), det er ikke mange nettene som en moderne nettleser kan gjøre at IE ikke kan håndtere (så lenge nettene som ikke involverer auto-plassering).

passer-innhold() er ikke IE vennlig, men…

passer-innhold() fungerer ikke innebygd i IE. 😢

Heldigvis, fit-innhold() er en slags stenografi syntaks og når du skriver det ut på den lange veien, DVS støtter det! 🎉

Den lange veien til å skrive det på er ved å bruke auto (eller mer spesifikt, minmax(min-innhold, max-innhold)) til kolonne/rad i rutenettet mal, og deretter innstilling av maks bredde: [value] på barnet element.

Her er et eksempel på hvordan du kan bruke fit-innhold () – funksjonen i en moderne nettleser:

/* Dette er ikke IE-vennlige */
.grid {
visning: rutenett;
grid-mal-kolonner: 100px passer-innhold(300px) 1fr;
}

.celle {
grid-kolonnen: 2;
}

Hva passer-innhold() er i utgangspunktet sa her er “gjør den midterste kolonnen ta opp størst mulig bredde av innholdet (dvs. dens max-innhold-verdi) opp til den når 300px på hvilket tidspunkt, vokser ikke noen større mindre tvunget til.”

Se Pen passform-innhold() moderne eksempel 1 av Daniel Tonon (@daniel-tonon) på CodePen.

Hvis du leser dette på mobiltelefon, se denne paragraf Codepen demoer i liggende retning for å få en bedre forståelse.

For å gjøre IE oppfører seg på nesten samme måte, ville du trenger å skrive kode som dette:

/* IE-vennlig ” fit-innhold()` alternativ */
.grid {
skjerm: -ms-grid;
visning: rutenett;
-ms-grid-kolonner: 100px auto 1fr;
grid-mal-kolonner: 100px auto 1fr;
}

.celle {
-ms-grid-kolonnen: 2;
grid-kolonnen: 2;
maks bredde: 300px;
}

Se Pen passform-innhold IE hack av Daniel Tonon (@daniel-tonon) på CodePen.

Merk at dette ikke er en full-bevis metode for å kopiere passer-innhold() i IE. Hvis det er en annen celle i rutenettet som har et innhold som tar opp mer bredde enn maks bredde innstillingen av den andre cellen, rutenett kolonnen vil vokse til å passe større celle. Det vil ikke være festet på 300px som det ville med fit-innhold().

Se Penn Brutt passer-innhold hack av Daniel Tonon (@daniel-tonon) på CodePen.

Sammenlign det med den moderne passform-innhold () – funksjonen som klemmer hele kolonnen:

Se Pen passform-innhold() moderne eksempel av Daniel Tonon (@daniel-tonon) på CodePen.

Mens jeg er inne på temaet, jeg skulle rydde opp i en vanlig misforståelse rundt fit-innhold () – funksjonen i seg selv. Misforståelse er at kolonnen (eller rad) som det er søkt å aldri overskride den verdien som du har gitt funksjonen. Dette er ikke tilfelle. Hvis en kolonne er satt til en bredde av fit-innhold(300px), og en celle i rutenettet i denne kolonnen er satt til en bredde av 400px, kolonnebredde vil være 400px, ikke 300px som mange kanskje forventer.

Se Penn Brutt moderne passform-innhold av Daniel Tonon (@daniel-tonon) på CodePen.

IE auto != Moderne auto

Auto verdi i IE oppfører seg litt annerledes enn auto i moderne nettlesere. I IE, auto strengt lik minmax(min-innhold, max-innhold). En kolonne eller rad satt til auto i IE kan aldri krympe noe mindre enn min-innhold. Det også kan aldri bli noe større enn maks-innhold.

Moderne søker behandle auto verdi litt annerledes. For det meste, når verdien er brukt på sine egne, er de fortsatt behandle auto som minmax(min-innhold, max-innhold). Det er en liten, men avgjørende forskjell om: auto i moderne nettlesere er i stand til å bli strukket ved å justere innhold og rettferdiggjøre-innhold egenskaper. DVS. tillater ikke det.

Når auto brukes for dimensjonering kolonner i en moderne nettleser, auto oppfører seg mer som 1fr hvis det ikke er nok innhold til å fylle kolonnen. DVS ikke. IE vil alltid krympe kolonne ned til størrelsen av maks-innhold.

Så, hvis du har denne koden for å definere din nettet:

.grid {
skjerm: -ms-grid;
visning: rutenett;
-ms-grid-kolonner: auto;
grid-mal-kolonner: auto;
}

Du vil ende opp med dette i moderne nettleserne:

Moderne nettleser auto bredde kolonner med lite innhold. Kolonner fylle rutenettet.

…og dette i IE:

IE auto bredde kolonner med lite innhold. Kolonner krympe til innholdet.

Ok, moderne nettleser man ser mye som det vi får når vi bruker 1fr. Kan vi bruke minmax(min-innhold, 1fr) for IE da? Som vil strekke det ut som det gjør i det moderne nettlesere vil ikke det?

Ja, men da vi kjører inn i dette problemet:

.grid {
skjerm: -ms-grid;
visning: rutenett;
-ms-grid-kolonner: minmax(min-innhold, 1fr) minmax(min-innhold, 1fr);
grid-mal-kolonner: auto;
}

Moderne nettleserne:

Moderne nettleser auto bredde kolonner med mye av innholdet i en celle. Kolonner er forskjellige bredder.

DVS.:

DVS. minmax(min-innhold, 1fr) kolonner med mye av innholdet i en celle. Kolonner er lik bredder.

FYI, minmax(min-innhold, 1fr) er i hovedsak 1fr og 1fr og ikke lik auto. Jeg har også prøvd minmax(min-innhold, 100%) i IE, men som kun resulterte i samme ser nettet som bruker 1fr. Så vidt jeg kan fortelle, er det ikke mulig å gjenskape den moderne nettleser auto funksjonalitet i IE.

Det er en avgjørende forskjell mellom IE og moderne versjoner av auto verdi om. Siden IE-versjon av auto eksplisitt er lik minmax(min-innhold, max-innhold), auto, kan ikke brukes i minmax() uttrykk. minmax() kan ikke brukes i en annen minmax () – funksjonen, som så automatisk er inhabil.

Moderne nettlesere er litt mer nyansert. De gjenkjenner som automatisk kan bety forskjellige ting i ulike sammenhenger. Hvis de brukes på egen hånd, er det i hovedsak er lik minmax(min-innhold, max-innhold), men med den ekstra muligheten til å strekke seg. Når den brukes som en maks verdi, auto er identisk med maks-innhold. Når den brukes som en min verdi det i hovedsak er lik min-innhold.

Hvis, akkurat nå, er du sverget på å aldri bruke auto i grid maler igjen, ønsker du kanskje å tenke på det. Det er bare tre tilfeller der auto vil oppføre seg annerledes mellom moderne nettlesere og IE. Disse er:

  1. auto brukes i grid-mal-kolonner uten en fr enhet i samme erklæring.
  2. auto brukes i grid-mal-rader uten en fr enhet i samme erklæring og høyden på nettet er større enn høyden av sin grid celler.
  3. auto brukes i et minmax () – funksjonen.

Det er det! De er de eneste gangene når auto vil oppføre seg annerledes i IE til hvordan det fungerer i moderne nettlesere. auto er mye lettere å skrive enn minmax(min-innhold, max-innhold), så det er egentlig ikke verdt å fordømme det over et par små nettleser inkonsekvenser som lett kan unngås.

Så hva har vi lært?

  • 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 støttet, men du kan jobbe rundt det med auto-og max-width innstillinger.
  • IE auto er ikke lik for å automatisk i moderne nettlesere.

Ikke få rutenettene ut ennå selv. Det er fortsatt mange ting som du trenger å vite før du kan begynne trygt å implementere IE nett inn dine nettsteder. Sørg for å feste rundt for Del 2! Jeg vil vise deg alt du trenger å vite for å trygt bygge nettsteder for både IE og moderne nettlesere som kun bruker CSS rutenett. Best av alt, vil det ikke være mer behov for crappy fallback oppsett!

Artikkel-Serien:

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

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!