HTML5 Cross Browser

HTML5 Cross Browser Polyfills 

SVG

  • svgweb by Brad Neuberg & others
    • Fallback via Flash
  • Raphaël by Dmitry Baranovsky
    • 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 and still buggy, but handle multiple concurrent SVG shims together
  • SIE SVG library by dhrname
    • Fallback to VML for oldIE
  • dojo gfx by Eugene Lazutkin, Kun Xi, Chris Mitchell
    • Fallback via VML, Canvas, Silverlight and Flash
  • fabric.js by kangax
    • Can render SVG via canvas
  • inline SVG polyfill by mstalfoort

SVG SMIL

Canvas

Web Storage (LocalStorage and SessionStorage)

Non HTML5 API Solutions

Sectioning Elements

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

Video

  • html5media
    • Uses flowplayer swf for fallback.
  • mediaelement.js by John Dyer
    • swf player that mimics HTML5 media API. Consistent UI across browsers and flash. <track> support.
  • SublimeVideo
    • World’s first zero maintenance HTML5 video player as a service solution.
  • video.js by Zencoder
    • Device fixes. <track> support
  • video for everybody by Kroc Camen (orig.)
    • The granddaddy of <video> fallbacks. Markup-based solution, works without javascript. A must read.

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

  • jPlayer custom player with jQuery dependency, flash fallback
  • audio.js custom player, flash fallback by ab+c
  • SoundManager2 custom player, flash fallback, api, extensive documentation

IndexedDB

Web SQL Database

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

Web Forms

Web Forms : input placeholder

Accessibility / ARIA

Web Workers

Web Sockets

Geo-Location

Application Cache

Browser State Management

Offline & Online Events

  • offline-event.js by Remy Sharp (Opera not supported, and Safari doesn’t update navigator.onLine property)

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 standardize compliant implementation of History API with IE6+ support andhashchange implementation
  • PJAX (pushState + ajax = pjax) by Chris Wanstrath (not a polyfill)

Hashchange Event

EventSource

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

<details> and <summary>

<meter>

Support for <output><progress><menu><command><keygen>elements..

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

<datalist>

<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.

File API / Drag and Drop

  • dropfile.js by Andrew Dodson
    • Creates the FileReader part of the FileAPI via silverlight
  • jDataView by vjeux
    • DataView polyfill for structured data
  • FileSaver.js by eli grey
    • incl BlobBuilder shim
  • FileReader.js by Jahdrien
    • Creates FileReader and FileAPI using Flash, jQuery and jQuery UI
    • No drag and drop support!
  • idb.filesystem.js by Eric Bidelman
    • HTML5 Filesystem API polyfill that uses IndexedDB as a storage layer.

Base64 (window.atob and window.btoa)

Please also note that strings out of the ASCII range need an additional layer of encoding in JavaScript.

Device Access via <device>

WebRTC/getUserMedia()

  • getUserMedia.js by Addy Osmani provides a cross-browser shim for getUserMedia() camera access.

WebGL

MathML

(Web) Audio (Data) API

classList

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)

  • pmxdr by Eli Grey.
    • Implements a cross-domain XHR. Note that sites being requested must have a pmxdr host.
  • 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

DOM Range and Selection

DOM Parsing and Serialization

ECMAScript 5

  • es5-shim by Kris Kowal, Tom Robinson, community.
  • Xccessors by Eli Grey.
    • Implements ES5 accessors (getters and setters) for browsers supporting legacy methods and/or legacy methods for browsers supporting ES5.
  • getters and setters by the IE team.
    • Pick up get/set’ers for DOM elements in IE8
  • json2.js by Douglas Crockford
  • json3.js by Kit Cambridge
  • ddr-ecma5 by David de Rosier
  • augment.js by Oliver Nightingale

ECMAScript 6 (Harmony)

CSS3 Selectors

CSS3 Transforms

CSS3 Styles

  • 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
  • CSS3 PIE by Jason Johnston
    • CSS3 decoration rendering for IE 6-9. Supports: border-radius, box-shadow, multiple backgrounds, linear gradients, border-image
  • Flexie by Richard Herrera
    • Flexible box model. (flexbox) Supports: box-orient, box-align, box-direction, box-pack, box-flex, box-ordinal-group
  • CSS Template Layout jQuery plug-in by Alexis Deveria
  • CSS3 – Multi Column by Cédric Savarese
    • Supports: column-count, column-width, column-gap, column-rule
  • 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 dependancies, but can easily be implemented with Modernizr/Yepnope for loading.
  • jQuery Text Shadow by heygrady
    • Text-shadow action via jQuery plugin API
  • jQuery Text Overflow plugin by Devon Govett, Andrew A. Kononykhin, Micky Hulse
  • Regions.js by Robin Ricard
  • 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
  • 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.
  • cssMinMax by Russ Porosky
    • min() and max() jQuery plugin polyfill
    • Includes JSCSSP, so it’s a bit large
  • jQuery.object-fit.js by Steve Workman (fork of Simon Schmid’s work)
    • CSS3 object-fit via jQuery plugin API. Currently supports: object-fit: contain|cover; (for developing standard)

CSS3 Media Queries

  • 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

CSS4 Selectors

CSS4 -image-set on <img> elements

Microdata API

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

XBL

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

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

Flash

  • Mozilla Shumway
    • Flash VM and runtime written in JavaScript.
  • Google Swiffy
    • Webapp converts SWF to HTML+JS. Supports subset of SWF 8 and ActionScript 2.0, and webkit-only output.
  • Adobe Wallaby
    • Desktop app converts FLA to HTML+JS.
  • Gordon
    • Javascript that interprets SWFs live. Plays only SWF1 files completely, as well as most of the SWF2 features.

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.

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.

Media Capture

Other

  • requestAnimationFrame by Erik Möller
  • iScroll – The overflow:scroll for mobile webkit
  • 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.

Mixed!

  • 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 and ~18KiB for IE6/7 [gzip])

Everything!

  • Google Chrome Frame
    • Not exactly a feature shim, but… well… It’ll help. 🙂
  • 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.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s