For at bruge CSS Grid med fallback begynder vi med grundlæggende CSS som virker i alle browsere, og tilføjer derefter styling som kun virker i nyere browsere.
Progressive Enhancement
Ideen bag progressive enhancement er at et website ikke nødvendigvis skal se ens ud, men det skal virke i alle browsere.
Progressive enhancement er en mulighed for at bruge de nyeste webteknologier – ved at bygge websitet lag for lag, så indholdet er tilgængeligt og alle funktioner virker. Når det er på plads kan websitet forbedres med nye teknikker, så indholdet bliver præsenteret bedst muligt, uanset hvilken computer/device, hvilket styresystem, hvilken browser og browserversion det vises i.
Progressive enhancement er oplagt, når man arbejder med html og CSS, fordi ‘fejl’ i koden ikke får websitet til at crashe, men istedet ignoreres (i modsætning til f.eks. javascript og php).
Lag-på-lag
Hvor mange lag der er brug for, afhænger af hvor mange og hvor gamle browser(-versioner) man vil understøtte.
Eks.: Første lag CSS består af de regler, der skal til for at vise vores indhold korrekt med display:table; og float:left;
Andet lag CSS består af flexbox-regler.
Tredje lag består af CSS Grid-regler, som ikke virker i Internet Explorer.
Undgå såvidt muligt at skrive regler, der senere skal overskrives – men hvis det ikke kan undgås, så brug @supports-query, som er et nyere CSS feature query.
@supports
Når man laver fallback-styling til browsere, der ikke understøtter grid, f.eks. ved at bruge floats eller flexbox, skal man bruge padding/margin til at skabe luft mellem kolonnerne – det er overflødigt når man bruger grid (hvor grid-gap sørger for mellemrum mellem grid-elementerne).
For at undgå alt for store grid-gaps, nulstiller vi padding og margin:
@supports (display: grid) {
.grid-item {
... tilføj regler som kun gælder hvis CSS Grid understøttes ...
}
}
@supports feature query checker om browseren understøtter CSS Grid, og hvis den gør, så tilføjes de ekstra regler – f.eks. for at fjerne margin/padding og tilføje supplerende regler.
Muligheden for at målrette css-regler så de kun gælder browsere der understøtter bestemte features kan bruges til mange flere ting; CSS blending, initial-letter, object-fit.
Man kan kombinere flere feature queries, og skal blot undgå den situation hvor browseren understøtter en bestemt feature, men ikke understøtter @supports. Det kan anbefales at læse artiklen Using Feature Queries in CSS, se link nedenfor.