JarCastingpolyfill - JavaScript and Web Polyfills
This is a collection of polyfills covering web platform features, from those defined as part of the ECMAScript standard to new web browser functionality. Most are for features shipping in major browsers. A few are experimental and called out as such, subject to change at any time.
My philosophy is that it's better to write future-looking code that takes advantage of new Web platform APIs where possible, and fill in the gaps with polyfills. There is no effort to produce 100% compliant behavior, or to completely hide differences in browser behavior.
I use these in various pages on my sites; most are by me, or I have at least tweaked them. A more comprehensive list of polyfills can be found at The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks by Paul Irish.
Getting the Code
You're already here! Great, just download it, or use:
git: git clone https://github.com/inexorabletash/polyfill.git
bower: bower install js-polyfills
npm: npm install js-polyfills
It is not packaged as Node.js module(s); there's nothing to
require(), this is just for distribution.
Or just include scripts directly in your page via CDN (c/o RawGit):
<script src="https://cdn.rawgit.com/inexorabletash/polyfill/$TAGNAME/polyfill.min.js"></script>
(look at Releases for the tag name, e.g. "v1.2.3")
Files
The polyfills are roughly split up into files matching 1:1 with Web standards (specifications, living standards documents, etc). So there is html.js for HTML, dom.js for DOM, etc.
Since I generally use several in my hobby projects, bundled/minified versions are available:
- web.js (minified: web.min.js) includes the most common Web polyfills - it assumes ES2015 support
- polyfill.js (minified: polyfill.min.js) has everything in web.js plus es5.js and es6.js and es2016.js and es2017.js
Minification is done via https://github.com/mishoo/UglifyJS2
Some of the files use
console.assert()calls to catch bugs during development. These are automatically removed from the included minified versions. If you use your own minifying processor it may cause to assertions to appear when unnecessary function names are stripped. You can safely remove these lines as part of a build step (e.g. usinggrep -V), or use a minifier that does this automatically. For UglifyJS2 the option is:drop_console
ECMAScript / JavaScript Polyfills
ECMAScript 5 - Previous standard, supported by browsers circa 2012..
ECMAScript 2015 - Previous standard, supported by browsers circa 2016.
ECMAScript 2016 - Previous standard, supported by browsers circa 2017.
ECMAScript 2017 - Most recent standard. Implementation in progress or complete in latest browsers.
ECMAScript proposed - Proposals for future editions of the standard. Here there be dragons.
JavaScript 1.X String Extras - ref
- String prototype:
trimLeft,trimRight,quote
HTML
script - tests - living standard
document.head(for IE8-)- 'shiv' of newer HTML elements (
section,aside, etc), to fix parsing (for IE8-) datasetanddata-*attributes spec (for IE8+, not available in IE7-)str = element.dataset[key]- yields undefined if data-key attribute not presentelement.dataset[key] = str- fails unless data-key attribute already present
- Base64 utility methods (for IE9-)
encodedString = window.btoa(binaryString)- Base64 EncodebinaryString = window.atob(encodedString)- Base64 Decode
- Animation Frames - demo page
id = window.requestAnimationFrame()window.cancelAnimationFrame(id)
DOM
script - tests - living standard
- Selectors (for IE7-) - adapted from Paul Young
element = document.querySelector(selector)elementArray = document.querySelectorAll(selector)
elem.matches(selector)(for IE, Firefox 3.6, early Webkit and Opera 15.0)elementArray = document.getElementsByClassName(classNames)(for IE8-)e = element.nextElementSibling,e = element.previousElementSibling(for IE8)- Node constants:
Node.ELEMENT_NODE, etc (for IE8-) - DOMException constants:
DOMException.INDEX_SIZE_ERR(for IE8-) - Events (for IE8)
- Where
EventTargetiswindow,document, or any element:EventTarget.addEventListener(event, handler)- for IE8+EventTarget.removeEventListener(event, handler)- for IE8+
- Event:
target,currentTarget,eventPhase,bubbles,cancelable,timeStamp,defaultPrevented,stopPropagation(),cancelBubble()
- Where
- Non-standard Event helpers for IE7- - adapted from
- Custom Events
- QuirksMode
window.addEvent(EventTarget, event, handler)window.removeEvent(EventTarget, event, handler)
- DOMTokenList -
classListspec,relListspec- DOMTokenList:
length,item(index),contains(token),add(token),remove(token),toggle(token) tokenList = elem.classList- for IE8+tokenList = elem.relList- for IE8+- Non-standard helpers for IE7-:
tokenList = window.getClassList(element)tokenList = window.getRelList(element)
- DOMTokenList:
- ParentNode:
node.prepend(nodes...),node.append(nodes...) - ChildNode:
node.before(nodes...),node.after(nodes...),node.replaceWith(nodes...),node.remove()
Fetch
script - tests - living standard
Example:
fetch('http://example.com/foo.json')
.then(function(response) { return response.json(); })
.then(function(data) { console.log(data); });
Supported:
- Headers:
new Headers(),append(name, value),delete(name),get(name),getAll(name),has(name),set(name, value),[Symbol.iterator]() - Body:
arrayBuffer(),blob(),formData(),json(),text()- but conversions are limited - Request:
new Request(input, init),method,headers,body,url - Response:
new Response(body, init),headers,url,status,statusText,body fetch(input, init)
XMLHttpRequest
script - tests - living standard
XMLHttpRequest(for IE6-)FormData(for IE9-)
CSS OM
Polyfill for width and height in getBoundingClientRect() in IE8-
URL API
script - tests - living standard
var url = new URL(url, base);
var value = url.searchParams.get(name);
var valueArray = url.searchParams.getAll(name);
url.searchParams.append(name, valueOrValues);
url.searchParams.delete(name);
var p = new URLSearchParams('a=1&b=2');
- URL:
href,origin,protocol,username,password,host,hostname,port,pathname,search,searchParams,hash - URLSearchParams:
append(name, value),delete(name),get(name),getAll(name),has(name),set(name, value),entries(),keys(),values(),forEach(callback)and[Symbol.iterator]()(if defined)
Uncommon Polyfills
The following are of limited use and are not included in the web.js / polyfill.js bundled versions.
Timing
- Efficient Script Yielding
id = setImmediate(callback, args...)clearImmediate(id)
Keyboard Events
script - demo page - draft spec (also)
KeyboardEvent: code, key, location, KeyboardEvent.queryKeyCap(code)
IE7- only: Call window.identifyKey(keyboardEvent); in keydown/keyup handlers before accessing above properties.
Geolocation API
script - demo page - spec - uses freegeoip.net
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);
navigator.geolocation.clearWatch(watchId);