Webbläsarkompatibilitet och caniuse.com
Kontrollera funktionsstöd i olika webbläsare på caniuse.com, förstå leverantörsprefix och använd polyfills eller reservlösningar vid behov.
Webbläsarkompatibilitet och caniuse.com är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Varför är kompatibilitet viktigt?
Olika webbläsare implementerar webbstandarder i olika takt. En CSS-egenskap eller ett JavaScript-API som finns i Chrome 130 kanske inte finns i en äldre version av Safari eller Firefox. Genom att testa och planera för kompatibilitet undviker Ni att användarna får en trasig upplevelse.
caniuse.com – Er kompatibilitetsreferens
Gå till caniuse.com och skriv in valfri CSS-egenskap, JavaScript-API eller HTML-attribut. Ni får se en färgkodad supporttabell för alla större webbläsare och deras senaste versioner, tillsammans med användningsstatistik och kommentarer om partiellt stöd.
Läs caniuse-tabellen
Grönt = stöds. Gult = partiellt stöd. Rött = stöds inte. Grått = okänt. Kontrollera den globala användningsprocenten högst upp – om minst 97 % av användarna har stöd för funktionen kan Ni vanligtvis använda den utan en reservlösning.
browser-compat-data och MDN
MDN Web Docs-sidor innehåller en kompatibilitetstabell för webbläsare längst ned på varje sida med API-referenser. Den använder samma data som caniuse och uppdateras ofta av webbläsarleverantörerna själva.
Baseline-initiativet
Initiativet Baseline (web.dev/baseline) markerar funktioner som Newly Available eller Widely Available baserat på deras stöd i Chrome, Edge, Firefox och Safari. En Widely Available-funktion är säker att använda utan polyfills.
Polyfills
En polyfill är JavaScript-kod som implementerar ett nyare API i äldre webbläsare. Populära källor är polyfill.io (levererar endast nödvändiga polyfills), core-js (omfattande JavaScript-polyfills) och Babel helpers.
// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>@supports — Feature queries i CSS
@supports låter er skriva CSS som endast tillämpas när en egenskap stöds. Det ger reservlösningar i CSS, på liknande sätt som media queries ger responsiva åsidosättningar.
/* Fallback for all browsers */
.grid {
display: flex;
flex-wrap: wrap;
}
/* Enhancement for browsers that support grid */
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}Leverantörsprefix (äldre)
Äldre CSS-funktioner behövde leverantörsprefix: -webkit-, -moz-, -ms-. Dessa är numera för det mesta föråldrade — moderna webbläsare använder standardegenskaper utan prefix. Autoprefixer (ett PostCSS-plugin) lägger till dem automatiskt om de fortfarande behövs.
Transpilering med Babel
Babel kompilerar modern JavaScript (ES2022+) till ES5, som äldre webbläsare kan köra. Vite och webpack integrerar Babel via plugins. Konfigurera målwebbläsarna i browserslist i package.json.
// package.json
"browserslist": [
"last 2 versions",
"not dead",
"> 0.5%"
]Testning i riktiga webbläsare
Enhetsemulering i DevTools ersätter inte testning i riktiga webbläsare. Använd BrowserStack, Sauce Labs eller den faktiska Safari-webbläsaren (kräver macOS eller iOS) för verklig validering över flera webbläsare.
Landskapet med evergreen-webbläsare
Chrome, Edge, Firefox och Safari uppdateras alla automatiskt. Den långa svansen av föråldrade webbläsare blir kortare för varje år. För de flesta konsumentprodukter räcker det att rikta in sig på de två senaste huvudversionerna av varje webbläsare för att täcka mer än 95 % av användarna.
Snabb kontroll
Vad visar en grön cell i supporttabellen på caniuse.com?
Sammanfattning: webbläsarkompatibilitet
Kontrollera caniuse.com innan nya API:er används. Läs kompatibilitetstabellerna på MDN. Välj rimliga webbläsaruppsättningar med browserslist. Använd @supports för CSS feature queries. Använd endast nödvändiga polyfills. Transpilera modern JS med Babel. Testa kritiska funktioner i riktiga webbläsare.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Webbläsarkompatibilitet och caniuse.com” gratis?
Ja – hela texten till ”Webbläsarkompatibilitet och caniuse.com” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Webbläsarkompatibilitet och caniuse.com”?
Kontrollera funktionsstöd i olika webbläsare på caniuse.com, förstå leverantörsprefix och använd polyfills eller reservlösningar vid behov. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Webbläsarkompatibilitet och caniuse.com”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Chrome DevTools: Elements, Console och Network
- VSCode: tillägg, Emmet och kortkommandon
- Konfigurera Prettier och ESLint
- Webbläsarkompatibilitet och caniuse.com