Skip to content

HTML5 Cross Browser Polyfills

Jump to bottom
Hugo Manrique edited this page Dec 30, 2018 · 472 revisions

The No-Nonsense Guide to HTML5 Fallbacks

So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them.

The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly.

SVG

  • svgweb by Brad Neuberg & others
    • Fallback via Flash
  • Snap.SVG from scratch by the author of Raphaël (Dmitry Baranovskiy)
    • Abstracted API. Adds features. Fallback for IE via VML.
  • Ample SDK by Sergey Ilinsky
  • canvg by Gabe Lerner
    • Writes SVG to canvas. Good for Android
  • SVG Boilerplate
    • (alpha; still buggy) Handle multiple concurrent SVG shims together
  • SIE SVG library by dhrname
    • Fallback to VML for old IE
  • dojo gfx by Eugene Lazutkin, Kun Xi, Chris Mitchell
    • Fallback via VML, Canvas, Silverlight and Flash
  • fabric.js by kangax
    • Render SVG via canvas

SVG SMIL

Canvas

Web Storage (LocalStorage and SessionStorage)

Non HTML5 API Solutions

Sectioning Elements

  • html5shiv by afarkas, Jon Neal & community
    • Enables for print use, as well
  • innerShiv by Joe Bartlett
    • Enables elements for innerHTML use
    • Deprecated: replaced by html5shiv

Video

VTT: Video Timed Track (subtitles)

  • videosub
  • JSCaptions by Daniel Davis
  • Captionator by Christopher Giffard
    • Supports WHATWG TextTrack spec & has experimental support for MediaTracks/synchronised media elements
  • playr by Julien Villetorte
    • Support both WebVTT & SubRip files

Audio

  • SoundJS
    • SoundJS provides a simple API and powerful features that abstract away the difficulties in varied browser audio support. Optional flash fallback for older browser support. Extensive documentation and active community.
  • audioJS
    • AudioJS is a agnostic and cross-browser lib to work easily with the AudioContext API of HTML5.
  • jPlayer
    • custom <audio> player with jQuery dependency, flash fallback
  • audio.js by ab+c
    • custom <audio> player, flash fallback
  • SoundManager2
    • custom <audio> player, flash fallback, API, extensive documentation
  • LeanBack Player - HTML5 audio/video media player
    • HTML5 audio/video media player UI, easy to integrate and independent of other JS libraries.

Audio Data API

IndexedDB

Web SQL Database

Local Database Abstractions (non-HTML5 APIs, but useful)

Web Forms

Web Forms: individual input types

Web Forms: validation

Web Forms: <input placeholder="…">

<datalist>

Accessibility / ARIA

Web Sockets

Geo-Location

Beacon

Application Cache

<link rel="prefetch|prerender" ...

  • jiagra by Samy Kamkar
    • A psuedo-polyfill for preloading pages to browser cache

Browser State Management

Visibility

  • Visibility.js by Andrey Sitnik
  • visibly.js by Addy Osmani
  • Page Visibility shim for jQuery by Mathias Bynens
    • The HTML5 Page Visibility API allows you to determine whether your web page is visible to the user, is hidden in background tab, or is prerendering. visibility.js deals with vendor-prefixes and provides a fallback for browsers without this API by assuming the page is always visible. However, this is a wrapper more than a polyfill.

Offline & Online Events

HTML5 History API (pushState, replaceState, popState)

  • History.js by Benjamin Lupton
    • (optional hashchange fallback for HTML4 browsers)
  • HTML5-History-API by Dmitriy Pakhtinov
    • Lightweight, and fully standards-compliant implementation of History API with IE6+ support and hashchange implementation
  • PJAX by Chris Wanstrath
    • (pushState + ajax = pjax) (not a polyfill)

hashchange Event

Drag and drop

requestAnimationFrame

Animated PNG (APNG)

  • APNG-Canvas by Давид Мзареулян
  • png.js by Devon Govett
    • Parses and renders PNGs both animated and static to a canvas element with putImageData

Ruby

New tag

<details> and <summary>

<dialog>

<meter>

<output>, <progress>, <menu>, <command>

dataset property (for use with custom data-* attributes)

<ol reversed>

<style scoped>

  • Scoped Styles by Simon Madine
    • jQuery Plugin to enable the scoped attribute on style blocks so they only affect their parent element's children.
  • Scoper by Thomas Park

