# Kaj so polyfills?

**Polyfills** so komponente kode, ki omogočajo uporabo novejših spletnih funkcij v brskalnikih, ki teh funkcij ne podpirajo. V tem članku je pojasnjeno, kaj so te praktične **komponente kode** in kako jih lahko uporabljate.

## Kaj so polyfills in v katerih jezikih se lahko pišejo?

Polyfill, včasih imenovan tudi Polyfiller, je blok kode različne kompleksnosti, ki omogoča uporabo sodobnih funkcij HTML, CSS ali JavaScript v starejših brskalnikih, ki jih ne podpirajo. Večina polyfillov je napisana v JavaScriptu, vendar lahko kot osnova za filler skripte služijo tudi drugi spletni programski jeziki. Nekatere od najpomembnejših funkcij, ki jih polyfilli omogočajo v različnih spletnih brskalnikih, so HTML5 komponente, kot so bitmapni elementi platna za grafike, grafe in animacije.

Note Izraz »polyfill« izhaja iz imena priljubljene britanske blagovne znamke Polyfilla, ki proizvaja polnila za obnovitvena in restavratorska dela. Spletni razvijalec Remy Sharp je videl ustrezno primerjavo med **polnilom** in temi uporabnimi **zaobitnimi kodami**, saj je namen obeh zapolniti vrzeli. Pri slednjih so vrzeli, ki jih je treba zapolniti, vrzeli v funkcionalnosti brskalnika. Koncept je bil skovan v Sharpovi knjigi ***Introducing HTML5*** iz leta 2009, ki jo je napisal v soavtorstvu z Brucem Lawsonom. Polyfill se je nato uveljavil kot uradno poimenovanje za takšne kodne komponente.

## Katere vrste polyfillov obstajajo?

Dejstvo, da je izraz polyfill tesno povezan z **HTML5**, ni naključje. S svojimi naprednimi funkcijami, ki so med drugim naredile flash videe *za zastarele*, je peta različica hipertekstnega označevalnega jezika postala stalna značilnost spleta. Vendar pa se **podpora za HTML5 v brskalnikih** razvija precej počasi. Poleg polyfillov, ustvarjenih za HTML5 elemente, se **polyfill kodni bloki** uporabljajo tudi za integracijo naslednjih spletnih elementov:

