PleaseLook up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. tell me more
When Can I Use tells you the browser support story, while Modernizr gives you the power of feature detection. HTML5 Please helps you out with recommendations for polyfills and implementation so you can decide if and how to put each of these features to use.
The recommendations below represent the collective knowledge of developers who have been deep in the HTML5 trenches. We hope they serve you well.
Read Divya's backstory about this site.
CSS Animations are still in flux. The Working Group has decided to provide a universal animation spec that would work across CSS, SVG and HTML. For now, either use animations only to provide non-essential aesthetic enhancements or use feature detection to provide an alternative experience for browsers that do not support this feature.
As is the case with video, you need to provide your audio file in multiple formats for these to work, namely in Ogg Vorbis and AAC. jPlayer has a jQuery dependency. Sound Manager has an extensive API for further customization. mediaelement.js offers the HTML5 media element API through Flash in the fallback case and offers uniform styling across browsers and to the Flash widget.
CSS3 background-image options include background-clip, background-origin and background-size. Just ensure that your background image does not make it unreadable on IE8- where these properties are not supported. Also, when using background-image make sure you have a fallback color in case the image fails to load.
Make sure to use all the right prefixes (-o-, -webkit-, -ms-, -moz-). Additionally, border-image.com may help. You should let this fall back to either a normal solid border or no border at all, depending on whether a border is essential for readability. We recommend that you avoid polyfills.
border-radius can be safely used without a prefix for all modern browsers, and gracefully renders rectangles when not supported. However, note that applying this to a large area and on many elements might cause significant performance impact when scrolling or when the window is redrawn.
Box reflection has never been part of a CSS specification. Certain presentations that are possible with box-reflection will be possible using CSS Filters. Until then, you should avoid using WebKit-only box reflections.
box-shadow is safe to use most of the time, except when you are applying it on a large area as that may cause significant performance impact when interacting with the page (on scroll and hovers, but also transitions and animations).
Polyfills are unnecessary for box-shadow. They are too costly and slow down pageload. Users without a modern browser will not see a shadow, but aren't checking your site in multiple browsers anyhow.
box-sizing : border-box may be a much more sensible default for you. You can apply it to all (*) elements if you like. Firefox is the only browser that requires a prefix for box-sizing. You can use it without a prefix for everything else. IE8 has this feature natively, and you can optionally use the box-sizing polyfill to provide this feature in IE 6/7 (you could scope the adjustments using IE conditionals or Modernizr's no-box-sizing).
Internet Explorer and Firefox are the only supporting browsers, which makes using calc() in production tedious given the impact it can have on layout and the consequent breaking of your design on unsupported browsers. We encourage you to use it for experimentation, but not yet for any production use.
Canvas is definitely good to go for modern browsers. If you want to support Internet Explorer 8 and below, FlashCanvas provides a good polyfill.
classList is a relatively new feature which may not be available in older browsers and Internet Explorer. While this is not a concern if you are using a library like jQuery to modify class names, make sure you use the polyfill when using classList directly.
CORS, or cross-origin resource sharing, enables a few things, but most notably cross-domain AJAX. All non-IE browsers have support for CORS. IE8 introduced XDomainRequest, so really only IE7 needs help with cross-domain files. Consider the polyfills below or you can fall back to using a simple proxy.
postmessage-proxied-xhr, flXHR (requires crossdomain.xml), pmxdr (requires host installed)
If you found yourself wanting to use papayawhip or goldenrod or indianred as your colors of choice, do feel free. You have to specify a fallback color for IE 8- users. Use the HSL(), HSLA() and RGBA() functions with more caution, as they may not be supported on older browsers.
<datalist> enables autocomplete combo boxes. It can be polyfilled well with any of the scripts below, though they have varying levels of support for the full feature. You can also use a graceful fallback if you choose not to polyfill.
elem.dataset is unsupported in Internet Explorer and older mobile browsers. Using data-* attributes will be totally fine in all browsers, but instead of using elem.dataset.foo just use elem.getAttribute('data-foo'). A polyfill is availble if you want terser syntax.
Use the details element if you intend to show a summary which, when clicked, reveals detailed information. Without any fallback, non-supporting browsers will fall back to displaying the element in the opened state.
A large subset of the DOM can currently be correctly shimmed. However the current shims are not fully tested and are missing some features.
Experimentally use with caution until the shim implementations have matured.
Drag and Drop has been standardized in HTML5 based on Internet Explorer's original implementation. Therefore, it already has wide support (except Opera), but many feel frustrated when using the API. You may want to use jQuery UI Draggable (or another JavaScript library) to handle this for you. Meanwhile the proposed [dropzone] attribute will improve the situation as it gains browser support.
ECMAScript version 5 covers a large number of feature additions to what we normally call JavaScript. Excluding IE8, most of ES5 is supported in browsers. As it introduces no new syntax, it's possible to polyfill fairly well. The below polyfills tackle most uses of these features, but there is an unshimmable subset of ES5. Also note that some shims are known to have edgecase compliance bugs.
ECMAScript version 6 is the upcoming version of JavaScript that brings new features and heavy syntax changes. Currently only Chrome(17+) and Firefox support a highly experimental subset of ES6 features.
There is a ES6-shim that attempts to shim a subset of ES6 however this subset is quite small, see the ES6 shim status for more details
Since ES6 brings new syntax to the language the best way to handle cross browser compliance is using a ES6 to ES3 compiler. However although there are a few projects in progress, none are ready to use.
Server-Sent Events are real-time events emitted by the server and received by the browser. EventSource.js provides a base fallback and is not dependent on jQuery.
Exclusions are new and exciting, but very much in flux. Active development to get an implementation out is on-going, but again, please avoid using this until there are stable implementations in the wild.
This spec is under active development and as such syntaxes are likely to change radically before stabilizing. Avoid using this.
Unfortunately, older versions of this spec have been implemented in Gecko, WebKit and Trident. But the spec has changed significantly (starting from the syntax), hence we recommend you avoid using this until the stable version of the spec finds wide-spread implementation.
Internet Explorer 10, Firefox 4+ and Chrome 16 (Windows and Linux only) support low level control over font feature settings. What this means is other browsers merely will not render the flourishes you seek. Many features available through the property may be extracted to separate properties in the future, such as font-variant-ligatures.
Use the Font Squirrel Generator for fonts you have license for using as web fonts. Fontspring @font-face syntax is also the most bullet-proof way of serving web fonts. You do not need polyfills - just fonts in several formats; WOFF is preferred, followed by TTF and then EOT.
Also, don't use sIFR or Cufon anymore.
HTML5 has baked in clientside form validation, and polyfills can enable this for legacy browsers as well. Using the defined HTML5 API for constraint validation may be a more maintainable direction than using a jQuery Validation plugin, depending on your team.
geolocation shim uses Google's IP-GeoCoding service as a fallback. geo-location-javascript doesn't but has hooks into BlackBerry, WebOS, and Google Gears specific APIs. In most cases, you should just not expose Geo features in your app if the feature is not natively present.
We strongly recommend you use all the prefixes (-o-, -webkit-, -ms-, -moz-) when you provide gradients as image values (background or border-image). Do provide a fallback color if you are using this as a value for background so browsers that do not support the gradients can render a solid background color.
We also suggest you drop old WebKit syntax and only use the newer syntax for gradient values and not the latest one (yet) until the specification hits Candidate Recommendation.
The CSS Grid Layout specification supersedes several older ones, and only features an experimental implementation in Internet Explorer 10. Until the specification matures and more implementations exist, we suggest that you avoid using this.
The History API provides a way for JavaScript to change the URL displayed in the browser without reloading the page. There are several approaches to providing a fallback. The simplest is to fall back to page refreshes. Alternatively, the History.js plugin smooths out some browser implementation differences and provides an optional hashchange fallback for HTML 4 browsers. GitHub uses pjax (pushState + ajax).
All current browsers, except Internet Explorer 8 and below, support the use of the new HTML5 elements (e.g., <header>, <footer>, <nav>, <article>, <section>, etc.). However, they aren't always mapped to accessibility APIs as the HTML5 spec requires. Currently only Firefox does this, but other browsers are implementing the accessibility APIs quickly. In the meantime, Accessifyhtml5.js maps them correctly.
The notes below only apply to Internet Explorer 8 and below:
The html5shiv enables you to use the new HTML5 elements in your markup (and Modernizr does the exact same by default).
If you insert any of these new elements later on (via AJAX or templating), the html5shiv will handle this for you (as of v3). jQuery 1.7 has this functionality baked in.
Lastly, if you need these elements to print correctly, use html5shiv-printshiv.js.
CSS Text Level 3 allows you to tell the browser to break words using hyphens. As there won't by any noticable effects on browsers which don't support the feature, we recommend that you use it without any polyfills or fallbacks. CSS Hyphenator is a polyfill that works on browsers that support the soft hyphen.
IndexedDB was a volatile spec for a year, but has settled down. In addition to Chrome and Firefox, IE10 will have it; Opera and Safari have not yet committed to it.
IDBWrapper helps smooth out the cross-browser differences. You may consider falling back to WebSQL when IndexedDB isn't available, but do keep in mind that WebSQL has been abandoned.
Input placeholders are simply ignored in IE 9 and below. Note that they are only applied when the type of the input is text, password, search, tel, url, or email. Textareas can have placeholders, too. Otherwise, it is ignored.
input[placeholder] is commonly the first polyfill anyone writes and, as such, there are many of them. Password inputs and submit event clearing are among many of the gotchas that catch native implemenations; Mathias's polyfill below handles these cases very well.
A color input will fall back to a plain text input if it's not supported, but excluding Opera, no desktop browser has added support for color inputs.
You should probably avoid this until it has support in WebKit, Gecko or IE.
There are many date inputs: datetime-local, date, time, month, week that should provide a datepicker to the user. For a long time, WebKit offered a spinner UI on these inputs, but this was an incomplete implementation (and has since been removed).
A few polyfills offer a proper datepicker UI, if the feature is not offered natively.
We suggest you use Modernizr to detect this feature, as it has correctly detected these features, regardless of WebKit's partial implementation or other browser bugs.
A range input (AKA slider) will fall back to a plain text input if it's not supported.
You can use freqdec's Input Range Polyfill or for just Firefox support, Frank Yan's html5slider.
These polyfills aren't drop-in polyfills, and you'll need to wire them up a little, but your markup can depend on <input type=range> creating a slider.
Crockford's JSON2.js is a perfect polyfill that accounts for non-native implementations (basically only IE6 & IE7 at this point). It's robust, well tested and can be used along with the native feature flawlessly.
Local and session storage are a great way to store data without resorting to cookies. IE8 supported localStorage and sessionStorage so you may not need a polyfill. If you do, Remy's is a piece of cake to implement and use.
This is a simple key/value store, so if you want to store complex data use JSON.parse(str) and JSON.stringify(obj) on your way in and out. There is also no way to know if you exceeded the storage cross-browser, so wrap your store commands in try/catch. Up to 2.5MB is safe to use.
CSS Masks are not being standardized and are unlikely to ever be. CSS Filters might be your path to salvation.
matchMedia provides a JavaScript API to see if a media query will succeed. MatchMedia.js provides a shim for unsupported browsers. If you want a shim that is responsive to window resizing, you can use this fork, though it's limited to browsers that support CSS Transitions.
Media Queries (MQ) work on all modern browsers. OldIE (IE6,7,8) unfortunately do not understand media queries on features, which means none of your CSS within media queries will be parsed by them. We recommend you make peace with that (or use Chrome Frame), but if you absolutely cannot, then you can use Respond.js.
Firefox has native support for context menus, and using the below polyfill other browsers will be able to do the same.
Microdata is a new lightweight semantic meta-syntax. Using attributes, we can define nestable groups of name-value pairs of data, called microdata, which are generally based on the page's content. It gives us a whole new way to add extra semantic information and extend HTML5. Microdata is already being used by google to extract semantic meta data from your webpage.
The Microdata DOM API is helpful because you can manipulate items and properties on a page programmatically, perhaps to present the information in a searchable/filterable manner, or deliver it to another application somewhere else.
It's supported by Opera and also being implemented by Mozilla
IE6+ support can be done using this ES5/DOM shim
min-width, max-height, etc are supported everywhere as of IE7. The min-height fast hack has long been a reliable way of implementing min-height, but as many have sunsetted IE6 support, you likely don't need to worry about fallback anymore.
Use all you like without fallback; certainly do not use CSS expressions to mimic this behavior.
Multiple backgrounds will be completely ignored when they aren't supported. If you can make do with a simple background color, make sure to declare background-color: <color> before you start using multiple backgrounds. Alternatively, you can also set an image as a background with background-image and override it with a second background declaration. We strongly recommend you don't polyfill this.
Internet Explorer (10+), and Opera support CSS Multi-column Layout without vendor prefixes, so you only need prefixed versions for -webkit- and -moz-.
We recommend you do not polyfill this and let it fall back to single column text.
If Application Cache isn't available natively, there is no way to mimic it. Only supporting browser will be able to load a page while offline. Still, many apps can make use of local storage to enable offline interaction if the page is already open.
Please use the below polyfill, as WebKit is the only engine that supports it right now. Also see Louis's ol[reversed] post.
CSS3 opacity allows you to modify the opacity of HTML elements. It is safe to use. For IE6-IE8, use the proprietary "filter" property to achieve the same effect.
This specification is actively under development and thus still in flux. We recommend you wait until it has matured, and multiple implementations are available.
Pointer events are available in SVG and CSS. All modern browsers support them in SVG, but IE and Opera do not support them in CSS yet. There is a modernizr plugin to detect support, which can be used to implement a JavaScript interceptor for elements which require pointer events to be disabled.
Fixed positioning wasn't in IE6, but is fine in IE7 and everywhere else (except mobile, which is described at length here).
Use fixed positioning all you like, but you may want to check its behavior in mobile browsers afterward. There is a messy feature detect if you'd like it.
postMessage is present in IE8 and up, but if you need robust support for cross-frame and cross-domain communication, use EasyXDM
The pseudo-element notation was updated to use a double colon - :: - in the CSS3 Selectors module. The CSS module requires that browsers support both the single and double colon notations for the pseudo-elements introduced in CSS1 and CSS2 - :first-line, :first-letter, :before and :after. Therefore, if you intend to support IE8+, you should use the earlier single colon notation.
When adding generated content to your page with :before and :after, make sure that it is only for presentation and not to add content that should be included in the HTML source, as it may not be accessible.
CSS Regions is in active development. As a result, the syntax is in flux. A polyfill based on an older syntax exists, but we recommend you hold your horses till this spec sees some stability and 3 or more implementations.
requestAnimationFrame is recommended for animation as it's battery and power friendly and allows the browser to optimize the performance of your animations.
The spec has gotten some fixes and settled down. In addition to Chrome and Firefox, IE10 will have it.
An interesting usecase: If you have vertical parallax that changes on scroll, you can consider using rAF instead of binding to a window's scroll event. In this way, you'd just ask for window.scrollTop on your rAF callback and take action. This will give you the smoothest animations possible.
If you are using the Ruby element you don't need a script-based fallback, but you can provide a CSS-based set of good defaults.
Scoped stylesheets are still in active development, the first implementation of which should be available in WebKit soon.
Most CSS Selectors are supported from IE7 onwards, so you should be safe to use them. But do note that, on browsers that do not support these selectors, a whole rule will be detected as invalid if these unsupported selectors are present. For example, in IE6 #main, p:first-child {} would be invalid because it is unable to understand p:first-child. We strongly recommend you do not try to polyfill this, but if you do need one, you can use Selectivizr.
tr > td : Immediate descendant (child) selector.dt + dd : next sibling selectordt ~ dd : any following siblingdiv[attr] and img[src$=png] : Attribute selector (starts with, ends with, contains).p:first-childdiv:hover and :hover state on all non-<a>'sli.food.vegetable : without worrying about the chained classes bug:before, :after and generated content:focus for elements with current focus:nth-child(n), :last-child, :target, :not(s), :enabled, :disabled, :checked, ::selection:root, :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :first-of-type, :last-of-type, :only-child, :only-of-type, :emptySVG has had good support for several years in most browsers, except for Internet Explorer. IE9 brings support, which means for oldIE you can use SVGWeb as a polyfill, or create SVG dynamically via Raphael (which uses a VML fallback).
For Android Browser support, you can use CanVG. Meanwhile D3.js is a pure SVG library for data visualization.
Text overflow is most commonly used for text-overflow: ellipsis. Per Firefox 7, all modern browsers now support this property prefixless and you should use it. On unsupported browsers, it merely does not render the ellipsis, so we recommend that you do not use a polyfill. However, there is a jQuery plugin in the unlikely event of you needing one.
All modern browsers support text-shadow except IE. Since it's mostly used for decorative purposes, we do not recommend using a polyfill; just make sure the text is still legible without a text-shadow. We also advise you to avoid large text-shadows because they can have a negative impact on performance.
Sometimes you may do light/transparent text with an invert text-shadow. In these cases, we recomend to feature detect (with Modernizr) so you can provide solid color .no-textshadow fallback styling.
Text stroke, which adds an outline or stroke to text, is only supported by WebKit. Text stroke has never been part of a CSS specification and should be avoided.
Make sure you use all the right prefixes (-o-, -webkit-, -ms-, -moz-). If your transforms destroy the readability of your site on browsers that do not support them, use Modernizr's no-csstransforms class to adjust the design so that the text remains readable. In the unlikely event of you needing a polyfill for unsupported browsers, use Transformie or CSSSandpaper.
Most of the time, transitions just add to the experience and are not necessary for a usable experience. If there is any critical interaction that requires transitions to be present, we recommend you provide an alternative experience for users on browsers that do not support this feature by feature detecting its presence.
Note that you need to use all the usual prefixes to make this work in all browsers (-o-, -webkit-, -moz-, -ms-).
Do note you need to supply your video in various formats to cater to all browsers and fallbacks—Miro Video Converter makes this trivial. H264 and WebM cover all browsers (except Firefox 3.6 which needs Ogg Theora). Use one of the polyfills below or gracefully handle all cases without any scripting, as explained by Kroc Camen in Video for Everybody.
There is also an incredibly useful service called vid.ly which converts video online into all necessary formats and provides a short url that detects your browser/hardware and sends the correct format. Archive.org also converts MP4 videos uploaded to OGG automatically, and does the same with audio.
Web Workers can parallelize computationally heavy operations very well, freeing up the UI thread to respond to user input. Depending on what use case you have for workers, you may choose not to offer that feature if workers aren't present, or to chunk it up and put it on the UI thread.
There are polyfills and plugins to enable WebGL for IE, but you probably shouldn't use them. Use WebGL if it's present, else point the user to get.webgl.org.
You can also offer to the user to install Google Chrome Frame if they just want a plugin. Nearly all WebGL demos use GCF if it's available.
Making your app real-time is a huge boost and WebSockets give you the ability to add bi-directional communication over a persistent connection to your application to increase interactivity and user engagement.
web-socket-js is a natural polyfill for the JavaScript WebSocket API transferring data through Flash Sockets when WebSockets aren't available.
To use native WebSockets in Firefox, the prefixed MozWebSocket should be used. However, Firefox 11 will support the IETF standard without the prefix.
As a word of caution, the protocol backing the Web Socket API has become an IETF standard, but Safari has not yet implemented the (secure) new version. It is recommended forcing an alternative on Safari or disabling WebSockets on Safari for now.
To make websockets easier to use there are multiple server-side framework solutions. These frameworks generally provide fallback transports (HTTP long polling, HTTP streaming, ajax polling) to support non-websocket browsers. However be prepared to tune the fallback solutions in order to meet the needs of your app.
Sockjs is one a framework which emulates the WebSocket API in browsers and has server implementations for node.js, Ruby, Erlang or tornado.
Socket.io is a Node.js framework that helps with downlevel transports for browsers lacking native WebSocket support (and supports IE6+).
XSockets and is a .NET+JavaScript framework that handles fallback via Flash and Silverlight.
For more information see the Full list of possible server-side websocket solutions
Although it initially found favor as a clientside database API, it has now been abandoned in favor of IndexedDB. We therefore recommend that you do not use WebSQL.