CSS Animations are still in a flux. The Working Group has decided to provide a universal animation spec that would work across CSS, SVG and HTML. For now, use animations for providing additional glamour and use feature detection to provide alternative experience on browsers that do not support this feature for critical animations.
CSS Animations are still in a flux. The Working Group has decided to provide a universal animation spec that would work across CSS, SVG and HTML. For now, use animations for providing additional glamour and use feature detection to provide alternative experience on browsers that do not support this feature for critical animations.
++ + + View browser share % + + + Edit this info +
As with video, you need to provide your audio file in multiple formats for these to work—you'll need Ogg and AAC. jPlayer has a jQuery dependency. Sound Manager has an extensive API for further customization.
As with video, you need to provide your audio file in multiple formats for these to work—you'll need Ogg and AAC. jPlayer has a jQuery dependency. Sound Manager has an extensive API for further customization.
++ + + View browser share % + + + Edit this info +
Make sure to use all the right prefixes (-o-, -webkit, -ms-, -moz-); additionally, border-image.com may help. You should let this fallback to either a normal solid border or no border at all (depending on whether a border is essential for readability). We recommend you avoid polyfills.
Make sure to use all the right prefixes (-o-, -webkit, -ms-, -moz-); additionally, border-image.com may help. You should let this fallback to either a normal solid border or no border at all (depending on whether a border is essential for readability). We recommend you avoid polyfills.
+ + + View browser share % + + + Edit this info +
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.
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.
+ + + View browser share % + + + Edit this info +
Box reflection has never been a CSS3 spec. Parts of what you can do with box-reflection would be possible to do with CSS3 filters. Till then, please avoid using webkit only reflection. Also, as a designer you deserve better.
Box reflection has never been a CSS3 spec. Parts of what you can do with box-reflection would be possible to do with CSS3 filters. Till then, please avoid using webkit only reflection. Also, as a designer you deserve better.
++ + + View browser share % + + + Edit this info +
Box-shadow is safe to use most of the time, except when you are applying it on a large area, which might cause significant performance hit when the user interacts with your page (on scroll, hover, etc). You do not need a polyfill.
Box-shadow is safe to use most of the time, except when you are applying it on a large area, which might cause significant performance hit when the user interacts with your page (on scroll, hover, etc). You do not need a polyfill.
++ + + View browser share % + + + Edit this info +
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).
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).
+ + + View browser share % + + + Edit this info +
IE 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 use it for experimentation but not for any production use.
IE 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 use it for experimentation but not for any production use.
++ + + View browser share % + + + Edit this info +
Canvas is definitely good to go for modern browsers. If however you're looking to use it in IE 8 and below, use FlashCanvas.
Canvas is definitely good to go for modern browsers. If however you're looking to use it in IE 8 and below, use FlashCanvas.
++ + + View browser share % + + + Edit this info +
Classlist is unsupported in older mobile browsers and IE. This is not a concern if you are using a library like jQuery and using it to add/remove class names, but if not, make sure you use the polyfill.
Classlist is unsupported in older mobile browsers and IE. This is not a concern if you are using a library like jQuery and using it to add/remove class names, but if not, make sure you use the polyfill.
++ + + View browser share % + + + Edit this info +
CORS, or cross-origin resource sharing, enables a few things, but most notably cross-domain AJAX. IE8 introduced XDomainRequest.aspx), so really only IE7 needs help with cross-domain files. Consider the polyfills below or you can fallback to using a simple proxy.
CORS, or cross-origin resource sharing, enables a few things, but most notably cross-domain AJAX. IE8 introduced XDomainRequest.aspx), so really only IE7 needs help with cross-domain files. Consider the polyfills below or you can fallback to using a simple proxy.
+postmessage-proxied-xhr, flXHR (requires crossdomain.xml), pmxdr (requires host installed)
+ + + View browser share % + + + Edit this info +
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.
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.
+ + + View browser share % + + + Edit this info +
Jeremy Keith has a graceful fallback solution that does not use a script.
Jeremy Keith has a graceful fallback solution that does not use a script.
++ + + View browser share % + + + Edit this info +
elem.dataset is unsupported in IE 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.
elem.dataset is unsupported in IE 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.
+ + + View browser share % + + + Edit this info +
Use the details element if you intend to show a summary which when clicked reveals detailed information.
Use the details element if you intend to show a summary which when clicked reveals detailed information.
++ + + View browser share % + + + Edit this info +
Not supported in Opera
Not supported in Opera
++ + + View browser share % + + + Edit this info +
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 not all cases.
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 not all cases.
++ + + View browser share % + + + Edit this info +
EventSource.js provides a base fallback and is not dependent on jQuery.
EventSource.js provides a base fallback and is not dependent on jQuery.
++ + + View browser share % + + + Edit this info +
Exclusions are new and exciting, but again very much in a 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.
Exclusions are new and exciting, but again very much in a 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.
++ + + Learn more + + + Edit this info +
This spec is under active development and as such syntaxes are likely to -change radically before stabilizing. Avoid using this.
This spec is under active development and as such syntaxes are likely to +change radically before stabilizing. Avoid using this.
++ + + Learn more + + + Edit this info +
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.
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.
++ + + View browser share % + + + Edit this info +
IE10 and Firefox 4 support low level control over font feature settings. What this means is other browsers merely will not render the flourishes you seek.
IE10 and Firefox 4 support low level control over font feature settings. What this means is other browsers merely will not render the flourishes you seek.
++ + + Learn more + + + Edit this info +
Use the Font Squirrel Generator for fonts you have license for using as web fonts. Font Squirrel @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.
Use the Font Squirrel Generator for fonts you have license for using as web fonts. Font Squirrel @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.
++ + + View browser share % + + + Edit this info +
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.
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.
++ + + View browser share % + + + Edit this info +
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 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.
We also suggest you drop old webkit syntax and only use the newer syntax for gradient values and not the latest one.
++ + + View browser share % + + + Edit this info +
This is also a spec that is in a flux. Older versions of the spec has found implementation, but you should wait until the spec is more stable to use this.
This is also a spec that is in a flux. Older versions of the spec has found implementation, but you should wait until the spec is more stable to use this.
++ + + View browser share % + + + Edit this info +
History.js has cross-compatibility between HTML5 browser implementations and optional hashchange fallback for HTML4 browsers. PJax (pushState + ajax = pjax) is what is used by Github for their fallback solution.
History.js has cross-compatibility between HTML5 browser implementations and optional hashchange fallback for HTML4 browsers. PJax (pushState + ajax = pjax) is what is used by Github for their fallback solution.
++ + + View browser share % + + + Edit this info +
CSS3 lets you break words using hyphens. As it does not make text unreadable on browsers which do not support this feature, we recommend you use it without any polyfills or fallbacks. CSS Hyphenator is a polyfill that works on browsers that support the soft hyphen.
CSS3 lets you break words using hyphens. As it does not make text unreadable on browsers which do not support this feature, we recommend you use it without any polyfills or fallbacks. CSS Hyphenator is a polyfill that works on browsers that support the soft hyphen.
++ + + View browser share % + + + Edit this info +
Masks are not in a spec and are likely never going to be. Filters might be your path to salvation.
Masks are not in a spec and are likely never going to be. Filters might be your path to salvation.
++ + + Learn more + + + Edit this info +
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 its limited to browsers that support css transitions.
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 its limited to browsers that support css transitions.
++ + + View browser share % + + + Edit this info +
Media Queries work on all modern browsers. 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.
Media Queries work on all modern browsers. 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.
++ + + View browser share % + + + Edit this info +
Do note that this polyfill requires a jQuery dependency.
Do note that this polyfill requires a jQuery dependency.
++ + + View browser share % + + + Edit this info +
+ + + View browser share % + + + Edit this info +
Multiple backgrounds when unsupported are ignored completely. If you can make do with a simple background color, make sure to declare background-color: <color> before you start using multiple backgrounds or 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.
Multiple backgrounds when unsupported are ignored completely. If you can make do with a simple background color, make sure to declare background-color: <color> before you start using multiple backgrounds or 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.
+ + + View browser share % + + + Edit this info +
IE, and Opera support CSS3 Multicol without prefixes. So you only need -webkit and -moz. We recommend you do not polyfill this.
IE, and Opera support CSS3 Multicol without prefixes. So you only need -webkit and -moz. We recommend you do not polyfill this.
+ + + View browser share % + + + Edit this info +
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 enable offline interaction if the page is already open.
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 enable offline interaction if the page is already open.
++ + + View browser share % + + + Edit this info +
Please use that polyfill, as Webkit is the only engine that supports it. -Also see Louis's post about the polyfill.
Please use that polyfill, as Webkit is the only engine that supports it. +Also see Louis's post about the polyfill.
++ + + View browser share % + + + Edit this info +
This spec is actively under development, so we recommend you wait until there are enough implementations around.
This spec is actively under development, so we recommend you wait until there are enough implementations around.
++ + + Learn more + + + Edit this info +
Input placeholders are simply ignored in IE 9 and below. Note that they are only applied when the type of the input is text, search, tel, url, or email. Otherwise, it is ignored.
Input placeholders are simply ignored in IE 9 and below. Note that they are only applied when the type of the input is text, search, tel, url, or email. Otherwise, it is ignored.
++ + + View browser share % + + + Edit this info +
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.
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.
++ + + View browser share % + + + Edit this info +
postMessage is present in IE8 and up, but if you need robust support for cross-frame and cross-domain communication, use EasyXDM
postMessage is present in IE8 and up, but if you need robust support for cross-frame and cross-domain communication, use EasyXDM
+ + + View browser share % + + + Edit this info +
+ + + View browser share % + + + Edit this info +
The pseudo-element notation was updated to use a double colon - :: - in the CSS3 Selectors module. The CSS3 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.
The pseudo-element notation was updated to use a double colon - :: - in the CSS3 Selectors module. The CSS3 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.
+ + + View browser share % + + + Edit this info +
CSS Regions is in active development. As a result, the syntax is in a flux. A polyfill based on an older syntax exists, but we recommend you hold your horses till this spec seems some stability and 3 or more implementations.
CSS Regions is in active development. As a result, the syntax is in a flux. A polyfill based on an older syntax exists, but we recommend you hold your horses till this spec seems some stability and 3 or more implementations.
++ + + View browser share % + + + Edit this info +
If you are using Ruby element you dont need a script-based fallback but you can provide a CSS based set of good defaults.
If you are using Ruby element you dont need a script-based fallback but you can provide a CSS based set of good defaults.
++ + + View browser share % + + + Edit this info +
Scoped CSS is still in active development.
Scoped CSS is still in active development.
++ + + View browser share % + + + Edit this info +
Most CSS Selectors are supported from IE7 onwards, so you should be safe to use. 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.
Most CSS Selectors are supported from IE7 onwards, so you should be safe to use. 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.
+ + + View browser share % + + + Edit this info +
SVG has good support for several years in most browsers except IE. IE9 brings support, which means you can use a polyfill library like SVGWeb or Canvg or create SVG dynamically via RaphaelJS.
SVG has good support for several years in most browsers except IE. IE9 brings support, which means you can use a polyfill library like SVGWeb or Canvg or create SVG dynamically via RaphaelJS.
++ + + View browser share % + + + Edit this info +
Text Overflow is most commonly used for text-overflow: ellipsis. With 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 which we feel is not bad enough to merit a polyfill. However, there is a jQuery plugin in the unlikely event of you needing one.
Text Overflow is most commonly used for text-overflow: ellipsis. With 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 which we feel is not bad enough to merit a polyfill. However, there is a jQuery plugin in the unlikely event of you needing one.
+ + + View browser share % + + + Edit this info +
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.
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.
++ + + View browser share % + + + Edit this info +
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.
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.
+ + + View browser share % + + + Edit this info +
Most of the time, transitions just add to the experience and are not neccessary. 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-).
Most of the time, transitions just add to the experience and are not neccessary. 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-).
+ + + View browser share % + + + Edit this info +
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 Vorbis). Use one of the polyfills below or gracefully handle all cases without any scripting as explained by Kroc Camen in Video for Everybody.
+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 Vorbis). 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, same with audio.
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, same with audio.
++ + + View browser share % + + + Edit this info +
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.
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.
++ + + View browser share % + + + Edit this info +
Making your app real-time is a huge boost and Socket.io helps with downlevel transports for browsers lacking native websocket support (and supports IE6+). However be prepared to tune your AJAX polling or Comet in order to meet the needs of your app.
Making your app real-time is a huge boost and Socket.io helps with downlevel transports for browsers lacking native websocket support (and supports IE6+). However be prepared to tune your AJAX polling or Comet in order to meet the needs of your app.
++ + + View browser share % + + + Edit this info +
Although it found initial favor as a client-side database api, it has -now been abandoned in favor of IndexDB.
Although it found initial favor as a client-side database api, it has +now been abandoned in favor of IndexDB.
++ + + View browser share % + + + Edit this info +
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 immplement and use.
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 immplement 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 5MB is safe to 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 5MB is safe to use.
+ + + View browser share % + + + Edit this info +
+ {{#if moreurl}} + + {{testurl moreurl}} + + {{/if}} + Edit this info +