- **SVG grafika**: format SVG SVG (**Scalable** **Vector** **Graphics**), ki ga je konzorcij W3C leta 2001 začel priporočati kot standardni format za vektorsko grafiko, je najprej pridobil popularnost z HTML5. Ker pa mnogi brskalniki še ne podpirajo tega formata, obstajajo SVG polyfills, kot je [svgweb](https://code.google.com/archive/p/svgweb/ "Google Code Archive: svgweb polyfill").
- **ECMAScript**: ECMAScript je standardizirano jedro JavaScript in se redno posodablja, da se razširi funkcionalnost jezika. Funkcije, kot so Promise objekti ali Symbol funkcije, so na voljo v starejših brskalnikih prek polyfillov, kot je standardna knjižnica JavaScript [core-js](https://github.com/zloirock/core-js "JavaScript library core-js GitHub site").
- **Spletno shranjevanje**: alternative piškotkom, kot so **lokalno shranjevanje** (dolgoročno shranjevanje na strani odjemalca) in **shranjevanje sej** (shranjevanje, omejeno na trenutno sejo), skupaj znane kot spletno shranjevanje ali DOM Storage, niso podprte v vseh različicah brskalnikov. Polnilo [webstorage-polyfill](https://github.com/Macil/webstorage-polyfill "webstorage-polyfill on github.com") z licenco MIT je znana rešitev za to težavo.
- **Cross-Origin Resource Sharing (CORS)**: CORS omogoča spletnim aplikacijam dostop do spletnih virov, ki se nahajajo zunaj lastnega strežnika. Mnogi starejši brskalniki te izmenjave podatkov ne podpirajo. JavaScript paket [XDomain](https://github.com/jpillora/xdomain "github.com: XDomain") in CORS polyfill [XHook](https://github.com/jpillora/xhook "GitHub index of CORS XHook polyfill") lahko pomagata rešiti to težavo.
- **CSS (Cascading Style Sheets)**: CSS je že leta eno najpomembnejših orodij za oblikovanje vizualne postavitve spletnih strani. Sčasoma so se stilne predloge postale bolj vsestranske, zaradi česar so polyfilli postali priljubljeni za povezovanje s starejšimi brskalniki. Eno najbolj znanih orodij je [css-polyfills.js](https://philschatz.com/css-polyfills.js/ "css-polyfills.js on philschatz.com").
- **Geolokacija**: dolgo časa brskalniki niso podpirali API-ja za geolokacijo (ki se uporablja za prenos lokacije uporabnika) in ga je bilo mogoče uporabljati le s pomočjo dodatnega vtičnika za brskalnik. S polyfillom lahko to funkcionalnost ponudite uporabnikom s starejšimi različicami brskalnikov, ki API-ja ne podpirajo.

Note Da bi poenostavili in optimizirali uporabo polyfillov, storitve, kot je projekt Polyfill.io, za dostavo skriptov uporabljajo omrežja za dostavo vsebin (CDN). Vendar pa so se v začetku leta 2024 pojavile znatne težave z **razširjanjem zlonamerne programske opreme prek omrežij CDN, ki jih uporablja Polyfill.io**. Če uporabljate to storitev, morate s svoje spletne strani odstraniti ves kod, ki ga imate iz projekta Polyfill.io.

## Kako se uporabljajo polyfilli? (Vključeni primeri kode)

JavaScript kodo polyfill ali skripte polyfill lahko neposredno vstavite v HTML dokument spletne strani. Ti **se brezhibno integrirajo v obstoječo izvorno kodo** in se izvedejo le, če brskalnik ne podpira določene spletne funkcije. To se običajno opravi z uporabo `if` JavaScript, ki preverita, ali podpora manjka. Pomanjkanje podpore se nato lahko spremeni v pogoj za aktiviranje skripta. V naslednjih dveh primerih bomo ponazorili, kako to izvesti, in vam pokazali, kako izgleda **splošna struktura polyfilla**.

### Primer 1: Polyfill za metodo JavaScript `startsWith()`

```javascript
if (!String.prototype.startsWith) {
    String.prototype.startsWith = function (searchString, position) {
        position = position || 0;
        return this.indexOf(searchString, position) === position;
    };
}
```

Ta majhen odlomek JavaScript omogoča brskalniku, ki ga pokliče, da uporabi metodo `startsWith()`, tudi če je ne podpira vgrajeno. Ta metoda, ki je del specifikacije ECMAScript 6, preveri, ali **se niz začne z znakom ali nizom znakov drugega niza**. Če se, vrne »true«, sicer pa vrne »false«. Bolj zapleteno, optimizirano različico za integracijo `startsWith()` lahko najdete na [strani GitHub razvijalca Mathiasa Bynensa](https://github.com/mathiasbynens/String.prototype.startsWith "GitHub page: mathiasbynens").

Note Tukaj predstavljeni kod ne bo deloval, če spletni odjemalec blokira JavaScript ali ima v nastavitvah onemogočen skriptni jezik.

### Primer 2: Polnilo za spletno shranjevanje

Ta JavaScript polyfill je preprosta rešitev za kodiranje, ki omogoča lokalno shranjevanje in shranjevanje sej v starejših modelih brskalnikov.

```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');
    })();
}
```

Zgornja koda je **izraz** **takojšnje** **izvedbe** **funkcije**(IIFE). Preden jo brskalnik naloži, pa ukaz `if` v prvi vrstici kode preveri, ali stranka izvorno podpira tehnologije spletnega shranjevanja. Če jih podpira, bo izjava `if` vrnila vrednost false, ker so tipi za lokalno in sejno shranjevanje že definirani. To povzroči, da se polyfill zavrže.


This is a markdown version of: [https://www.ionos.com/sl-si/digitalguide/spletne-strani/razvoj-spletnih-strani/polyfill/](https://www.ionos.com/sl-si/digitalguide/spletne-strani/razvoj-spletnih-strani/polyfill/) for AI/LLM consumption.