polyfill

Name Modified Size
Gruntfile.js4 years ago281
LICENSE.md4 years ago1.08 KB
README.md4 years ago10.22 KB
agent.css.json4 years ago2.06 KB
agent.js.json4 years ago4.75 KB
agent.json4 years ago855
normalize.json4 years ago1.49 KB
package.json4 years ago151
source4 years ago65.45 KB

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.

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

Don’t punish Chrome for old Internet Explorer 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. 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, subline, 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.

Browser Filesize
Chrome 338 B
Internet Explorer 10+ 346 B
Firefox 6+ 346 B
Safari 6+ 351 B
Safari 5.1 442 B
Opera 15+ 798 B
Firefox 3.6 1.57 KB
Internet Explorer 9 1.71 KB
Safari 4 2.32 KB
Internet Explorer 8 4.88 KB
Internet Explorer 6/7 7.70 KB

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!