animations

use with fallback

css

Animations are now supported in the latest versions of almost all browsers. In order to provide support for slightly older browsers, 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.

fallback

<audio>

use with polyfill

html

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.

Recommended polyfills:

mediaelement.js, jPlayer, Sound Manager 2

polyfill

background-image options

use with fallback

css

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.

gtie8 fallback

border-image

use with fallback

css

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.

There were some syntax changes (requiring the fill keywords) that may catch you off-guard; David Baron's border-image post describes the best course of action.

fallback prefixes

box-reflection

avoid

css

The box-reflect property has never been part of any CSS specification. Certain presentations that are possible with -webkit-box-reflect will be possible using CSS Filters. You should avoid using WebKit-only box reflections.

none

box-shadow

caution

css

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 page load. Users without a modern browser will not see a shadow, but aren't checking your site in multiple browsers anyhow.

Box shadows can also be applied safely without prefixes.

prefixes

box-sizing

use with fallback

css

Supported in Chrome, IE8+, Opera, Safari 5.1+. The recommended pattern is box-sizing : border-box;, preceded by the fallbacks -webkit-box-sizing: border-box; for old IOS<=4 and Android<=3, and -moz-box-sizing: border-box; for Firefox. You can apply it to all (*) elements if you like.

IE8 does not support box-sizing: border-box; with min-width/max-width and min-height/max-height. For IE6/7 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).

Besides the prefix, there were box sizing issues in Gecko/Firefox, see notes at MDN. For versions of Firefox before 17 min-height/max-height does not work.

fallback prefixes gtie7 border-box

calc()

use with fallback

css

All the modern browsers except Android's native browser support calc() which makes it easier to adopt. But do note that it can have a big impact on the layout and the consequent breaking of your design on unsupported browsers.

You should use it with a fallback declaration, so it doesn't break browsers which don't support it.

