<audio>

use with polyfill

html

As is the case with video, you can provide your audio in multiple formats. But it’s not necessary if you only target modern browsers. See browser media codec support in 2018, or mdn browser compatibility tables.

A polyfill is only needed for IE8 and below. 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, Sound Manager 2

gtie8 polyfill

background-image options

use with fallback

css

CSS3 background-image options, including background-clip, background-origin and background-size, are well supported. If you have to support old browsers be aware about how the background-image will be displayed without these options.

gtie8 fallback

border-image

use with fallback

css

All main browsers support this unprefixed. 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

border-radius

use

css

border-radius can be safely used without a prefix for all modern browsers, and gracefully renders rectangles when not supported.

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

calc()

use with fallback

css

All browsers support calc() unprefixed, 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 on browsers which don't support it.

width: 500px; /* older browsers */
width: calc(50% - 20px);
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

ContentEditable

use

html

Go for it! Every browser supports the contenteditable attribute. IE already supports this attribute since IE5.5!

none

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 Animations

use

css

Animations are supported unprefixed in every major browser.

In order to provide support for legacy 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.

css filters

caution

css

Filters are supported by Edge 13+ and Firefox 35+ unprefixed, and in Safari 6+, Opera 15+ and Chrome 18+ with the -webkit- prefix.

If you really need full browser support, use Polyfilter which supports/translates to/emulates filters on Chrome 20+, Safari 6+, Firefox 4+, IE 6-9 (but not IE 10+), iOS 6+ Safari and Chrome, and Firefox 4+ on mobile.

Recommended polyfills:

Polyfilter - a CSS Filters Polyfill

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

use with polyfill

html

Use the <details> (and optionally the <summary>) element if you intend to show a summary which, when clicked, reveals detailed information. Currently not supported in any version of Internet Explorer or Edge.

Without polyfill, non-supporting browsers will fall back to displaying the element in the opened state.

Recommended polyfills:

<details> polyfill

polyfill

<dialog>

caution with polyfill

html

The <dialog> element can be used to create popup dialogs or modal dialogs for web applications, and is part of HTML 5.1. In its modal mode, it blocks all access to content behind the front-most dialog.

The majority of Google's polyfill goes towards preventing the browser from gaining focus or accessing content behind the dialog. You should consider that the preventative measures taken by the polyfill are not exhaustive, as they are not implemented natively.

Supported in Chrome 37+ and Opera 24+, tracked for Firefox.

Recommended polyfills:

dialog-polyfill

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 6 (and above)

use with polyfill

js

ECMAScript version 6 was a major update of JavaScript that brought new features and lots of syntactical additions. ES6 was later renamed to ES2015 to reflect the changes in the release cycle. Since 2015 there are yearly releases with smaller feature sets.

ES6 is pretty well supported by the latest browsers. You can check the ES6 compatibility table for details about the latest versions.

If you have to support Internet Explorer or would like to use the latest ECMAScript features you will have to use:

Note:
You should use @babel/polyfill with @babel/preset-env and the useBuiltIns option so that it doesn't include the whole polyfill. Otherwise you can use core-js directly to import just the polyfills you need to receive a better performance due to smaller JavaScript bundle files.

Recommended polyfills:

@babel/polyfill, core-js

polyfill

EventSource (Server-Sent Events)

use with polyfill

api

Server-sent events are real-time events emitted by the server and received by the browser. The main difference to WebSockets is that server-sent events work over regular HTTP and can therefore be replicated entirely using JavaScript.

EventSource isn’t available in any version of Internet Explorer and still under consideration for Edge.

See MDN web docs for more details.

Recommended polyfills:

EventSource polyfill

polyfill

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

Fetch API

use with polyfill

api

The Fetch API is a replacement for the XMLHttpRequest object. It's relatively new and the browser support isn't great at the moment, but GitHub provides a nice polyfill that supports IE9+.

The API is accessible via the global window.fetch function.

Recommended polyfills:

fetch

