Awesome

polyfill

polyfill makes web development less frustrating by selectively polyfilling just what the browser needs. Use it on your own site, or as a service.

<script src="//polyfill.io"></script>

That’s it. The script file is the domain. No need to specify the http or https, because the service runs over both. Just place it in the head of your document.

<link href="//polyfill.io/normalize.css" rel="stylesheet">

Don’t punish Chrome for old Internet Explorer CSS deficiencies either, because Normalize.css has been ported over to deliver only the styles the browser needs.

What can I do with this?

You can code right the first time. For example, use querySelector in IE6.

var el = document.querySelector(".foo.bar");

Or matches without a vendor prefix.

el.matches(".bar");

These polyfills are clean, compressed, and aggressively cached.

What browsers are supported?

Android 2.2+, Blackberry 7+, Chrome, Opera 11.5+, Opera Mini 5+, Opera Mobile 10+, Firefox 3.6+, Internet Explorer 6+, Safari 4+, and Safari IOS 4+.

What functionality is supported?

You should be able to use the following features to a reasonable extent in every supported browser.

HTML Elements

abbr, article, aside, audio, bdi, canvas, data, datalist, details, figcaption, figure, footer, header, hgroup, main, mark, meter, nav, output, progress, section, subhead, summary, time, video

Array

• Array.isArray
• Array.prototype.every
• Array.prototype.filter
• Array.prototype.forEach
• Array.prototype.indexOf
• Array.prototype.lastIndexOf
• Array.prototype.map
• Array.prototype.reduce
• Array.prototype.reduceRight
• Array.prototype.some

Object

• Object.create
• Object.defineProperty
• Object.defineProperties
• Object.getOwnPropertyNames
• Object.getPrototypeOf
• Object.is
• Object.keys

Other

• Date.now
• Date.prototype.toISOString
• Function.prototype.bind
• String.prototype.trim

Selectors

• Element.prototype.querySelector / Element.prototype.querySelectorAll
• Element.prototype.matches / matchesSelector
• Element.prototype.getElementsByClassName

Mutations

• Element.prototype.prepend
• Element.prototype.append
• Element.prototype.before
• Element.prototype.after
• Element.prototype.remove
• Element.prototype.replace

Events

• Element.prototype.addEventListener / Element.prototype.removeEventListener / Element.prototype.dispatchEvent
• new Event / new CustomEvent
• DOMContentLoaded
• hashchange

Window

• Window.prototype.innerHeight
• Window.prototype.innerWidth
• Window.prototype.scrollX / Window.prototype.pageXOffset
• Window.prototype.scrollY / Window.prototype.pageYOffset

Other Goodies

• Window.prototype.JSON
• Window.prototype.localStorage
• Window.prototype.getComputedStyle
• Window.prototype.matchMedia
• Window.prototype.matchMedia.addListener
• Window.prototype.matchMedia.addListener
• Navigator.prototype.geolocation
• Element.prototype.classList
• Element.prototype.hasAttribute
• Element.prototype.placeholder

How big does the script end up being?

With every polyfill loaded, filesizes are pleasingly small.

How do I use this on my own?

First, install GIT to fork this repository. Then, install Node and Grunt to build this project.

Can I hack this?

Yes. By default, almost any polyfill.io URL returns minified JavaScript polyfills.

<script src="//polyfill.io"></script>

<script src="//polyfill.io/same-difference/whatever.js"></script>

Both scripts return only critical JavaScript polyfills.

Similarly, adding .css to the end of the URL returns minified CSS polyfills.

<link href="//polyfill.io/.css" rel="stylesheet">

<link href="//polyfill.io/same-difference/whatever.css" rel="stylesheet">

Both links return only critical CSS polyfills.

Adding maybe(X) to the URL will return only the specific JavaScript or CSS polyfills needed by the user agent, where X is a comma-delimited list of the desired scripts or elements.

<script src="//polyfill.io/maybe(array,geolocation)"></script>

Returns only critical JavaScript polyfills for array and geolocation.

<link href="//polyfill.io/maybe(article,section).css" rel="stylesheet">

Returns only critical CSS polyfills for article and section.

Adding gimme(X) to the URL will return only specific JavaScript or CSS polyfills (regardless of the user agent), where X is a comma-delimited list of the desired scripts or elements. This is your sniff-free solution.

<script src="//polyfill.io/gimme(array)"></script>

Returns all JavaScript polyfills for array.

<link href="//polyfill.io/gimme(section).css" rel="stylesheet">

Returns all CSS polyfills for section.

Adding readable to the URL will return human readable JavaScript or CSS.

<script src="//polyfill.io/readable"></script>

<link href="//polyfill.io/readable.css" rel="stylesheet">

We’re good.

Now, please… enjoy!