JavaScript Polyfills, Shims and More
JavaScript HTML
Clone or download
Latest commit cefa69e Mar 3, 2018
Permalink
Failed to load latest commit information.
demos Update spec names in keyboard demo Dec 14, 2016
experimental IE8: Don't infinite-loop in HasProperty check Mar 2, 2018
obsolete Upgrade QUnit to 2.1.1 Feb 5, 2017
tests test fix for IE8 Mar 2, 2018
.gitignore Remove old publishing cruft May 8, 2013
LICENSE-MIT.md - License: Add MIT license, reference it from main license file and `… Jun 14, 2018
LICENSE.md - License: Add MIT license, reference it from main license file and `… Jun 14, 2018
README.md Advance ECMAScript 2017 additions to es2017.js script Nov 5, 2017
bower.json 0.1.42 Jun 14, 2018
cssom.js 'use strict' for most scripts Jul 24, 2017
dom.js 'use strict' for most scripts Jul 24, 2017
es2016.js Use assert that is removed by minification. Resolves #112 Dec 15, 2016
es2016.md Add ECMAScript 2016 file, include in polyfill.js Oct 3, 2016
es2017.js Advance ECMAScript 2017 additions to es2017.js script Nov 5, 2017
es2017.md Advance ECMAScript 2017 additions to es2017.js script Nov 5, 2017
es5.js Handle bind() called on function without prototype Sep 11, 2016
es5.md https-ify links Oct 29, 2015
es6.js IE8: Don't infinite-loop in HasProperty check Mar 2, 2018
es6.md More ES6 -> ES2015 renaming Mar 30, 2016
fetch.js Fix byteCaseInsensitiveMatch function bug (#133) Sep 2, 2017
geo.js https-ify links Oct 29, 2015
html.js 'use strict' for most scripts Jul 24, 2017
index.html Add redirect to source Jan 29, 2014
js.js 'use strict' for most scripts Jul 24, 2017
keyboard.js Keyboard: Work in strict mode. Resolves #131 Jun 14, 2017
keyboard.md Update keyboard.md Apr 14, 2016
package.json 0.1.42 Jun 14, 2018
polyfill.js IE8: Don't infinite-loop in HasProperty check Mar 2, 2018
polyfill.js.md Advance ECMAScript 2017 additions to es2017.js script Nov 5, 2017
polyfill.min.js IE8: Don't infinite-loop in HasProperty check Mar 2, 2018
timing.js Yank setImmediate out of gestalt polyfills Oct 5, 2016
typedarray.js ES6 fix for IE9 and sorting fix in polyfill; resolves #137 Oct 22, 2017
url.js Use preferred JS detection for Opera Mini Oct 27, 2017
web.js Use preferred JS detection for Opera Mini Oct 27, 2017
web.js.md More ES6 -> ES2015 renaming Mar 30, 2016
web.min.js Use preferred JS detection for Opera Mini Oct 27, 2017
xhr.js 'use strict' for most scripts Jul 24, 2017

README.md

polyfill - 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:

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. using grep -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-)
  • dataset and data-* attributes spec (for IE8+, not available in IE7-)
    • str = element.dataset[key] - yields undefined if data-key attribute not present
    • element.dataset[key] = str - fails unless data-key attribute already present
  • Base64 utility methods (for IE9-)
    • encodedString = window.btoa(binaryString) - Base64 Encode
    • binaryString = 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 EventTarget is window, 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()
  • 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)
  • 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

CSS OM

script - spec

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

script

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.

more details

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);

Obsolete

Obsolete and Unmaintained Polyfills