<picture> and <img srcset>

  • picturefill by Scott Jehl
    • A polyfill for <picture>, srcset and sizes.
  • respimage by Alexander Farkas
    • A polyfill for <picture>, srcset and sizes with smart resource selection

File API

  • dropfile.js by Andrew Dodson
    • Creates the FileReader part of the FileAPI via Silverlight for drag and drop files
  • FileSaver.js by Eli Grey
    • Implements saveAs()
    • Includes BlobBuilder shim
  • mOxie Polyfill extracted from Plupload
    • FileReader, drag and drop
    • XHR2 shim for storing on IE<10, FormData
    • Flash fallback
    • File input 'overlay'
  • FileReader.js by Jahdrien
    • Creates FileReader and FileAPI using Flash, jQuery and jQuery UI
    • No drag and drop support!
  • FileAPI by Konstantin Lebedev (© Mail.ru Group)
    • Multiupload: all browsers that support HTML5 or Flash
    • Drag'n'Drop upload: files (HTML5) & directories (Chrome 21+)
    • Upload one file: all browsers
    • Working with Images: IE6+, FF 3.6+, Chrome 10+, Opera 11.1+, Safari 5.4+
  • idb.filesystem.js by Eric Bidelman
    • HTML5 Filesystem API polyfill that uses IndexedDB as a storage layer.
  • window.saveAs by Andrew Dodson
    • Simple shim (for IE10 current Chrome and FireFox)

Binary and Typed data

Base64 (window.atob and window.btoa)

WebRTC / getUserMedia()

  • getUserMedia.js by Addy Osmani provides a cross-browser shim for getUserMedia() camera access.
  • webrtc4all by Doubango Telecom provides the WebRTC APIs for Safari, Opera Classic and IE via an NPAPI/ActiveX plugin.
  • Temasys WebRTC Plugin by Temasys provides the WebRTC APIs for Safari and IE via an NPAPI/ActiveX plugin.

WebGL

MathML

Cross-Document/Domain Messaging (postMessage)

  • easyXDM by Sean Kinsey
    • Implements XDM and RPC in most browsers since IE6. Also ships with an endpoint for exposing ajax across the domain boundary.
  • postMessage jquery plugin by Ben Alman

Cross-Origin Resource Sharing (CORS)

  • XDomain by Jaime Pillora
    • Transparently enable cross-domain XMLHttpRequest by adding a small proxy.html on the destination domain*
  • pmxdr by Eli Grey
    • Implements a CORS-compliant cross-domain XMLHttpRequest with postMessage. Note that sites being requested must have a pmxdr host.
  • libxdr by Eli Grey
    • Implements a CORS XMLHttpRequest drop-in using pmxdr.
  • postmessage-proxied-xhr (PPX) by Atul Varma
  • flXHR by Kyle Simpson
    • Provides XHR API using Flash transport mechanism. Target server must have a crossdomain.xml policy file.

DOM & Events

classList

EventSource

Pointer Events (API)

Touch Events (API)

Pointer Events (CSS)

DOM Range and Selection

New Events

  • transitionEnd
    • Agnostic, cross-browser lib. Work with the transitionend event.

DOM Parsing and Serialization

XPath

  • js-xpath
    • Provides document with evaluate, createNSResolver, createExpression
    • Adds support for XPathResult, XPathNSResolver, and XPathExpression.
  • wicked-good-xpath rewrite of js-xpath with support for newer (>9) IE versions

ECMAScript

Web Workers

Fake workers are useful for unit testing or for fallback behavior on non-supporting browsers

Arrays

  • Array.prototype.slice adds ability to treat DOM elements as arrays. This behavior is not required by any standard given that it applies to host object behavior (which is implementation-dependent), but it is not forbidden either.
  • Array Generics
    • Implementation of standard Array methods (introduced in ECMAScript 5th edition) and shorthand generics (JavaScript 1.8.5)
    • Browser support: Internet Explorer 6+, Firefox 1.5+, Chrome, Safari, Opera.

ECMAScript 5

ECMAScript 6 (Harmony)

Promise

  • es6-promise
    • Polyfill for JavaScript Promises, based on RSVP.js but matches ES6 API
  • P.js
    • An agnostic, cross-browser and very lightweight library to help you to work with Promise in JavaScript.
  • rsvp.js
    • Implementation of Promises/A with mixin for turning objects into event targets.
  • lie
    • lie is a small, performant promise library implementing the Promises/A+ spec (Version 1.1).

