Progressiv forbedring med CSS Grid

CSS Grid (Grid) har været ude i nogen tid nu med fuld support i store moderne browsere. Jeg overlader andre at undersøge, hvorfor den er så stor, og hvilke nye designmuligheder det gør så let at udforske. Hvis du har været på udkig efter den bedste måde at støtte responsive webdesign, har jeg endnu ikke set nogen, der ikke elsker Grid. Det er nemt at bruge, men alligevel ekstremt kraftfuld og fleksibel.

Men jeg hører dig sige, at mange af vores brugere ikke bruger de mest opdaterede browserversioner, eller de findes på markeder, hvor Chrome / Firefox ikke har en majoritetsandel. Og er det virkelig værd at skrive om vores gamle kode igen?

Jeg følte det på samme måde, indtil jeg hørte en god tale holdt af Natalya Shelburne. Hun beskrev, hvordan hun begyndte at bruge CSS Grid sammen med Bootstrap uden at miste support til ældre browsere ved at forbedre og ikke slette gamle CSS.

Rachel Andrew af Laura Kishimoto hos ScotlandCSS

Det er vigtigt, at dette er uden brug af JavaScript-polyfylder, men ved hjælp af ren CSS. Som Rachel Andrew nævner:

Som vi allerede ved, er de browsere, der ikke understøtter gitter, ældre, langsommere browsere eller browsere, der oftest findes på enheder med lavere strøm på nye markeder. Hvorfor vil du tvinge en masse JavaScript på disse enheder?

Natalya beskriver, hvordan "funktionsforespørgsler" kan bruges til at implementere Grid i browsere, der understøtter det, uden at miste eksisterende funktionalitet. MDN refererer til dette som "progressiv forbedring" og siger, at:

Det er værd at bemærke, at du ikke behøver at bruge gitter på en alt eller intet måde. Du kan starte med blot at forbedre elementer i dit design med gitter, som ellers kunne vises ved hjælp af en ældre metode.

Brug af gitter

Så hvordan skal vi gøre dette?

I et tidligere indlæg beskrev jeg en enkel tilgang til at "holde din sidefod, hvor den hører hjemme." Dette undgår de problemer, der ses, når en sides hovedindhold er for lille til at skubbe en sidefod til bunden af ​​siden.

Fra

Dette giver en chance for at vise, hvordan en funktionsforespørgsel kan bruges til at gå til at bruge Grid.

Det er vigtigt at bemærke, at dette er et eksempel på, hvordan du kan gå over til at bruge Grid i en eksisterende codebase, ikke hvorfor det er et magtfuldt værktøj. Dette eksempel bruges, fordi det er lille - så det er muligt at forstå, hvordan uden forstyrrelser findes i en større kodebase.

Realistisk giver Grid ingen store forbedringer her. Fordelene ved at bruge et nyt værktøj skal diskuteres snarere end bare at implementere det, fordi det er cool!

Eksemplet er nedenfor. Mere forklaring på koden er her.

index.html:


 
   
 

 
   
             
 

main.css:

# side-container {
  position: relativ;
  min. højde: 100vh;
}
# indholdsindpakning {
  polstring-bund: 2,5rem; / * Sidefodshøjde * /
}
#footer {
  position: absolut;
  bund: 0;
  bredde: 100%;
  højde: 2,5rem; / * Sidefodshøjde * /
}

Der er to hoveddele til at tilføje Grid:

  • tilføje de nødvendige nye gitteregenskaber
  • tilsidesættelse af egenskaber, der ikke længere er nødvendige.

main.css kan udvides til at tilføje:

@supports (display: gitter) {
    # side-container {
        position: statisk; // tilsidesætte
        display: gitter; // nyt
        gitter-template-rækker: 1fr auto; // nyt
        gitter-skabelonkolonner: 100%; // nyt
    }
    
    # indholdsindpakning {
        polstring-bund: 0; // tilsidesætte
    }
    #footer {
        position: statisk; // tilsidesætte
        højde: auto; // tilsidesætte
    }
}

position er sat tilbage til sin standard for statisk, og polstring og højde nulstilles til værdier, der ikke forstyrrer det nye layout.

min-højde: Der refereres ikke til 100vh. Det bruges også af Grid, så det behøver ikke at blive ændret.

Tre nye, relaterede gitteregenskaber tilføjes. Brug af en enkelt fraktionsenhed 1fr sikrer, at det første underordnede element i sidebeholder (i dette tilfælde indholdsindpakning) vil udfylde al den resterende plads, som den automatiske højde på den anden underordnede sidefod ikke optager.

Og det er alt, hvad der er til det! Nu bruger browsere, der understøtter Grid, koden i funktionsforespørgslen, mens de stadig understøtter browsere, der ikke gør det. Dette tillader endda enkeltkomponenter at tilføje Grid én ad gangen - et team kan se, hvor ligefrem processen er uden en enorm tidsinvestering.

Forhåbentlig illustrerer dette den trinvise tilgang, der kan bruges til at bruge Grid.

Mere kompleks anvendelse

Kraften ved, hvad Grid tilbyder, ses bedst i de mere komplekse eksempler skrevet af Natalya, der inspirerede denne opdateringsartikel. Dette viser kraften i, hvad Grid kan tilbyde, når det bruges i større skala.

Hurtige tip

Fallback-koden kan testes uden adgang til en ældre browser eller emulator. Skift @ understøttende (display: gitter) midlertidigt til en ikke-eksisterende værdi, for eksempel gridNO, så tilbagekoblingskoden bruges.

Firefox leverer nogle gode værktøjer, som Chrome i øjeblikket ikke gør. Dette er “Grid Display Settings” aktiveret under fanen “Inspector”. Disse indstillinger hjælper med til visuelt at illustrere, hvordan Grid udføres, hvilket er fantastisk til komplekse layout.

Firefox dev værktøjer under Inspector

Til sidst blev jeg inspireret af en erklæring fra Rachel Andrew:

Det skal ikke se ens ud i alle browsere, det skal være en god oplevelse i alle browsere.

Standard for mange virksomheder er at stræbe efter en duplikatoplevelse i enhver browser. Men er det værd at overveje, at på en ældre, langsommere browsere kan en enklere tilgang faktisk være en bedre oplevelse?

Tak for at have læst Jeg håber, at dette hjælper dig med at inspirere dig til at prøve at bruge Grid ikke kun i greenfield-projekter, men også sammen med alt, hvad du måtte bruge i dag!

Ressourcer

  • Fra Bootstrap til CSS Grid
  • At holde sidefoden i bunden med CSS-Grid
  • En komplet guide til gitter
  • CSS Grid Layout og progressiv forbedring
  • Brug af CSS Grid: Understøttelse af browsere uden gitter

Her er et par andre ting, jeg har skrevet for nylig:

  • Brug af Pa11y CI og Drone som tilgængelighedstestning af gatekeepers
  • Spottende HTTP-anmodninger med Nock