polyfill

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. Fully supported in Chrome, Firefox, Opera, Safari 6, and IE 10. Partially supported in Safari 5.1 (lacks 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 .
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 https://caniuse.com/#feat=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

fit-content

avoid

css

fit-content is a value of the css attribute width. It is fully supported by Chrome, partial supported by Firefox and Safari and not supported by Edge and Internet Explorer. You should avoid using it since it is not fully supported by any browser except of Chrome.

none

flexbox

use

css

Go for it! CSS Tricks' A Complete Guide to Flexbox provides strong reference documentation for all properties and values. Additionally, the flexbox docs at MDN are an excellent resource.

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 supported by all modern browsers. If you need to support IE 10 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 playground and Flexplorer.

Flexbugs is another valuable resource to discover flexbox issues and cross-browser workarounds.

gtie9

@font-face

use

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. Always reference several font formats; WOFF2 is preferred, followed by WOFF, TTF/OTF. If you have to support outdated browsers (like old versions of IE and iOS Safari), also add EOT and SVG font formats. At CSS-Tricks you find a good article about a bullet-proof way of serving web fonts.

If you have to be aware of loading speed, take a look at A Comprehensive Guide to Font Loading Strategies.

font-feature-settings

use

css

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

Please note that, if you want the best support you can get, you should use the -webkit- and the -moz- prefixes.

More at OpenType features in web browsers

prefixes

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:

hyperform

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 available in Edge (unprefixed); IE11 (-ms-); Firefox 10+ (-moz-); and Chrome 15+, Opera 15+, and Safari 5.1+ (via -webkit-).

screenfull.js is a simple, dependency free wrapper for cross-browser usage of the JavaScript Fullscreen API.

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

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 final syntax for gradient values. If you need deeper support you should use -moz- and -webkit- prefixes with the previous syntax (no to keyword and flipped angles).

fallback prefixes gtie8

grids

caution

css

The CSS Grid Layout specification supersedes several older ones. The feature is implemented in most moderne browsers, other than Opera Mini and partial support in Internet Explorer 10 & 11. An overview can be found at css-tricks.com. Because a somewhat large userbase still is not supported (about 15% according to caniuse.com) we recommend you use this feature with caution.

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.

Hyphenation is supported by Firefox 43+ unprefixed, Edge and IE10+ with the -ms- prefix, Firefox 6–42 with the -moz- prefix, and Safari 5.1+ with the -webkit- prefix. Edge and IE10+ also support finer grained control via the CSS Text Level 4 hyphenation properties.

As there won't be any noticeable effects on browsers which don't support the feature, we recommend that you use it without any polyfills or fallbacks, but be careful when using justified text as it may create rivers of whitespace. 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]

avoid

html

This feature was removed from both the WHATWG and the W3C HTML5 specifications.

none

img[srcset]

use with fallback

html

The srcset attribute for images allows you to specify different resolutions or pixel-density versions of images. Instead of specifying which image to use at each condition (as you might with a media query or with a <picture> element) the browser decides which is the most appropriate version to use and only makes one request for the image.

If you know what size the image will display at, the optional sizes attribute helps the browser to decide the most appropriate image before waiting to reflow the entire DOM first. For example, sizes="100vw" means a full-width image. (Percentage values will not work here, since the browser will have to answer the question "percent of what?", which requires a full DOM reflow.)

All major evergreen browsers now support srcset. Older browsers will fallback to the image specified in the src attribute. Although it is not required, a polyfill is available if you want to bring this functionality to older browsers and Internet Explorer.

Recommended polyfills:

PictureFill

fallback noie

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 started to support it in iOS8.

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>

caution with polyfill

html

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

You should probably avoid this until it has support in Safari or IE.

Recommended polyfills:

Spectrum

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.

It is supported by all major browsers. 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>

use

html

A range input (AKA slider) is supported by all evergreen browsers and Internet Explorer 11. Also it will fall back to a plain text input if it's not supported.

If you have to support Internet Explorer 9 and below you can use freqdec's Input Range Polyfill, rangeslider.js.

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, rangeslider.js

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

Interaction media features

caution with polyfill

css

The Media Queries Level 4 Working Draft adds new media query features for checking whether the user's input mechanisms support hovering (hover and any-hover) and how accurate they are (pointer and any-pointer).

