# Hva er polyfills? **Polyfills** er kodekomponenter som gjør nyere nettfunksjoner brukbare i nettlesere som ikke har innebygd støtte for slike funksjoner. Denne artikkelen forklarer hva disse praktiske **kodekomponentene** er og hvordan du kan bruke dem. ## Hva er polyfills, og hvilke språk kan de skrives på? En polyfill, noen ganger referert til som en Polyfiller, er en kodeblokk av varierende kompleksitet som gjør moderne HTML-, CSS- eller JavaScript-funksjoner tilgjengelige i eldre nettlesere som ikke støtter dem innbygget. De fleste polyfills er skrevet i JavaScript, men andre webprogrammeringsspråk kan også tjene som grunnlag for fyllskript. Noen av de viktigste funksjonene som polyfills gjør tilgjengelige på tvers av forskjellige nettlesere, er HTML5-komponenter som bitmap-baserte canvas-elementer for grafikk, diagrammer og animasjoner. Note Begrepet «polyfill» stammer fra det populære britiske merket Polyfilla, som er et fyllingsmiddel for renoverings- og restaureringsarbeid. Webutvikleren Remy Sharp så en passende sammenligning mellom **fyllstoffet** og disse nyttige **omgåelseskodene**, siden formålet med begge er å fylle ut hull. Med sistnevnte er hullene som skal fylles ut, hull i nettleserens funksjonalitet. Konseptet ble skapt i Sharps bok ***Introducing HTML5*** fra 2009, som han skrev sammen med Bruce Lawson. Polyfill etablerte seg senere som den offisielle betegnelsen for slike kodekomponenter. ## Hvilke typer polyfills finnes det? Det er ingen tilfeldighet at begrepet polyfill er nært knyttet til **HTML5**. Med sine avanserte funksjoner, som blant annet har gjort flash-videoer *overflødige*, har den femte versjonen av hypertekstmarkeringsspråket blitt en fast del av nettet. **Støtten for HTML5 i nettlesere** har imidlertid utviklet seg ganske sakte. I tillegg til polyfills laget for HTML5-elementer, brukes **polyfill-kodeblokker** også til å integrere følgende webelementer: - **SVG-grafikk**: SVG-formatet SVG (**Scalable** **Vector** **Graphics**), som W3C-konsortiet begynte å anbefale som standardformat for vektorgrafikk i 2001, fikk først fotfeste med HTML5. Men fordi mange nettlesere ennå ikke støtter dette formatet, finnes det SVG-polyfills som [svgweb](https://code.google.com/archive/p/svgweb/ "Google Code Archive: svgweb polyfill"). - **ECMAScript**: ECMAScript er den standardiserte kjernen i JavaScript og oppdateres jevnlig for å utvide språkets funksjonalitet. Funksjoner som Promise-objekter eller Symbol-funksjoner gjøres tilgjengelige i eldre nettlesere gjennom polyfills som JavaScript-standardbiblioteket [core-js](https://github.com/zloirock/core-js "JavaScript library core-js GitHub site"). - **Weblagring**: Alternativer til informasjonskapsler som **lokal lagring** (langtidslagring på klientsiden) og **sesjonslagring** (lagring begrenset til den aktuelle sesjonen), samlet kjent som web lagring eller DOM Storage, støttes ikke av alle nettleserversjoner. Den MIT-lisensierte [webstorage-polyfill](https://github.com/Macil/webstorage-polyfill "webstorage-polyfill on github.com") er en kjent løsning på dette problemet. - **Cross-Origin Resource Sharing (CORS)**: CORS gjør det mulig for webapplikasjoner å få tilgang til webressurser som ligger utenfor ens egen server. Mange eldre nettlesere støtter ikke denne datautvekslingen. JavaScript-pakken [XDomain](https://github.com/jpillora/xdomain "github.com: XDomain") og CORS-polyfill [XHook](https://github.com/jpillora/xhook "GitHub index of CORS XHook polyfill") kan bidra til å løse dette. - **CSS (Cascading Style Sheets)**: I mange år har CSS vært et av de viktigste verktøyene for å designe det visuelle oppsettet til nettsteder. Over tid har stylesheets blitt mer allsidige, noe som har gjort polyfills populære for å kommunisere med eldre nettlesere. Et av de mest kjente verktøyene er [css-polyfills.js](https://philschatz.com/css-polyfills.js/ "css-polyfills.js on philschatz.com"). - **Geolokalisering**: I lang tid ble Geolocation API (som brukes til å overføre brukerens posisjon) ikke støttet av nettlesere og kunne bare brukes med hjelp av et ekstra nettleser-plugin. Med en polyfill kan du tilby denne funksjonaliteten til brukere med eldre nettleserversjoner som ikke støtter API-et innbygget. Note For å forenkle og optimalisere bruken av polyfills bruker tjenester som Polyfill.io-prosjektet innholdsleveringsnettverk (CDN) til å levere skriptene. Imidlertid har det siden begynnelsen av 2024 vært betydelige problemer med **distribusjon av skadelig programvare gjennom CDN-ene som brukes av Polyfill.io**. Hvis du bruker denne tjenesten, bør du fjerne all kode du har fra Polyfill.io-prosjektet fra nettstedet ditt. ## Hvordan brukes polyfills? (Kodeeksempler inkludert) Du kan direkte legge inn polyfill JavaScript-kode eller polyfill-skript i HTML-dokumentet til et nettsted. Disse **integreres sømløst i den eksisterende kildekoden** og utføres bare hvis nettleseren ikke støtter den aktuelle nettfunksjonen. Dette gjøres vanligvis ved hjelp av JavaScripts `if` for å sjekke om det mangler støtte. Manglende støtte kan da gjøres om til en betingelse for å aktivere skriptet. I de to følgende eksemplene illustrerer vi hvordan dette implementeres og viser deg hvordan den **generelle strukturen til en polyfill** ser ut. ### Eksempel 1: Polyfill for JavaScript-metoden `startsWith()` ```javascript if (!String.prototype.startsWith) { String.prototype.startsWith = function (searchString, position) { position = position || 0; return this.indexOf(searchString, position) === position; }; } ``` Dette lille JavaScript-utdraget gjør det mulig for den påkallende nettleseren å bruke `startsWith()`, selv om den ikke støtter den innbygget. Denne metoden, som er en del av ECMAScript 6-spesifikasjonen, sjekker om en **streng begynner med tegnet eller tegnserien til en annen streng**. Hvis den gjør det, returnerer den «true», ellers returnerer den «false». Du finner en mer kompleks, optimalisert versjon for integrering av `startsWith()` på [GitHub-siden til utvikleren Mathias Bynens](https://github.com/mathiasbynens/String.prototype.startsWith "GitHub page: mathiasbynens"). Note Koden som presenteres her vil ikke fungere hvis nettklienten blokkerer JavaScript eller har deaktivert skriptspråket i innstillingene. ### Eksempel 2: Polyfill for nettlagring Denne JavaScript-polyfill er en enkel kodingsløsning som gjør lokal lagring og sesjonslagring tilgjengelig i eldre nettlesermodeller. ```javascript if (typeof window.localStorage === 'undefined' || typeof window.sessionStorage === 'undefined') { (function () { var data = {}; var Storage = function (type) { function setData() { // Implement the logic to set data into storage var storageData = JSON.stringify(data); document.cookie = type + '=' + storageData + ';path=/'; } function clearData() { data = {}; setData(); } return { length: 0, clear: function () { clearData(); this.length = 0; }, getItem: function (key) { return data[key] === undefined ? null : data[key]; }, key: function (i) { var ctr = 0; for (var k in data) { if (ctr == i) return k; ctr++; } return null; }, removeItem: function (key) { delete data[key]; this.length--; setData(); }, setItem: function (key, value) { data[key] = value + ''; this.length++; setData(); } }; }; // Set the local and session storage properties inside the window object if (typeof window.localStorage === 'undefined') window.localStorage = new Storage('local'); if (typeof window.sessionStorage === 'undefined') window.sessionStorage = new Storage('session'); })(); } ``` Koden ovenfor er en **umiddelbart** **påkalt** **funksjonsuttrykk**(IIFE). Før nettleseren laster den inn, sjekker imidlertid en `if` i første linje av koden om klienten støtter web-lagringsteknologiene. Hvis den gjør det, vil `if` returnere en falsk verdi, fordi typene for lokal og sesjonslagring allerede er definert. Dette resulterer i at polyfill blir forkastet. This is a markdown version of: [https://www.ionos.com/nb-no/digitalguide/nettsteder/webutvikling/polyfill/](https://www.ionos.com/nb-no/digitalguide/nettsteder/webutvikling/polyfill/) for AI/LLM consumption.