CSS Rutenett i IE: Faking en Auto-Plassering Rutenett med Hull

0
37

Dette er tredje og siste del i en tredelt serie om ved hjelp av CSS rutenett trygt i Internet Explorer 11 (IE11) uten å gå gale.

I Del 1, vil jeg dekket noen av de vanligste misforståelsene om at folk har om IE11 sitt eige CSS rutenett gjennomføring. I Del 2, jeg viste verden hvor enkelt det faktisk er å skrive IE-vennlig CSS grid code.

I dag skal jeg gå bort fra CSS-nett for et øyeblikk for å vise deg en flexbox teknikk som replikater grunnleggende CSS rutenett auto-plassering-funksjonalitet. Dette CSS rutenett replica vil også se ut som et rutenett-gapet har blitt brukt til det. Jeg trenger å være super clear selv: dette er ikke om hvordan å gjøre selve CSS-grid auto-plassering fungere i IE.

Artikkel-Serien:

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

Hvordan å lage en falsk rutenett med celle-hull

Trinn 1: HTML

Jeg vil bruke denne grunnleggende HTML som et eksempel:

<div class=”grid-wrapper”>

<div class=”grid”>
<div class=”grid-celle”></div>
<div class=”grid-celle”></div>
<div class=”grid-celle”></div>
<div class=”grid-celle”></div>
<div class=”grid-celle”></div>
<div class=”grid-celle”></div>
</div>