The usage of polyfills is strongly recommended due to the current level of browser support (Edge, Chrome 41+, Opera 28+, and Safari 9 at the time of writing).

mq4-hover-shim provides support in non-bleeding-edge browsers for detecting the primary pointer's ability to hover or not (i.e. the (hover: hover) media query).

Recommended polyfills:

mq4-hover-shim

polyfill

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

use

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.

Recommended polyfills:

Remy’s storage polyfill, sessionstorage

gtie7

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. SVG-based fallbacks do not work in IE 10, so it is premature to use this feature in production.

If you do use it, be sure to include the -webkit- prefix.

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. IE 8 unfortunately does 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, 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 IE 8. 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

<meter>

use with polyfill

html

The <meter> element is supported in all major browsers, including IE10+, so feel free to use it. If you need more robust browser support, there are some polyfills you can consider.

Recommended polyfills:

meter-polyfill, jQuery shim

polyfill

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 Firefox 16+, and pre-Blink versions of Opera.

Recommended polyfills:

microdata shim

polyfill

multicolumn

use

css

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

<picture>

use with fallback

html

The <picture> element allows a designer to explicitly specify the right image to use for different scenarios, similar to using media queries but for image tag sources. The element itself is merely a container; any number of <source> tags inside of <picture> is where all the magic happens. Finally, a required <img> element declares the default image to use if no other conditions are met. Browsers that do not support <picture> will gracefully fallback to this <img> tag, making this safe to use.

All major evergreen browsers support. <picture>. Safari supports it as of version 9.1. For Internet Explorer and older browsers, a polyfill is available, but it is not required.

Recommended polyfills:

PictureFill

fallback noie

pointer events

use with fallback

css

CSS has a pointer-events property and SVG has a pointer-events attribute. 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

position:sticky

caution with polyfill

css

position: sticky combines aspects of relative and fixed positioning. Elements to which it is applied initially act as though they are position: relative, but switch to acting like position: fixed when they reach a specified position relative to the viewport. This behavior is often useful for section headings or navigational sidebars. This Mozilla presentation video shows how position: sticky behaves in common use-cases.

Supported unprefixed in Firefox 30.0+. Supported with a prefix (as -webkit-sticky) in OS X Safari 7.0+ and iOS Safari 6.0+. Currently part of the CSS Positioned Layout Module Level 3 W3C Working Draft.

Caution is advised since the spec is currently only at the Working Draft stage and thus can be subject to change. The usage of a polyfill is strongly recommended due to the current level of browser support. Signs currently seem positive for browser support increasing in the future.

Use Stickyfill for a wide range of use cases with top aligned sticky positioned blocks and table cells.

Recommended polyfills:

Stickyfill

prefixes polyfill

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 a layout module that is deprecated. It is no longer supported by the common browsers like Chrome, Firefox and Safari.

none

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. All major browsers currently support requestAnimationFrame. If you need full browser support, be sure to use the lightweight polyfill.

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 IE8 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 could use Selectivizr.

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

@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. It isn't supported in IE9, but we do not recommend to use a polyfill. Since it's just a property for decorative purposes, 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 recommend 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

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.

If you need full support, you will need to include some prefixes: -webkit- for Safari and -ms- for IE9.

Recommended polyfills:

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

fallback

Vibration

caution

api

The vibration API enables web apps access to a supporting device's force feedback motor.

illyism.com has more info and a number of demos.

Being a mobile-based feature, the feature is supported in Chrome, Firefox and Opera for Android. iOS Safari, Opera Mini 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

Web Components are a collection of standards which are working their way through the W3C:

  • 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. They allow us to bundle markup and styles into custom HTML elements, that means the styles that you write always render as you intended, and your HTML is safe from the prying eyes of external JavaScript.

At present, full support is only available in Chrome and Opera. 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. Check Can I Use or Webcomponents.org for up to date browser support status.

Libraries such as Polymer (from Google) and X-Tag (from Mozilla) are driving the evolution of these specs and makes it easier to create your Web Components.

Recommended polyfills:

webcomponents.js

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

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