width: 500px; /** older browsers **/
width: -webkit-calc(50% - 20px); /** Safari 6, Chrome 19-25 **/
width: -moz-calc(50% - 20px); /** FF 4-15  **/
width: calc(50% - 20px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/
fallback

<canvas>

use with polyfill

html

canvas is definitely good to go for modern browsers. If you want to support Internet Explorer 8 and below, ExplorerCanvas and FlashCanvas can be helpful in providing support for most canvas features. However, due to the complex nature of native canvas implementations, developers should be aware that the polyfills for canvas are not simple drop-in solutions in some cases.

For example, both ExplorerCanvas and FlashCanvas may have difficulties handling the commonly used drawImage method. FlashCanvas cannot be passed the bitmap data from a DOM-based Image object, and therefore has to re-request the asset in the Flash Player causing undesired latency and flickering. Developers should be careful when handling image data and ensure thorough testing due to the unreliability and technical limitations of these features in the polyfills.

That isn't to say canvas shouldn't be used if cross-browser compatibility is a concern. Existing polyfills are more than capable of rendering simpler bitmaps such as charts/graphs, visualizations, and even starfields! For these uses and many more, canvas is highly encouraged.

Recommended polyfills:

FlashCanvas, ExplorerCanvas

gtie8 polyfill

classList

use with polyfill

api

classList is a relatively new feature which may not be available in older browsers and Internet Explorer <= 9. 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.

Recommended polyfills:

classlist.js

polyfill gtie9 nooldmobile

CORS

use with polyfill

html

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 flXHR polyfill or you can fall back to using a simple proxy.

Recommended polyfills:

flXHR (requires crossdomain.xml)

polyfill

css filters

caution

css

Filters are now supported by Safari 6+, Opera 15+, and Chrome 18+. But, given the lack of support in other browsers, consider waiting for other implementations before use.

If you can't wait, give Polyfilter - a CSS Filters Polyfill a spin which supports/translates to/emulates filters on Chrome 20+, Safari 6+, Firefox 4+, IE 6-9 (but not IE 10) on desktop and iOS 6+ Safari and Chrome, and Firefox 4+ on mobile.

prefixes

css3 colors

use with fallback

css

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.

fallback gtie8

dataset

use with fallback

api

elem.dataset is unsupported in Internet Explorer <= 10 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 available if you want terser syntax.

Recommended polyfills:

HTML5 dataset support

fallback gtie10 nooldmobile

<details>

use with polyfill

html

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.

Recommended polyfills:

Details, jquery-details

polyfill

DOM

caution with polyfill

api

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.

Recommended polyfills:

ES5-DOM-shim, DOM-shim

polyfill

drag n drop

caution with polyfill

api

Drag and Drop has been standardized in HTML5 based on Internet Explorer's original implementation. Therefore, it already has wide desktop support, 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.

There is not much mobile support currently.

Recommended polyfills:

dropfile, fileSaver, jDataView

polyfill nomobile

ECMAScript 5

use with fallback

js

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.

Recommended polyfills:

es5-shim, augment.js

fallback gtie8 nooldmobile es5

ECMAScript 6

avoid

js

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.

es6

exclusions

avoid

css

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.

none

File API

use with polyfill

api

Using the File API added to the DOM in HTML5, it's now possible for web content to ask the user to select local files.

FileReader pairs very well with Drag n Drop to allow for drag 'n drop file uploads, and if neither of those features are present, the fallback of providing an <input type=file> is rather easy. Supported in Chrome, Firefox, Opera. Safari is currently missing FileReader support.

  • FileReader provides useful fallback, based on Flash, jQuery and jQuery UI. Doesn't support readAsBinaryFile.
  • moxie extracted from Plupload, actively maintained as of 6/3/13.
Recommended polyfills:

FileReader, moxie

prefixes polyfill

FileSystem & FileWriter API

avoid with polyfill

api

Filesystem API provides a method of reading and writing files to a sandboxed file system on the user's local file system. Supported only by Chrome 18+ with webkit prefix. Check out http://caniuse.com/filesystem for a better understanding of the support.

idb.filesystem.js Implements a polyfill using IndexedDB as its underlying storage layer. Required support for IndexDB means that it works only in Firefox and Chrome.

Recommended polyfills:

idb.filesystem.js

prefixes polyfill

flexbox

use

css

Go for it! CSS Tricks' A Complete Guide to Flexbox provides strong reference documentation for all properties and values, and Dive into Flexbox is a good overview of the spec. Additionally, the flexbox docs at MDN are excellent and the Putting Flexbox into Practice slide deck shares a practical path of using flexbox today.

Flexbox has a funny history: the flexbox spec changed significantly through three major revisions (Chris Coyier shares how to tell which flexbox you're looking at). The current version is now a W3C Candidate Recommendation and is stable.

Browser support: The new spec is now implemented in all 5 major desktop browsers. On mobile, the old spec is in Android browser 2.1 and Firefox Mobile, and the new spec is in iOS Mobile Safari 7, Chrome, Opera Mobile and Blackberry. There are presently no robust polyfills for the current spec, however you can mix old and new flexbox for maximum browser support.

We recommend looking at the Solved by Flexbox solution playground and work with the following tools to iterate and find your layout and syntax: Flexbox Please!, Flexy Boxes, and Flexplorer.

none flexible

@font-face

use with fallback

css

Use Google Fonts for hundreds of free, open-source fonts optimized for the web. 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 solutions like sIFR or Cufon anymore, as they can cause accessibility and performance problems.

fallback

font-feature-settings

use

css

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.

More at OpenType features in web browsers

none

form validation

use with polyfill

html

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. When detecting this feature, be aware of Safari's half baked support. It does support form validation, but won't highlight invalid fields or present error messages.

Recommended polyfills:

webshims, nwxforms, H5F

polyfill gtie9

FormData API

caution

api

XMLHttpRequest Level 2 adds support for the new FormData interface, which provides a way to easily construct a set of key/value pairs representing form fields and their values, and can be sent using the XMLHttpRequest send() method. A FormData object can be constructed from an already existing form or created programmatically.

Sending input values can easily be done already. For instance, the MooTools framework has a toQueryString() method that can create a query string from any element. What's new with FormData is that it can send files!

var xhr = new XMLHttpRequest()
, file = document.getElementById('myfile')
, fd = new FormData()

fd.append(file.name, file)

xhr.open("POST", '/api/file-upload')
xhr.send(fd)

FileAPI can also be used to send files but you need to construct the body of the XHR by hand and send it using the sendAsBinary() method, which is only implemented in Firefox. This might also use a lot of memory since the whole content of the file must be read in memory in order to build the body, whereas FormData sends packets.

fullscreen

caution with fallback

api

The Full Screen API is currently only available in the latest versions of Chrome, Firefox and Opera. A jQuery plugin is available which contains an optional fallback to a minimal-chrome browser window when the Full Screen API is unavailable. Use as a progressive enhancement for those select browsers only.

Recommended polyfills:

jQuery Fullscreen Plugin

fallback

gradients

use with fallback

css

We strongly recommend you use the prefixes (-o-, -webkit-, -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 Chrome & Safari start supporting the newer syntax.

fallback prefixes gtie8

grids

avoid

css

The CSS Grid Layout specification supersedes several older ones, and features an experimental implementation in Internet Explorer 10+ as well as Chrome and Opera. An overview can be found at updates.html5rocks.com. Until the specification matures and more implementations exist, we suggest that you avoid using this.

Recommended polyfills:

https://github.com/codler/Grid-Layout-Polyfill

none

history

use with fallback

api

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

fallback

HTML5 elements

use with polyfill

html

All current browsers, except Internet Explorer 8 and below, support the use of the new HTML5 elements (e.g., <header>, <footer>, <nav>, <main>, <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.

gtie8 polyfill

hyphens

use

css

CSS Text Level 3 allows you to tell the browser to break words using hyphens. Read about how to effectively use hyphens:auto and word-break in Word wrapping/hyphenation using CSS.

As there won't be 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. Modernizr has good support for hyphenation detection. It'd also be wise to read The Current State of Hyphenation on the Web .

none prefixes

iframe[sandbox]

use

html

This attribute enables fine-grained control over the capabilities of a document housed within an iFrame.

Browser support is not nearly high enough to consider this measure alone sufficient for sanitizing output. Use this attribute as part of a defense-in-depth strategy.

Also see more about implementing iframe[sandbox] responsibly on Bocoup's blog.

gtie9

iframe[seamless]

caution

html

This attribute instructs browsers to treat the iFrame's content more like inline markup than it would otherwise. Specifically, this means:

  • Hyperlinks navigate the parent context
  • The parent's stylesheets cascade in (importantly, the inverse is not true)
  • More "neutral" rendering, roughly equivalent to declaring: scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"

Because the user experience of following hyperlinks is so drastically altered in supporting browsers, use this attribute with caution.

Also see more about implementing iframe[seamless] responsibly on Bocoup's blog.

none

IndexedDB

caution with fallback

api

IndexedDB was a volatile spec for a year, but has settled down. Chrome, Firefox, Opera and IE10 have shipped it. Safari has not yet committed to it.

The IndexedDB Polyfill is a polyfill for the IndexedDB APIs over WebSql. This enables IndexedDB to work on browsers that support WebSql. 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.

Recommended polyfills:

IDBWrapper, IndexedDB Polyfill

fallback gtie8

<input type=color>

avoid with polyfill

html

A color input will fall back to a plain text input if it's not supported. So far, only Opera and Chrome support this.

You should probably avoid this until it has support in WebKit, Gecko or IE.

polyfill gtie9

<input type=date>

caution with polyfill

html

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.

Recommended polyfills:

webshims, html5widgets

polyfill gtie9

<input type=number>

use with polyfill

html

A number input will fallback to a plain text input if it's not supported.

So far, Chrome, Safari and Opera support it. Jonathan Stipe's Number polyfill doesn't need any additional code changes but does require jQuery and CSS to style buttons.

Safari on iOS and the Browser on Android 4.0 (Ice Cream Sandwich) do show number input, but do not use "step", "min" or "max" attributes and neither show increment/decrement buttons.

Recommended polyfills:

Number polyfill

polyfill fallback

<input type=range>

caution with polyfill

html

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 to support Firefox <= 22, try 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.

Recommended polyfills:

Input Range Polyfill, html5slider

polyfill gtie9

<input type=search>

use

html

A search input will fall back to a plain text input if it's not supported. The standard doesn't specify any behavior for this type, but recommends styling to match the platform's search fields (e.g. with rounded corners on OS X). The style cancels out many CSS styles from being applied, and can be removed with -webkit-appearance: none;. The recommendation here is to use input[type=search] to enhance your forms, so long as you're okay with the styling difference.

While the standard does not specify any behavior, Webkit browsers supply a button to clear the input when it has a value.

Also see more about styling search inputs responsibly on CSS Tricks' blog.

input[placeholder]

use

html

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.

Per the HTML specification:

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. The placeholder attribute should not be used as an alternative to a label.

A properly implemented form should have labels and any placeholders should be supplementary. As such, they are not required for successful completion of a form and use of a polyfill is often unwarranted.

Recommended polyfills:

Placeholder jQuery Plugin

gtie9

JSON

use with polyfill

js

JSON is a language-independent data interchange format based on a loose subset of the JavaScript grammar. Originally popularized by Douglas Crockford, the format was standardized in the fifth edition of the ECMAScript specification.

JSON 3 is a polyfill compatible with nearly all JavaScript platforms. It is a drop-in replacement for JSON 2 that uses feature tests to detect broken and incomplete native JSON implementations, supports asynchronous module loaders and has-aware optimizers, and is built to specification standards.

JSON 2 is an older, alternative polyfill by Douglas Crockford.

Recommended polyfills:

json2.js, JSON 3

gtie7 polyfill

localStorage

caution with polyfill

api

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.

As part of keeping things simple, localStorage has a synchronous API that runs on the main UI thread in browsers; as a consequence of that, a race condition can occur if a user has the same site open in multiple windows or tabs running as separate processes. For many applications, that’s never really a problem in practice. But it can cause data corruption—so applications where it’s important to try to ensure that absolutely no data corruption can occur should instead use a more robust storage mechanism such as IndexedDB.

Due to the shortcomings of localStorage, there are calls to stop advocating for and building examples that use it.

gtie7 polyfill

masks

caution

css

For several years, CSS Masks were a WebKit exclusive. However, they have recently been resuscitated, with the W3C recently publishing a new Masks Working Draft. Support currently remains limited to WebKit browsers, and SVG-based fallbacks do not work in IE 10, so it is premature to use this feature in production.

none

matchMedia

use with polyfill

api

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.

polyfill

media queries

use

css

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 but be aware it has performance overhead that slows down page load.

If you choose a mobile first approach, you'll be targeting smallest screens first, then the different media queries will take effect as the window/device size increases. But if the browser doesn't support media queries and you don't use a polyfill, then the 'mobile first' styles will be applied to OldIE. You can serve a separate stylesheet for IE to help with this.

gtie8

<menu>

use with polyfill

html

Firefox has native support for context menus, and using the below polyfill other browsers will be able to do the same.

Recommended polyfills:

contextMenu

polyfill noie nomobile

Microdata DOM API

use with polyfill

API

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 Firefox 16+.

IE6+ support can be done using this ES5/DOM shim

Recommended polyfills:

microdata shim

polyfill ie6 gtie6

min/max-width/height

use

css

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.

gtie6

multicolumn

use

css

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.

prefixes gtie9 columns

multiple backgrounds

use with fallback

css

Multiple backgrounds will be completely ignored when they aren't supported. If you can use a simple background color, make sure to declare background-color: <color> on the element before declaring your 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.

fallback gtie8

offline

caution with fallback

html

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.

fallback gtie9

opacity

use

css

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.

gtie8

paged media

avoid

css

This specification is actively under development and thus still in flux. We recommend you wait until it has matured, and multiple implementations are available.

none

pointer events

use with fallback

css

Pointer events are available in SVG and CSS. All modern browsers support them in SVG and CSS.

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.

fallback gtie10

pseudo elements

use

css

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.

none

regions

avoid

css

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.

none

rem unit

use with fallback

css

The css rem unit is calculated relative to font size, but based on the root element (usually <html>) instead of the element's parent. For a detailed comparison of em, px, and rem, see this post by Johnathan Snook.

rem has wide browser support & is recommended for use with an easily-calculated pixel fallback.

fallback gtie8

requestAnimationFrame

use with polyfill

api

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.

Recommended polyfills:

requestAnimationFrame polyfill

polyfill gtie9

selectors

use with fallback

css

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.

When you sunset IE6 support, you can use:

  • tr > td : Immediate descendant (child) selector.
  • dt + dd : next sibling selector*
  • dt ~ dd : any following sibling
  • div[attr] and img[src$=png] : Attribute selector (starts with, ends with, contains).
  • p:first-child*
  • div:hover and :hover state on all non-<a>'s
  • li.food.vegetable : without worrying about the chained classes bug

* IE7-8 don't update styles properly when elements are manipulated with JS. Usually you have to force the browser to redraw (e.g. hide and show parent element).

When you sunset IE7 support, you can use:

  • :before, :after and generated content
  • :focus for elements with current focus
  • :lang(C) which targets an element based on language

When you sunset IE8 support, you can use:

  • These very useful selectors: :nth-child(n), :last-child, :target, :not(s), :enabled, :disabled, :checked, ::selection
  • These ones, too: :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, :empty
fallback gtie6

@supports

caution

css

Feature detection has always been a good practice, but unfortunately we could only do that kind of thing using JavaScript. But not anymore.

CSS Feature Queries allow authors to condition rules based on whether particular property declarations are supported in CSS using the @supports at rule.

For now it's available in FF 22+, Opera 12.1+, and Chrome 28+.

<svg>

use with polyfill

svg

SVG 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 an SVG and DOM library for data visualization.

Recommended polyfills:

SVGWeb

gtie8 polyfill

text-overflow

use

css

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.

none

text-shadow

use

css

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.

gtie9

text-stroke

avoid

css

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.

none

<track>

use with polyfill

html

The <track> element provides a mechanism of showing captions/subtitles and/or associated metadata with <audio> or <video>. The file format the <track> element uses is called WebVTT. Browser support for both is in progress: complete in IE10pp4, ongoing in Webkit, unknown in Opera. A polyfill is a wise choice; Captionator is the most complete and well supported. More at Sylvia Pfeiffer's blog.

Recommended polyfills:

captionator.js

polyfill gtie9 webvtt

transforms

use with fallback

css

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.

fallback prefixes

transitions

use with fallback

css

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

fallback prefixes

Vibration

caution

api

Vibration enables web apps access to a supporting device's force feedback motor.

The Vibration API is specifically targetted towards the gaming use case, and not intended for activities such as notifications or alerts on a user's mobile phone for example.

Being a mobile-based feature, the unprefixed feature is supported in Firefox for Android, Firefox OS, Chromium 32, and so in Chrome 32+ on Android and Opera 20+ on Android. Safari Mobile and IE mobile do not support it yet.

none

<video>

use with polyfill

html

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 the above polyfill 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.

Recommended polyfills:

mediaelementjs

polyfill gtie8

Viewport units (vh, vw, vmin, vmax)

caution with fallback

css

Viewport units allow elements to be sized proportionally to the browser's viewport, providing a css replacement for sizing commonly implemented with javascript. A vh is 1/100th of the viewport's height, a vw is 1/100th of the viewport's width, and vmin and vmax are 1/100th of whichever dimension is smaller or larger, respectively.

IE9 supports vh, vw, and vm instead of vmin for box and border measurements, but won't size text with viewport units.

Safari on recent iOS versions (6 and 7) has issues with viewport units where entire page width/height is used for relative unit calculation instead of just viewport width/height as described above (and in the specification). This causes serious issues under certain circumstances and severely limits the use of viewport units, particularly vh.

Depending on the design, it's sometimes possible to gracefully degrade viewport units with approximate fallbacks. Javascript polyfills like vminpoly exist, but aren't recommended on production sites.

fallback gtie9

Web Components

caution with polyfill

api

The Web Components API is a collection of four different specs from the W3C designed to work together:

  • HTML Templates, a native templating system which allows reusable html code using the new <template> tag

  • Custom Elements, which allows authors to define and use custom html elements

  • Shadow DOM allows authors to create an independent new DOM tree nested inside another DOM tree

  • HTML Imports, which allows authors to embed HTML documents in other HTML files, using the <link rel=import> element

Taken together, these proposed specs have the potential to bring huge enhancements to our web development toolkit, but the specs are very immature and currently undergoing rapid iteration. At present, experimental support is available in Chrome Canary and Firefox Nightly. However, given the potential benefits Web Components bring to the table, it might be a good idea to start experimenting with the APIs now, and help get constructive feedback and tests back to the spec writers.

Polymer is working on a set of polyfills designed to fill any gaps in browser support as Web Components are rolled out. It's still in pre-alpha, and should only be used in testing environments, but if it matures at a healthy rate the project could give us the opportunity to roll Web Components into the wild while the specs are still in draft.

Another view of the status of Web Components is available here:

Recommended polyfills:

Polymer

polyfill

Web Workers

use with fallback

api

Web Workers can parallelize computationally heavy operations, freeing up the UI thread to respond to user input.

For browsers that do not support web workers, depending on your use case, you may choose not to offer the feature that web workers provide or to chunk it up and put it on the UI thread.

fallback gtie9

WebP

caution

html

WebP is an image format that's designed to be provide high quality photographic imagery through smaller filesizes than JPEG. It's supported natively in Chrome, Android, and Opera.

WebP alpha support is available in Chrome 22 (along with lossless). You can detect alpha support with a onload/onerror handlers.

For now, Modernizr detects WebP support and you can manage your own fallback to jpeg.

Recommended polyfills:

WebPJS

WebSockets

caution with polyfill

api

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 versions of Firefox before 11, the prefixed MozWebSocket should be used.

The protocol backing the Web Socket API has become an IETF standard, but Safari did not implement that version until Safari 6. To support Safari 5, the WebSocket server needs to support both -76 and the RFC6455 versions, or you can use Flash or Java sockets (if available).

The -76 version has a possible security problem for users behind buggy transparent proxies. The same security problem exists with Flash sockets and Java sockets. None of these options are recommended.

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

Recommended polyfills:

web-socket-js

polyfill prefixes

No items met your search =(