CSS Prefix generators

  • cssFx - by Ivan Malopinsky
    • Standalone, lightweight, client-side JS; supports almost all CSS3 properties
  • CSS Crush
    • A PHP based CSS pre-processor for handling vendor prefixes, CSS variables, data-uris and minification
  • CSS Agent by Keith Clark
    • A ASP.Net based CSS pre-processor for handling vendor prefixes, CSS variables, and minification
  • jQuery Css3 Finalize by Han Lin Yap
  • -prefix-free by Lea Verou
  • Autoprefixer by Andrey Sitnik
    • A fast post-processor that uses the data on current browser popularity (caniuse.com) and adds their vendor prefixes or other required syntax changes. Great integration with Grunt, Rails, Sublime Text, and others.

CSS, core modules

Selectors, L3-spec, L4-spec

  • selectivizr by Keith Clark
  • cssParentSelector by Kasper Mikiewicz
  • CSS3/4 querySelectorAll and matches polyfill by Егор Халимоненко. Pure JS with optional IE6/7 support. Currently CSS4 Selector API supporting:
    • subject of a selector: div! a[href*=twitter]
    • :scope pseudo-class: :scope>*:nth-child(2n+1)
    • nodesRef: document.querySelector("a", <div>) -> <a> child of <div>

Values and Units, spec

  • CSS3 - REM Unit conversion by Chuck Carpenter and Lucas Serven
    • Evaluates stylesheets for REM declarations, converts them to pixels and appends to the HEAD. Has no dependencies, but can easily be implemented with Modernizr/Yepnope for loading.
  • Units by Grady Kuhnline
    • Units is a JavaScript library for converting between angle and length units (including the rem unit). Both are intended for use within other libraries that need to convert between acceptable CSS units when creating polyfills.
  • viewport-units-buggyfill by Rodney Rehm
    • Viewport units in Safari and IE9, and slightly hackier mode that puts them in calc()
  • vminpoly by Sebastian Ferreyra
    • A polyfill for CSS units vw, vh & vmin.
  • Prefixfree - Viewport Relative Units Plugin by Lea Verou
    • Another vw, vh, and vmin polyfill
    • Requires prefixfree (2kb).
  • cssMinMax by Russ Porosky
    • min() and max() jQuery plugin polyfill
    • Includes JSCSSP, so it's a bit large

Image Values and Replaced Content, L3-spec, L4-spec

Backgrounds and Borders, spec

  • CSS3 PIE by Jason Johnston
    • CSS3 decoration rendering for IE 6-9. Supports: border-radius, box-shadow, multiple backgrounds, linear gradients, border-image
  • background-size polyfill by Louis-Rémi Babé
    • background-size for IE7 and IE8 via Microsoft's proprietary CSS behavior / .htc-script
  • background-size emu by Metafalica
    • a better background-size polyfill that doesn't need an .htc script

Basic user interface, spec

  • jQuery Text Overflow plugin by Devon Govett, Andrew A. Kononykhin, Micky Hulse
  • borderBoxModel by Alberto Gasparin
    • box-sizing: border-box; javascript polyfill for IE6+
  • box-sizing-polyfill by Christian “Schepp” Schaefer
    • box-sizing: border-box; for IE6 and IE7 via Microsoft's proprietary CSS behavior / .htc-script
  • Borderbox for Compass by Richard Herrera
    • box-sizing: border-box; polyfill for SASS/Compass. Outputs equivalent CSS for IE6 & 7

CSS, responsive design modules

Media Queries Level 3, spec

  • css3-mediaqueries-js
  • Respond by Scott Jehl
    • A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
  • mediatizr by Aurélien Delogu
    • Responsive-oriented CSS3 media queries polyfill
  • matchMedia by Scott Jehl, Paul Irish, Nicholas Zakas
    • A standardized way to check media query matching in script.
  • jQuery Media Helpers by Scott Jehl
    • Some media query and cross-browser responsive design helpers, abstracted from jQuery Mobile
  • pointeraccuracy.js by n-fuse
    • Implementation of the pointer media query

Media Queries Level 4, spec

Conditional rules, spec

CSS, text modules

Text decoration, spec

CSS, font modules

Font events, spec

CSS, layout modules

Multi-column Layout, spec