</div>
Trinn 2: Border-box (dimensjonering

Det første vi trenger å gjøre i CSS er å sørge for at alle boksene er å være størrelse basert på border-box heller enn innhold-boksen. Den beste måten å gjøre det på er ved å bruke boksen størrelse: border-box arv teknikk:

html {
safe-dimensjonering: border-box;
}

*, *::før, *::etter {
safe-dimensjonering: arve;
}

Som vil bli brukt globalt. Hvis du arbeider på et eksisterende prosjekt som ikke har eske-dimensjonering satt til grensen-boksen, og deretter endre html-kode i kodebiten en velger som er rettet mot det elementet du ønsker å slå inn i et rutenett.

Trinn 3: Flex

Neste, du må slå på noen flexbox innstillinger:

.grid {
/* Styrker lik celle høyder */
skjerm: flex;
flex-wrap: wrap;
}
Trinn 4: Bredder

Nå, sette opp dine kolonnebreddene. Vi gjør oss selv en enkel tre-kolonnen nettet:

.grid-celle {
/* Angir kolonnen teller */
bredde: calc(100% / 3); /* calc () – metoden */
bredde: 33.33%; /* andel metode */
}

Calc () – metoden gjør det kolonnebreddene til å endres litt lettere. Du oppgir hvor mange kolonner du ønsker, og nettleseren gjør regnestykket for deg. Dette er spesielt hendig når du trenger et større antall kolonner, som 7 eller 8. Nettleseren har støtte for calc() er sterk, men ikke så sterk som en rå prosent verdi som har vært støttet av nettlesere siden begynnelsen av CSS.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
19* 15 4* 10 12 6*

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1* 46 Ingen 67 67 60

Andelen metoden har litt bedre nettleser støtter og kan være litt mer stabil i IE. Hvis du ikke trenger å støtte Opera Mini, vil jeg fortsatt anbefale å gå med calc () – metoden først. Test i IE, og hvis layout pauser, bør du først prøve funksjonen 99.999% i stedet for 100% i calc-funksjonen (calc(99.999% / 3)). Hvis det ikke fungerer, så prøv å bytte til den prosentandel metode. Jeg skal bruke calc () – metoden i alle mine eksempler. Vær oppmerksom på at hvis du bruker en CSS-pre-prosessor som SCSS, kan du ha det beste av begge verdener ved å få pre-prosessor for å gjøre regnestykket for deg. Dette går på bekostning av ikke å være så lett i stand til å redigere eller se kolonne teller i nettleseren dev verktøy.

/* Angi kolonnen count ved å bruke SCSS */
.grid-celle {
bredde: (100% / 3);
}

/* CSS utgang i nettleseren */
.grid-celle {
bredde: 33.3333333333%;
}

La oss gi grid celler noen høyde og en indre box-shadow slik at vi kan se hva som skjer. Jeg er ikke legger til grensen — jeg skal bruke det senere. 😉

.grid-celle {
/* Slik at vi kan se grid celler */
box-shadow: inset 0 0 0 1px #000;
høyde: 100px;
}

.grid-wrapper {
/* Gjør det mulig for oss å se kantene på nettet */
box-shadow: 0 0 10px 2px grønn;
}

Du skal nå ha noe som ser ut som dette:

En grunnleggende 3 x 2 rutenett uten hull

Det er kjedelig om, ikke sant? Ikke alle vet hvordan å gjøre det. Hvor er disse rutenett hull holder jeg snakker om? Jeg vil at mine hull!!!

Trinn 5: Grensen

Her er der vi få til den interessante delen. Siden vi satt safe-dimensjonering til border-box, 33.33% bredde inkluderer nå grensen. Hva dette betyr er at vi kan starte trygt å blande fast og prosentandel basert enheter! 😃

.grid {
/* Oppretter en lik ytre gap */
polstring: 20 piksler 0 0 20 piksler;
}

.grid-celle {
/* Lager hull */
grensen: 0 solid gjennomsiktig;
border-width: 0 20 piksler 20 piksler 0;
}

Dette resulterer i noe som ser ut som et rutenett med like stor avstand overalt:

En 3 x 2 rutenett med like store mellomrom mellom hver celle og de ytre kantene av nettet

For å bidra til å gi deg en bedre ide om hva det er som skjer, ta en titt på følgende bilde:

Fargekodede diagram av nettet

Det blå området på toppen og venstre side av rutenettet er det polstring for .grid-element. Gult omriss viser området som hver .grid-celle element tar opp. De røde områdene på nedre og høyre side av hver celle er grensen for hver .grid-celle element.

Det kan være de ser at du faktisk ønsker. På den annen side, det er ikke det et rutenett med en grid-gap innstillingen ser ut som. Det er derfor vi har enda et skritt.

Trinn 6: Marg og overløp

For å få grid trykke hardt opp mot kantene av emballasjen, vi trenger litt hjelp fra negative marginer og overflow: hidden:

.grid {
/* Trekker grid celler hardt mot kantene */
marg: -20 piksler;
}

.grid-wrapper {
/* Hindrer odd margin atferd */
overflow: hidden;
}

Trenger vi å bruke overflow: hidden å hindre at dette skjer:

Topp og bunn negativ margin ignoreres hvis overløp er ikke skjult

Anvendelse av negativ margin og overflow: hidden vil få oss til denne vakre rekreasjon av grunnleggende grid-gap funksjonalitet:

En 3 x 2 rutenett som ser identiske til en CSS-nett med et gap innstilling

Øverst og til venstre polstring på nettet er faktisk valgfritt. Du kan velge å la av polstring og endre margin verdi som vist nedenfor hvis du foretrekker:

.grid {
/* Margin må være dette hvis du forlater av toppen og venstre .grid polstring */
margin: 0 -20 piksler -20 piksler 0;
}

Men, hold på! Jobben er ikke helt over ennå. Ta en titt på hva som skjer hvis vi legger til en bakgrunnsfarge til en av grid celler:

En rosa bakgrunn anvendt til den øverste venstre cellen flyter inn i rutenettet gap

Ikke akkurat hva vi vil, så det er en flere trinn.

Trinn 7: bakgrunn-klipp

For å hindre celle i rutenettet bakgrunn fra blødning inn i våre falske grid-gap, må vi legge bakgrunn-klipp: padding-boksen til det.

.grid-celle {
/* Hindrer bakgrunn utfallende */
bakgrunn-klipp: padding-boks;
}

Nå har vi dette:

Bakgrunnen blø har blitt fikset!

Hvis du har aldri hørt om bakgrunnen-klipp eiendommen før, kan du bli bekymret om nettleseren støtter… vel ikke være. bakgrunn-klippet har eksistert siden IE9!

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
15 10.5 4 9 12 7

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
7.0-7.1 10 alle 4.4 67 60

Trinn 8: Media Spørsmål!

Mesteparten av tiden, nett trenger å være i stand til å endre antall kolonner at de har som de vokse og krympe. Ved å bruke andre metoder kan være en enorm smerte. Du har kanskje for å beregne en haug av nth-childs, slik at du kan fjerne den høyre margen eller hva som helst. Med denne metoden, du trenger bare å endre en enkelt verdi! 😃

.grid-celle {
/* Setter standard kolonne teller */
bredde: calc(100% / 1); /* 1 kolonne */
}

@media (min-width: 400px){
.grid-celle {
bredde: calc(100% / 2); /* 2 kolonner */
}
}

@media (min-width: 600px){
.grid-celle {
bredde: calc(100% / 3); /* 3 kolonner */
}
}

3 x 2 rutenett med hull
2 x 3 rutenett med hull
1 x 6 rutenett med hull

Her er hvordan det ser ut når vi setter det hele sammen:

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

Ain ‘ t nobody fikk tid til dat!

Det er mye arbeid i forhold til hva moderne Rutenett kan gjøre på bare tre linjer av CSS! For å gjøre oppgaven enklere, jeg opprettet en SCSS-drevet mixin jeg kaller Renne Rutenett. Når Renne Rutenett er installert i prosjektet, kan du raskt opprette en tre-kolonnen rutenett med 20 piksler hullene ved hjelp av følgende SCSS kode:

.grid-wrapper {
overflow: hidden; /* Trenger dette for chrome bug */
}

.grid {
@inkluderer rutenett($kolonner: 3, $gutter: 20 piksler);
}

Du kan skrive det enda kortere som dette hvis det føles for detaljert:

.grid-wrapper {
overflow: hidden;
}

.grid {
@inkluderer rutenett(3, 20 piksler);
}

Gutter Rutenett kommer pre-bygget med et par sett med stoppunkter så kan du ikke skrive noen stoppunkter i det hele tatt hvis din rutenett spenner over hele siden! Hvis du trenger tilpasset stoppunkter, skjønt, så Renne Rutenettet kan du enkelt tilpasse dem som så:

// Verbose tilpasset stoppunkter
@inkluderer rutenett($kolonner: 7, $gutter: 20 piksler, $stoppunkter: (
4 : 960px, // I 960px eller under, vil det være 4 kolonner
2 : (max, 600px), // Du kan bruke mq-scss syntaks her også
1 : 480px,
));

// Kort versjon
@inkluderer rutenett(7, 20 piksler, (
4 : 960px,
2 : 600px,
1 : 480px,
));

Som du kanskje har lagt merke til i eksempel Renne Grid støtter også de samme mediene spørring syntaks at denne tingen kalt m-scss bruker. Hvis du lurer på hva det er, vel, det er en Sass mixin at jeg opprettet som gjør skriving og administrere media spørsmål om en million ganger lettere. Ved hjelp av mq-scss uttalelser til å diktere kolonne count gir mulighet for svært fine kontroll over når kolonnen count endringer.

Legge til skygger til grid celler

Siden vi arbeider med skygger nå skal jeg ta boksen skyggen av for eksempel bildet. Våre startstreken ser slik ut nå:

En grunnleggende 3 x 2 rutenett med hull og en grønn ramme rundt utsiden

Hvis vi prøver å legge til en ytre box-shadow til hver celle i rutenettet akkurat nå… vel, det ser ikke så bra:

Legge til skygger til grid celler får skyggene til å være ute av stilling

La oss fikse det.

Trinn 1: Nye HTML

For å lage fine skygger, må vi legge til en ekstra div inne i hver celle i rutenettet. Du kan ikke egentlig bruke ::før eller ::etter for dette, siden de er i stand til å inneholde HTML-innhold innsiden av dem.

<div class=”grid-wrapper”>
<div class=”grid”>

<div class=”grid-celle”>
<div class=”grid-celle-indre”></div>
</div>

<div class=”grid-celle”>
<div class=”grid-celle-indre”></div>
</div>

<div class=”grid-celle”>
<div class=”grid-celle-indre”></div>
</div>

<div class=”grid-celle”>
<div class=”grid-celle-indre”></div>
</div>

<div class=”grid-celle”>
<div class=”grid-celle-indre”></div>
</div>

<div class=”grid-celle”>
<div class=”grid-celle-indre”></div>
</div>

</div>
</div>
Trinn 2: Flex det

Nå må vi gjøre hver celle i rutenettet en flex-container. Dette vil tillate den indre delen av celle i rutenettet for å ta opp i full høyde av sine foreldre. Vi vil også behovet for å sette den indre element til en bredde på 100%. Dette sikrer at det kan ta opp full dimensjoner av sine foreldre, både horisontalt og vertikalt:

.grid-celle {
/* Styrker indre til å ta opp full celle i rutenettet høyde */
skjerm: flex;
}

.grid-celle-indre {
/* Styrker indre til å ta opp full celle i rutenettet bredde */
bredde: 100%;
}

La oss se hva vi får hvis vi prøver å legge til boksen skygger til den indre elementer:

.grid-celle-indre {
box-shadow: 0 0 10px 3px blå;
}

Boksen skygger vises rundt grid celler, men er å få kuttet av

Det er mye hyggeligere, men det er fortsatt ikke helt der ennå. Skjult overløp som vi bruker til å hindre Chrome feilen er å komme i veien.

Trinn 3: Hacky polstring

Så, vi må tillate overløp, men likevel vil unngå denne Chrome feil. Den eneste andre trygge måten jeg har funnet for å gjøre det på er med polstring. Ved å legge til 1px polstring til toppen og bunnen av den ytre rutenett wrapper element, det vil fikse bug i Chrome.

.grid-wrapper {
/* Hindrer odd margin oppførsel i Chrome */
padding: 1px 0;
}

Dette kommer på bekostning av å ha en ekstra 1px plass på toppen og bunnen av nettet. Bildet nedenfor viser hvordan dette ender opp med å se. Skyggene har blitt lettet for å vise 1px gap mer tydelig.

1px av fyllet på toppen og bunnen av nettet

Merk: Du kan unngå 1px av topp polstring ved å velge ikke å inkludere toppen polstring gap verdi på nettet element. Den 1px av bunnen polstring ikke kan unngås om.

En border bredde brukes til de ytre rutenett wrapper vil også fungere, så teknisk sett er jeg ikke trenger å bruke padding eksemplet ovenfor. Mesteparten av tiden, hvis vi søker en skygge til grid celler, da vi sannsynligvis ikke ønsker å se en ramme pakket rundt dem. Eksempelet ovenfor var mer å vise hvordan mindre polstring er.

Dette er hva nettet ser ut uten den ytre grensen:

3 x 2 skygge celle rutenett
2 x 3 skygge celle rutenett
1 x 6 skygge celle rutenett

Her er en Penn som viser det endelige produktet:

Se Penn Falske rutenett med skygger av Daniel Tonon (@daniel-tonon) på CodePen.

Gutter Rutenett skygger

La oss dekke hvordan du kan legge til skygger på Takrenne Grid celler. Du kan bruke den samme HTML-strukturen vi brukte i forrige eksempel.

Nå, gjelder dette SCSS til å lage en tre-kolonnen nett som har en 20 piksler gutter:

.grid {
@inkluderer rutenett(3, 20 piksler, $inners: true);
}

Denne nye $inners: true eiendom forteller Renne Rutenett at grid celler hver har et enkelt barn element som må ta opp i full høyde og bredde av sine foreldre celle i rutenettet.

I stedet for å bruke overflow: hidden, bruk 1px av bunnen polstring på wrapper element.

.grid-wrapper {
padding-bottom: 1px;
}

Gutter Grid vil du ikke få en topp ytre renne hvis det ikke trenger å. Dette bidrar til å unngå problemer rundt Chrome negativ margin for feil. Tross alt, hvis det ikke er noen topp ytre renne for å gjøre en feil negativ margin, så er det ikke feil å bekymre deg. Bunnen ytre gutter er fortsatt et problem, selv om, og det er derfor vi trenger 1px av bunnen polstring. Dette 1px av bunnen polstring har en tendens til å være knapt merkbar (hvis i det hele tatt), så du trenger ikke bekymre deg om det for mye.

Nå, legg inn din skygger og du har fått deg en Renne Rutenett med skygge celler!

.grid-celle-indre {
box-shadow: 0 0 10px 3px blå;
}

3 x 2 skygge celle rutenett

Jeg har bare skrapet overflaten av hva Renne Rutenettet kan gjøre i denne artikkelen. Sørg for å lese den fullstendige dokumentasjonen for å lære hva annet det er i stand til.

Vi kommer til slutten av vår DVS. rutenett eventyr

Jeg håper du har hatt denne steg inn i verden av IE og CSS rutenett. Sørg for å lese gjennom del 1 og Del 2 hvis du ikke allerede har gjort det. Etter å ha lest alle tre artikler, vil du nå bli fullt utstyrt for å gjøre noen virkelig fantastisk layout som ser like bra ut i IE som de gjør i moderne nettlesere.

Hvis du noen gang ser noen klager over ikke å være i stand til å bruke CSS rutenett på grunn av IE, vet du hva du skal gjøre. Lekent slenger dem på hodet for å være så dum og sende dem her for å få sannheten.

Nå går videre, mine venner, og bygge noen nett! 😃🎉

Artikkel-Serien:

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