Flexible Box Layout, spec

  • Flexie by Richard Herrera
    • Flexible box model - legacy spec from 2009. (flexbox) Supports: box-orient, box-align, box-direction, box-pack, box-flex, box-ordinal-group
  • Flexibility - Flexbox for IE 8/9 (requires special prefixed CSS)
  • Any Flexbox polyfill should also be paired with a post-processor like Autoprefixer for generating rules compatible with IE10 and old iOS Safari

Grid Layout, spec

Template Layout, spec

Regions, spec

CSS, effects modules

Transforms, spec

Filter Effects, spec

CSS, generated content

  • CSS Polyfills by philschatz
    • Implements many of the CSS selectors and rules defined in CSS3 Generated and Replaced Content Module and CSS3 Generated Content for Paged Media Module

Microdata API

  • microdatajs by Philip Jägenstedt
  • Microdata-JS by Егор Халимоненко
    • Pure JS (Extending Element.prototype with IE6+ support)

Notification API

XBL

Flash

Web Performance (Profile)

Hyphenation

  • hyphenator by Mathias Nater
    • CSS3 defines six properties and an at-rule that influence hyphenation. hyphenator is a JavaScript implementation with pattern files for many languages.

GamePad API

Media Fragments

  • xywh.js
    • Polyfill that lets you crop images and videos simply by using specific x, y, w(idth), and h(eight) parameters from their URIs.
    • The library implements the spatial media fragments dimension of the W3C Media Fragments URI specification.
  • mediafragments.js
    • Polyfill that lets you place deep links into videos and audios simply by using a specific t(ime) parameter from their URIs.
    • The library implements the temporal media fragments dimension of the W3C Media Fragments URI specification.

Other

  • Permission API
    • Extended version that stay consistent with the navigator.permission API
  • Overthrow
    • overflow:auto detection and polyfill
  • iScroll
    • The overflow:scroll for mobile
  • Scroll Snap
    • CSS scroll snapping
  • RadioNodeList polyfill
  • screenfull.js
    • Simple wrapper for cross-browser usage of the JavaScript Fullscreen API
  • <marquee scrollamount="100%">blink</marquee>
    • HTML-only polyfill for the no longer supported <blink> element.
  • pointeraccuracy.js
    • Implementation of the pointer media query
  • scrollTo(x, y, 'smooth')
    • CSSOM View smooth scroll polyfill
  • window.location.origin fix for IE
    • A fix to allow you to use window.location.origin consistently
  • W3C Manifest
    • W3C Manifest polyfill support for Safari iOS, Windows Phone 8+, Windows 8+, Firefox OS 1.1+, the Android browser and Chrome for Android.
  • console-polyfill by Paul Miller
    • Adds no-operation console methods to environments where console is not available. Basically makes console safe to use.

Collection

  • Webshims Lib several Polyfills using lightweight capability based loading concept (shiv, innershiv, canvas, forms, ES5, localStorage/sessionStorage, JSON, geolocation) by Alexander Farkas
  • Assorted file formats decoding of several file formats done in Javascript, documented on the excellent jswiki
  • Polyfill.js Polyfills loaded dynamically based on need (list of available polyfills on the linked page) by James Brumond
  • ES5/DOM shim implements DOM API and EcmaScript 5 (and some from ES6), and bug fixing in IE6+ and other browsers:
    • Add methods such [add/remove]EventListener, querySelector[All], setSelectionRange, etc in IE6+
    • Add Element/Node properties such classList, children, [first/last]ElementChild, reversed, control, labels, etc in IE6+
    • Add methods such insertAdjacentHTML (old FF), stopImmediatePropagation (Opera < 12) and properties reversed, control, labels, etc in W3C browsers
    • Add ES5/6 methods in all browsers
    • Add DOM4 methods append, prepend, after, before, replace, remove, match in all browsers
    • Provide bugs fixing for DOM and ES in IE, Opera, Chrome, FF
    • and more with low cost:
      • ≈8KiB for W3C browsers
      • ≈16KiB for IE8
      • ≈18KiB for IE6/7 [gzip]
  • aight
    • A collection of shims and shams for IE8 and 9, and a nifty CLI tool to make your scripts IE8-friendly.
  • ie7.js, ie8.js, ie9.js by Dean Edwards
    • A JavaScript library to make MSIE behave like a modern browser. Many fixes including PNG transparency, CSS styles/selectors, rendering bug fixes, etc.

Contributors

Edited and maintained by Paul Irish. Contributions from Jonathan Cook, Mark Boas, Michael Behan, Mathias Bynens, Eli Grey, Øyvind Sean Kinsey, and others.

Clone this wiki locally