Browser compatibility

Alternate rendition of Fyrd's when can I use... page with Wikimedia Mar 2015 browser usage statistics.

featureChromeAndroid BrowserSafariiOSIEFirefoxO.Mini%
featureChromeAndroid BrowserSafariiOSIEFirefoxO.Mini%
css2CSS min/max-width/height

Method of setting a minimum or maximum width or height to an element.

IE7 does not support "inherit" as a value on any of these properties. IE8 has some bugs with max-width/height combined with overflow: auto/scroll.

Resources: JS library with support, WebPlatform Docs, CSS Basics post.
css3CSS3 Text-overflow

Append ellipsis when text overflows its containing element.

Resources: jQuery polyfill for Firefox, MDN article, Information page, has.js test, WebPlatform Docs.
pngPNG alpha transparency

Semi-transparent areas in PNG files.

IE6 does support full transparency in 8-bit PNGs, which can sometimes be an alternative to 24-bit PNGs.

Resources: Wikipedia, Workaround for IE6.
css2CSS 2.1 selectors

Basic CSS selectors including: * (universal selector), > (child selector), :first-child, :link, :visited, :active, :hover, :focus, :lang(), + (adjacent sibling selector), [attr], [attr="val"], [attr~="val"], [attr|="bar"], .foo (class selector), #foo (id selector).

Resources: Detailed support information, Examples of advanced selectors, Selectivizr: Polyfill for IE6-8, WebPlatform Docs.
css2CSS inline-block

Method of displaying an element as a block while flowing it with text.

Only supported in IE6 and IE7 on elements with a display of "inline" by default. Alternative properties are available to provide complete cross-browser support.

Resources: Blog post w/info, Info on cross browser support, WebPlatform Docs.
css2CSS Table display

Method of displaying elements as tables, rows, and cells.

Resources: Blog post on usage.
css2CSS Counters

Method of controlling number values in generated content, using the counter-reset and counter-increment properties.

Resources: Tutorial and information, MDN article, WebPlatform Docs.
jsJSON parsing

Method of converting JavaScript objects to JSON strings and JSON back to objects using JSON.stringify() and JSON.parse().

Requires document to be in IE8+ standards mode to work in IE8.

Resources: MDN article, JSON in JS (includes script w/support), has.js test, WebPlatform Docs.
css3CSS3 Opacity

Method of setting the transparency level of an element.

Transparency for elements in IE8 and older can be achieved using the proprietary "filter" property and does not work well with PNG images using alpha transparency.

Resources: Information page, WebPlatform Docs.
css3CSS3 selectors

Advanced element selection using selectors including: [foo^="bar"], [foo$="bar"], [foo*="bar"], :root, :nth-child(),  :nth-last-child(), nth-of-type, nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :target, :enabled, :disabled, :checked, :not(), ~ (general sibling).

IE7 and IE8 support only these CSS3 selectors: General siblings (element1~element2) and Attribute selectors [attr^=val], [attr$=val], and [attr*=val].

Resources: Detailed support information, Automated CSS3 selector test, Selectivizr: Polyfill for IE6-8, WebPlatform Docs.

Method of accessing DOM elements using CSS selectors.

Browser-specific notes:
#1: Partial support in IE8 is due to being limited to CSS 2.1 selectors. Additionally, it will have trouble with selectors including unrecognized tags (for example HTML5 ones).

Resources: MDN article on querySelector, MDN article on querySelectorAll, Blog post, WebPlatform Docs.
css2CSS Generated content for pseudo-elements

Method of displaying text or images before or after the given element's contents using the ::before and ::after pseudo-elements. All browsers with support also support the attr() notation in the content property.

IE8 only supports the single-colon CSS 2.1 syntax (i.e. :pseudo-class). It does not support the double-colon CSS3 syntax (i.e. ::pseudo-element).

For content to appear in pseudo-elements, the content property must be set (but may be an empty string).

Resources: Guide on usage, Dev.Opera article, WebPlatform Docs.

Method of accessing DOM elements by class name.

Resources: Test page, WebPlatform Docs.
css3CSS3 Media Queries

Method of applying styles based on media information. Includes things like page and device dimensions.

Incomplete support by older webkit browsers refers to only acknowledging different media rules on page reload.

Resources: IE demo page with information, Media Queries tutorial, Polyfill for IE, WebPlatform Docs.
jsWeb Storage - name/value pairs

Method of storing data locally like cookies, but for larger amounts of data (sessionStorage and localStorage, used to fall under HTML5).

Resources: MDN article, Support library, Simple demo, has.js test, WebPlatform Docs.
cssCSS position:fixed

Method of keeping an element in a fixed location regardless of scroll position.

Only works in Android 2.2+ by using the following meta tag: <meta name="viewport" content="width=device-width, user-scalable=no">.

Partial support in older iOS Safari refers to buggy behavior.

Resources: Workaround for IE6, Article on mobile support, WebPlatform Docs.
html5Hashchange event

Event triggered in JavaScript when the URL's hash has changed (for example: page.html#foo to page.html#bar).

Resources: MDN article, MSDN article, Simple demo, Polyfill, WebPlatform Docs.
css2CSS outline

The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.

Browser-specific notes:
#1: Also supports the value of invert for outline-color. (support of this value is optional for browsers).

Resources: CSS Basic User Interface Module Level 3, Mozilla Developer Network: outline.
html5contenteditable attribute (basic support)

Method of making any HTML element editable.

This support only refers to very basic editing capability, implementations vary significantly on how certain elements can be edited.

Resources: Demo page, WHATWG blog post, Blog post on usage problems, WebPlatform Docs.
otherXHTML served as application/xhtml+xml

A strict form of HTML, and allows embedding of other XML languages.

The XHTML syntax is very close to HTML, and thus is almost always (incorrectly) served as text/html on the web.

Resources: Wikipedia, Information on XHTML5, WebPlatform Docs.

JavaScript event that fires when the DOM is loaded, but before all page assets are loaded (CSS, images, etc.).

Resources: MDN: DOMContentLoaded.
cssCSS currentColor value

A CSS value that will apply the existing color value to other properties like background-color, etc.

Resources: MDN article, CSS Tricks article.
css3CSS3 Colors

Method of describing colors using Hue, Saturation and Lightness (hsl()) rather than just RGB, as well as allowing alpha-transparency with rgba() and hsla().

Resources: Dev.Opera article, Information page, WebPlatform Docs.
css3CSS3 Multiple backgrounds

Method of using multiple images as a background.

Resources: Demo & information page, Information page, WebPlatform Docs.
css3rem (root em) units

Type of unit similar to "em", but relative only to the root element, not any parent element. Thus compounding does not occur as it does with "em" units.

Resources: Article on usage, REM Polyfill.
html5New semantic elements

HTML5 offers some new elements, primarily for semantic purposes. The elements include: section, article, aside, header, footer, nav, figure, figcaption, time, mark, main.

Partial support refers to missing the default styling. This is easily taken care of by using display:block for all new elements (except time and mark, these should be display:inline anyway). IE11 and older versions of other browsers do not support the <main> element.

Browser-specific notes:
#1: Does not include support for the <main> element.

Resources: Workaround for IE, Alternate workaround, Article on structural elements, has.js test.
canvasCanvas (basic support)

Method of generating fast, dynamic graphics using JavaScript.

Opera Mini supports the canvas element, but is unable to play animations or run other more complex applications. Android 2.x supports canvas except the toDataURL() function. See Some (slow) workarounds are described here:

Resources: Tutorial by Mozilla, Showcase site, Animation kit , Another tutorial, Implementation for Internet Explorer, has.js test.
css3@font-face Web fonts

Method of displaying fonts downloaded from websites.

Partial support before IE9 refers to only supporting EOT fonts. Safari for iOS 4.1 and below only supports SVG fonts.

Resources: News and information site, Wikipedia, Information page, WebPlatform Docs.
html5Inline SVG in HTML5

Method of using SVG tags directly in HTML documents. Requires HTML5 parser.

Resources: Mozilla Hacks blog post, Test suite.
canvasText API for Canvas

Method of displaying text on Canvas elements.

Resources: Examples by Mozilla, Support library, has.js test, WebPlatform Docs.
Parent feature: Canvas (basic support).

Method of informing a website of the user's geographical location.

Resources: Simple demo, has.js test, WebPlatform Docs.
svgSVG in HTML img element

Method of displaying SVG images in HTML using <img>.

Resources: Blog post with examples, Blog with SVGs an images.

API to get the current computed CSS styles applied to an element. This may be the current value applied by an animation or as set by a stylesheet.

Partial support in older Firefox versions refers to requiring the second parameter to be included.

Partial support in all other browsers refers to not supporting getComputedStyle on pseudo-elements.

Resources: MDN article, Demo, Polyfill for IE, WebPlatform Docs.
css3CSS3 Border-radius (rounded corners)

Method of making the border corners round.

Browser-specific notes:
#1: Safari 6.1 and earlier did not apply border-radius correctly to image borders:

Resources: Border-radius CSS Generator, Detailed compliance table, Information page, Polyfill which includes border-radius, WebPlatform Docs.
html5dataset & data-* attributes

Method of applying and accessing custom data to elements.

Partial support refers to being able to use data-* attributes and access them using getAttribute.

"Supported" refers to accessing the values using the dataset property. Current spec only refers to support on HTML elements, only some browsers also have support for SVG/MathML elements.

Resources: HTML5 Doctor article, Demo using dataset, has.js test, WebPlatform Docs, MDN Reference - dataset, MDN Guide - Using data-* attributes.
jsCross-Origin Resource Sharing

Method of performing XMLHttpRequests across domains.

Supported somewhat in IE8 and IE9 using the XDomainRequest object (but has limitations).

Resources: Mozilla Hacks blog post, Alternative implementation by IE8, DOM access using CORS, has.js test.
html5Video element

Method of playing videos on webpages (without requiring a plug-in).

Different browsers have support for different video formats, see sub-features for details.

The Android browser (before 2.3) requires specific handling to run the video element.

Resources: Detailed article on video/audio elements, WebM format information, Video for Everybody, Video on the Web - includes info on Android support, has.js test, WebPlatform Docs.
jsBase64 encoding and decoding

Utility functions for of encoding and decoding strings to and from base 64: window.atob() and window.btoa().

Resources: MDN article on btoa(), MDN article on atob(), Polyfill.
html5Audio elementls4‒442.3‒374‒84.0‒8.15.5‒89‒TP3.5‒395.095
css3CSS3 Box-shadow

Method of displaying an inner or outer shadow effect to elements.

Can be partially emulated in older IE versions using the non-standard "shadow" filter. Partial support in Safari, iOS Safari and Android Browser refers to missing "inset" and blur radius value support.

Resources: MDN article, Live editor, Demo of various effects, Information page, WebPlatform Docs.
css3SVG in CSS backgrounds

Method of using SVG images as CSS backgrounds.

Partial support in older Firefox and Opera Mini/Mobile refers to SVG images being blurry when scaled. Partial support in iOS Safari and older Safari versions refers to failing to support tiling or the background-position property.

Resources: Tutorial for advanced effects.
css3CSS3 Text-shadow

Method of applying one or more shadow or blur effects to text.

Opera Mini ignores the blur-radius set, so no blur effect is visible. Text-shadow behavior can be somewhat emulated in older IE versions using the non-standard "dropshadow" or "glow" filters.

Browser-specific notes:
#1: IE 10+ supports a fourth length value for the shadow's "spread". This is not (yet) part of the specification.

Resources: Mozilla hacks article, Live editor, Information page, WebPlatform Docs.
html5Offline web applications

Method of defining web page files to be cached using a cache manifest file, allowing them to work offline on subsequent visits to the page.

Resources: Sitepoint tutorial, Dive Into HTML5 article, Mozilla Hacks article/demo, WebPlatform Docs.
domdefer attribute for external scripts

The boolean defer attribute on script elements allows the external JavaScript file to run when the DOM is loaded, without delaying page load first.

Partial support in older IE refers to a buggy implementation (see issue).

Resources: MDN article, has.js test, WebPlatform Docs.
domclassList (DOMTokenList )

Method of easily manipulating classes on elements, using the DOMTokenList object.

Resources: Mozilla Hacks article, Polyfill script, WebPlatform Docs, SitePoint article, Demo using classList, MDN article.
css3CSS3 Transforms

Method of transforming an element including rotating, scaling, etc.

The scale transform can be emulated in IE < 9 using Microsoft's "zoom" extension, others are (not easily) possible using the MS Matrix filter.

Resources: Live editor, MDN article, Workaround script for IE, Information page, Converter for IE, has.js test, WebPlatform Docs.
html5hidden attribute

The hidden attribute may be applied to any element, and effectively hides elements similar to display: none in CSS.

The hidden state can be easily overridden with a CSS display property set to anything other than none.

Resources: Article on hidden attribute.
otherData URIs

Method of embedding images and other files in webpages as a string of text.

Support in Internet Explorer 8 is limited to images and linked resources like CSS files, not HTML files. Max URI length in IE8 is 32KB. In IE9+ JavaScript files are supported too and the maximum size limit set to 4GB.

Resources: Information page, Wikipedia, Data URL converter, Information on security issues.
jsCross-document messaging

Method of sending information from a page on one domain to a page on a different one (using postMessage).

Partial support in IE8-9 refers to only working in frames/iframes (not other tabs/windows). Also in IE 9 and below an object cannot be sent using postMessage. Partial support in IE10 refers to limitations in certain conditions.

Resources: MDN article, Simple demo, has.js test, WebPlatform Docs.
domXMLHttpRequest 2

Adds more functionality to AJAX requests like file uploads, transfer progress information and the ability to send form data.

Resources: MDN article on FormData, Polyfill for FormData object, WebPlatform Docs.
css3CSS3 Transitions

Simple method of animating certain properties of an element.

Resources: Article on usage, Information page, Examples on timing functions, Animation of property types support in Opera, WebPlatform Docs.

API for finding out whether or not a media query applies to the document.

Resources: matchMedia.js polyfill, MDN article, MDN tutorial, WebPlatform Docs.
jsFileReader API

Method of reading the contents of a File or Blob object into memory.

Resources: FileReader API, WebPlatform Docs.
Parent feature: File API.
html5sandbox attribute for iframes

Method of running external site pages with reduced privileges (e.g. no JavaScript) in iframes.

Resources: Chromium blog article, MSDN article, WebPlatform Docs.
svgSVG (basic support)

Method of displaying basic Vector Graphics features using the embed or object elements. Refers to the SVG 1.1 spec.

Browser-specific notes:
#1: Partial support in Android 3 & 4 refers to not supporting masking.
#2: IE9-11 desktop & mobile don't properly scale SVG files.  Adding height, width, viewBox, and CSS rules seem to be the best workaround.

Resources: Wikipedia, A List Apart article, SVG showcase site, SVG Web: Flash-based polyfill, Web-based SVG editor, has.js test.
otherECMAScript 5 Strict Mode

Method of placing code in a "strict" operating context.

Partial support in older Safari refers to strict mode still accepting a lot of JS that should be considered invalid.

Resources: Information page, Article with test suite.
css3CSS Gradients

Method of defining a linear or radial color gradient as a CSS image.

Syntax used by browsers with prefixed support may be incompatible with that for proper support.

Partial support in Opera 11.10 and 11.50 also refers to only having support for linear gradients.

Support can be somewhat emulated in older IE versions using the non-standard "gradient" filter.

Firefox 10+, Opera 11.6+, Chrome 26+ and IE10+ also support the new "to (side)" syntax.

Resources: Cross-browser editor, Information page, Tool to emulate support in IE, WebPlatform Docs.
domasync attribute for external scripts

The boolean async attribute on script elements allows the external JavaScript file to run when it's available, without delaying page load first.

Using script.async = false; to maintain execution order for dynamically-added scripts isn't supported in Safari 5.0.

Resources: MDN article, Demo, has.js test.
css3CSS pointer-events (for HTML)

This CSS property, when set to "none" allows elements to not receive hover/click events, instead the event will occur on anything behind it.

Already part of the SVG specification, and all SVG-supporting browsers appear to support the property on SVG elements.

Resources: Article & tutorial, has.js test.
jsTyped Arrays

JavaScript typed arrays provide a mechanism for accessing raw binary data much more efficiently.

Browser-specific notes:
#1: IE10 (and IE 10&11 mobile) does not support Uint8ClampedArray.

Resources: MDN article.
html5input placeholder attribute

Method of setting placeholder text for text-like input fields, to suggest the expected inserted information.

Partial support in older Safari and Opera versions refers to lacking placeholder support on textarea elements.

Resources: Article on usage, Polyfill, has.js test, WebPlatform Docs, Issue 24626: Placeholder text for an input type=.
Parent feature: HTML5 form features.
css3CSS Repeating Gradients

Method of defining a repeating linear or radial color gradient as a CSS image.

Firefox 10+, Chrome 26+ and Opera 11.6+ also support the new "to (side)" syntax.

Resources: MDN article, Information page, WebPlatform Docs.
Parent feature: CSS Gradients.
html5Autofocus attribute

Allows a form field to be immediately focused on page load.

While not supported in iOS Safari, it does work in iOS WebViews.

Resources: Article on autofocus.
css3CSS3 Background-image options

New properties to affect background images, including background-clip, background-origin and background-size.

Browser-specific notes:
#1: Partial support in Opera Mini refers to not supporting background sizing or background attachments. However Opera Mini 7.5 supports background sizing (including cover and contain values).
#2: Partial support in Safari 6 refers to not supporting background sizing offset from edges syntax.
#3: Does not support background-size values in the background shorthand.

Resources: Detailed compatibility tables and demos, Information page, Polyfill for IE7-8.
html5Range input type

Form field type that allows the user to select a value using a slider widget.

Currently all Android browsers with partial support hide the slider input field by default. However, the element can be styled to be made visible and usable.

Resources: Polyfill for Firefox, Cross-browser polyfill, Tutorial, has.js test, WebPlatform Docs, rangeslider.js polyfill.
Parent feature: HTML5 form features.
jsBlob URLs

Method of creating URL handles to the specified File or Blob object.

Resources: MDN article.
Parent feature: File API.
css3TTF/OTF - TrueType and OpenType font support

Support for the TrueType (.ttf)and OpenType (.otf) outline font formats in @font-face.

Partial support in IE9 refers to the fonts only working when set to be "installable".

Resources: What is the status of TTF support in Internet Explorer?.
Parent feature: @font-face Web fonts.
domDOM Parsing and Serialization

Various DOM parsing and serializing functions, specifically DOMParser, XMLSerializer, innerHTML, outerHTML and adjacentHTML.

Browser-specific notes:
#1: Partial support refers to lacking support for parseFromString on the DOMParser.
#2: Partial support in older IE refers to only supporting innerHTML, nothing else.

Resources: MDN - XMLSerializer.
html5Session history management

Method of manipulating the user's browser's session history in JavaScript using history.pushState, history.replaceState and the popstate event.

Older iOS versions and Android 4.0.4 claim support, but implementation is too buggy to be useful.

Resources: Introduction to history management, MDN article, Demo page, History.js polyfill , has.js test, WebPlatform Docs.
jsOnline/offline status

Events to indicate when the user's connected (online and offline events) and the navigator.onLine property to see current status.

"online" does not always mean connection to the internet, it can also just mean connection to some network.

Early versions of Chrome and Safari always reported "true" for navigator.onLine.

Browser-specific notes:
#1: Seems to support navigator.onLine but not online/offline events.
#2: IE8 only supports the online/offline events on document.body, rather than window.
#3: Desktop Firefox responds to the status of its "Work Offline" mode. If not in that mode, navigator.onLine is always true, regardless of the actual network connectivity status.

Resources: MDN article.
css3Flexible Box Layout Module

Method of positioning elements in horizontal or vertical stacks. Support includes the support for the all properties prefixed with flex as well as align-content, align-items, align-self, and justify-content.

Most partial support refers to supporting an older version of the specification or an older syntax.

Browser-specific notes:
#1: Only supports the old flexbox specification and does not support wrapping.
#2: Only supports the 2012 syntax.
#3: Does not support flex-wrap or flex-flow properties.

Resources: Flexbox CSS generator, Article on using the latest spec, Tutorial on cross-browser support, Examples on how to solve common layout problems with flexbox, A Complete Guide to Flexbox, Flexbox playground and code generator.
otherMPEG-4/H.264 video format

Commonly used video compression format (not royalty-free).

The Android 2.3 browser currently requires specific handling to play videos.

Firefox supports H.264 on Windows 7 and later since version 21. Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed.

Partial support for Firefox refers to the lack of support in OSX & some Linux platforms, for Android Firefox it refers to the inability of hardware acceleration.

Resources: Wikipedia article, Firefox extension allowing support in Win7.
Parent feature: Video element.
jsFile API

Method of manipulating file objects in web applications client-side, as well as programmatically selecting them and accessing their data.

Partial support in older Safari and other WebKit browsers refers to lacking FileReader support.

Resources: MDN article, WebPlatform Docs, Polyfill.
css3CSS3 Border images

Method of using images for borders.

Note that both the border-style and border-width must be specified for border-images to work according to spec, though older implementations may not have this requirement. Partial support refers to supporting the shorthand syntax, but not the individual properties (border-image-source, border-image-slice, etc).

Resources: Information page, WebPlatform Docs.
css3CSS3 Animation

Complex method of animating certain properties of an element.

Partial support in Android browser refers to buggy behavior in different scenarios.

Resources: Blog post on usage, Information page, WebPlatform Docs.
svgSVG SMIL animation

Method of using animation elements to animate SVG images.

Partial support in Safari refers to not working in HTML files.

Resources: Examples on SVG WOW, MDN article, JS library to support SMIL in SVG, has.js test, Polyfill for SMIL animate events on SVG.
css3CSS background-position edge offsets

Allows CSS background images to be positioned relative to the specified edge using the 3 to 4 value syntax. For example: background-position: right 5px bottom 5px; for positioning 5px from the bottom-right corner.

Resources: MDN article on background-position, Basic information.
otherWOFF - Web Open Font Format

Compressed TrueType/OpenType font that contains information about the font's source.

Reported to be supported in some modified versions of the Android 4.0 browser.

Resources: Mozilla hacks blog post.
Parent feature: @font-face Web fonts.
svgSVG filters

Method of using photoshop-like effects on SVG objects including blurring and color manipulation.

Resources: Experiments with filter effects, SVG filter demos, WebPlatform Docs.
cssCSS user-select: none

Method of preventing text/element selection using CSS.

Currently the user-select property does not appear in any W3C specification. Support information here is only for "none" value, not others.

Resources: MDN article, CSS Tricks article, MSDN Documentation.
jsWeb Workers

Method of running scripts in the background, isolated from the web page.

Resources: MDN article, Web Worker demo, Polyfill for IE (single threaded), Tutorial.
otherHTTP/2 protocol / SPDY

Networking protocol for low-latency transport of content over the web. Originally started out from the SPDY protocol, now standardized as HTTP version 2.

Resources: Wikipedia, SPDY whitepaper.
css3CSS3 3D Transforms

Method of transforming an element in the third dimension using the transform property. Includes support for the perspective property to set the perspective in z-space and the backface-visibility property to toggle display of the reverse side of a 3D-transformed element.

Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.

Resources: Multi-browser demo, Mozilla hacks article, 3D CSS Tester, has.js test, WebPlatform Docs, Intro to CSS 3D transforms.
html5Spellcheck attribute

Attribute for input/textarea fields to enable/disable the browser's spellchecker.

The partial support in mobile browsers results from their OS generally having built-in spell checking instead of using the wavy underline to indicate misspelled words. spellcheck="false" does not seem to have any effect in these browsers.

Resources: MDN article.
css::selection CSS pseudo-element

The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g., selected with the mouse or another pointing device) by the user.

Resources: ::selection test, WebPlatform Docs.
cssImproved kerning pairs & ligatures

Currently non-standard method of improving kerning pairs & ligatures using text-rendering: optimizeLegibility.

Resources: MDN article, CSS Tricks article.
jsWeb Sockets

Bidirectional communication technology for web apps.

Browser-specific notes:
#1: Partial support refers to the websockets implementation using an older version of the protocol and/or the implementation being disabled by default (due to security issues with the older protocol).
#2: Partial support refers to lacking support for binary data.

Resources: WebSockets information, Details on newer protocol, Wikipedia, has.js test, WebPlatform Docs.
cssMedia Queries: resolution feature

Allows a media query to be set based on the device pixels used per CSS unit. While the standard uses min/max-resolution for this, some browsers support the older non-standard device-pixel-ratio media query.

Browser-specific notes:
#1: Supports the dpi unit, but does not support dppx or dpcm units.
#2: Supports the dpi and dppx units, but does not support dpcm units.
#3: Firefox before 16 supports only dpi unit, but you can set 2dppx per min--moz-device-pixel-ratio: 2.
#4: Supporte the non-standard min/max-device-pixel-ratio.

Resources: How to unprefix -webkit-device-pixel-ratio.
Parent feature: CSS3 Media Queries.
domMutation Observer

Method for observing and reacting to changes to the DOM. Replaces MutationEvents, which is deprecated.

When the content of a node with a single CharacterData child node is changed by innerHTML attribute and the node have a single different one as a result, WebKit browsers consider it as a characterData mutation of the child CharacterData node, while other browsers think it as a childList mutation of the parent node.

Resources: MutationObserver from MDN, Polyfill.
jsBlob constructing

Construct Blobs (binary large objects) either using the BlobBuilder API (deprecated) or the Blob constructor.

Partial support refers to only supporting the now deprecated BlobBuilder to create blobs.

Resources: MDN article on BlobBuilder, MDN article on Blobs.
Parent feature: File API.

API allowing a more efficient way of running script-based animation, compared to traditional methods using timeouts.

Resources: Blog post, Mozilla Hacks article, WebPlatform Docs.
jsPage Visibility

JavaScript API for determining whether a document is visible on the display.

Resources: MDN article, WebPlatform Docs, SitePoint article, Demo.
otherWebVTT - Web Video Text Tracks

Format for marking up text captions for multimedia resources.

WebVTT must be used with the <track> element.

Firefox currently lacks support for the ::cue pseudo-element.

Resources: Getting Started With the Track Element, An Introduction to WebVTT and track.
Parent feature: Video element.
css3CSS3 Overflow-wrap

Allows lines to be broken within words if an otherwise unbreakable string is too long to fit. Currently mostly supported using the word-wrap property.

Partial support refers to requiring the legacy name "word-wrap" (rather than overflow-wrap) to work.

Resources: MDN article, Information page, WebPlatform Docs.

Method of generating cryptographically random values.

Resources: MDN article.
cssCSS background-attachment

Method of defining how a background image is attached to a scrollable element. Values include scroll (default), fixed and local.

Most mobile devices have a delay in updating the background position after scrolling a page with fixed backgrounds.

Browser-specific notes:
#1: Partial support refers to supporting fixed but not local.
#2: Partial support refers to supporting local but not fixed.

Resources: MDN article.
jsHigh Resolution Time API

Method to provide the current time in sub-millisecond resolution and such that it is not subject to system clock skew or adjustments. Called using

Resources: MDN article, HTML5Rocks article, SitePoint article, Demo.

Method of storing data client-side, allows indexed database queries.

Browser-specific notes:
#1: Partial support in IE 10 & 11 refers to a number of subfeatures not being supported.
#2: Partial support in iOS 8 refers to seriously buggy behavior.

Resources: Mozilla Hacks article, Polyfill for browsers supporting WebSQL, has.js test, WebPlatform Docs.
html5Progress & Meter

Method of indicating a progress state (progress element) or the current level of a gauge (meter element).

Partial support in Firefox 6-15, IE10 & iOS7 Safari refers to supporting the progress element, but not the meter element. iOS7 Safari also does not support "indeterminate" progress elements.

For styling progress bars, see this article.

Resources: Dev.Opera article, HTML5 Doctor on meter element, Examples of progress and meter elements, WebPlatform Docs.
Parent feature: HTML5 form features.
otherContent Security Policy 1.0

Mitigate cross-site scripting attacks by whitelisting allowed sources of script, style, and other resources.

The standard HTTP header is Content-Security-Policy which is used unless otherwise noted.

Browser-specific notes:
#1: Supported through the X-Content-Security-Policy header.
#2: Supported through the X-Webkit-CSP header.

Resources: HTML5Rocks article, CSP Examples & Quick Reference.
css3Viewport units: vw, vh, vmin, vmax

Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

Partial support in IE9 refers to supporting "vm" instead of "vmin".

Partial support in iOS7 is due to buggy behavior of the "vh" unit (see workaround).

All other partial support refers to not supporting the "vmax" unit.

Resources: Blog post, Polyfill, Buggyfill - Polyfill that fixes buggy support, Back-Forward issue blog post.
css3calc() as CSS unit value

Method of allowing calculated values for length units, i.e. width: calc(100% - 3em).

Support can be somewhat emulated in older versions of IE using the non-standard expression() syntax. Partial support in IE9 refers to the browser crashing when used as a background-position value. Partial support in Android Browser 4.4 refers to the browser lacking the ability to multiply and divide values.

Resources: Mozilla Hacks article, MDN article, WebPlatform Docs.
dommatches() DOM method

Method of testing whether or not a DOM element matches a given selector. Formerly known (and largely supported with prefix) as matchesSelector.

Partial support refers to supporting the older specification's "matchesSelector" name rather than just "matches".

Resources: MDN article, WebPlatform Docs.
cssCSS Appearance

The appearance property defines how elements (particularly form controls) appear by default. By setting the value to none the default appearance can be entirely redefined using other CSS properties.

The appearance property currently does not appear in any CSS specification so there is no specifically correct usage.

Browser-specific notes:
#1: -webkit-appearance with value none is supported on IE11 Mobile for phones with "Windows Phone 8.1 Update".

Resources: CSS Tricks article.
html5Number input type

Form field type for numbers.

iOS Safari, Android 4, Chrome for Android show number input, but do not use "step", "min" or "max" attributes or show increment/decrement buttons. Internet Explorer 10 and 11 do not show increment/decrement buttons. Firefox doesn't support autocomplete content via datalist elements.

Resources: Tutorial, Polyfill, has.js test, WebPlatform Docs.
Parent feature: HTML5 form features.
jsResource Timing

Method to help web developers to collect complete timing information related to resources on a document.

Browser-specific notes:
#1: Can be enabled in Firefox using the dom.enable_resource_timing flag.

Resources: Demo, Blog post, SitePoint article.
jsServer-sent events

Method of continuously sending data from a server to the browser, rather than repeatedly requesting it (EventSource interface, used to fall under HTML5).

Resources: HTML5 Rocks tutorial, Blog post with demo, has.js test, Polyfill.
otherStrict Transport Security

Declare that a website is only accessible over a secure connection (HTTPS).

The HTTP header is 'Strict-Transport-Security'.

Resources: Chromium article, MDN article, OWASP article.
css3CSS3 Cursors (original values)

CSS3 cursor values added in the 2004 spec, including none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize and all-scroll.

Partial support in IE refers to no support for the alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize or context-menu cursors. Opera 12.10- does not support 'none' or a URI.

Resources: MDN Documentation.
css3CSS3 tab-size

Method of customizing the width of the tab character. Only effective using 'white-space: pre' or 'white-space: pre-wrap'.

Resources: MDN article.
css3Font feature settings

Method of applying advanced typographic and language-specific font features to supported OpenType fonts.

Partial support in older Firefox versions refers to using an older syntax. Partial support in older Chrome versions refers to lacking support in Mac OS X.

Resources: Demo pages (IE/Firefox only), Mozilla hacks article, Detailed tables on accessability support, WebPlatform Docs.
jsChannel messaging

Method for having two-way communication between browsing contexts (using MessageChannel).

Browser-specific notes:
#1: Supported in Firefox behind the dom.messageChannel.enabled flag. Reported to not work in web workers.

Resources: An Introduction to HTML5 web messaging.
Parent feature: Cross-document messaging.
html5Details & Summary elements

The <details> element generates a simple no-JavaScript widget to show/hide element contents, optionally by clicking on its child <summary> element.

Resources: jQuery fallback script, Fallback script, HTML5 Doctor article, has.js test, WebPlatform Docs.
domTouch events

Method of registering when, where and how the interface is touched, for devices with a touch screen. These DOM events are similar to mousedown, mousemove, etc.

Internet Explorer implements Pointer Events specification which supports more input devices than Touch Events one.

There is a library on GitHub that is working toward bringing W3C touch events to IE 10 and 11:

Removed support in Firefox refers to desktop Firefox only.

Browser-specific notes:
#1: Can be enabled in Firefox using the dom.w3c_touch_events.enabled flag (disabled by default for site compatibility reasons).
#2: Supported on IE11 Mobile for phones with "Windows Phone 8.1 Update".

Resources: Detailed support tables, Multi-touch demo, Information on the spec development, Internet Explorer's gesture and touch implementation., Touch polyfill for supporting touch events on Internet Explorer.
jsWeb SQL Database

Method of storing data client-side, allows Sqlite database queries for access and manipulation.

The Web SQL Database specification is no longer being maintained and support may be dropped in future versions.

Resources: HTML5 Doctor article, has.js test.
domHTML templates

Method of declaring a portion of reusable markup that is parsed but not rendered until cloned.

Resources: HTML5Rocks - HTML's New template Tag, Polymer project (polyfill & web components framework).
html5Multiple file selection

Allows users to select multiple files in the file picker.

Browser-specific notes:
#1: Not supported when tested on Android, presumably an OS limitation.

Resources: Chrome bug (for Android), Article.
Parent feature: HTML5 form features.
canvasCanvas blend modes

Method of defining the effect resulting from overlaying two layers on a Canvas element.

Resources: Blog post.
Parent feature: Canvas (basic support).
svgSVG fragment identifiers

Method of displaying only a part of an SVG image by defining a view ID or view box dimensions as the file's fragment identifier.

Resources: Blog post.
otherWebM video format

Multimedia format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video. WebM supports the video codec VP8 and VP9.

Will work in IE9+ and Safari/MacOSX provided the user has the WebM codecs installed. Partial support indicates that at least one codec is supported but not all.

Resources: Codec for IE9 support, Info on supporting WebM in Safari, Official website, has.js test, Perian :Mac OSX Webm Codec install.
Parent feature: Video element.
html5Form validation

Method of setting required fields and field types without requiring JavaScript.

Partial support in Safari refers to lack of notice when form with required fields is attempted to be submitted. Partial support in IE10 mobile refers to lack of warning when blocking submission.

Resources: WebPlatform Docs.
Parent feature: HTML5 form features.
html5Datalist element

Method of setting a list of options for a user to select in a text field, while leaving the ability to enter a custom value.

Partial support in IE10 refers to significantly buggy behavior. Firefox doesn't support datalist association with inputs of type number.

Resources: Mozilla Hacks article, HTML5 Library including datalist support, MDN reference, WebPlatform Docs, Eiji Kitamura's options demos & tests, Minimal Datalist polyfill w/tutorial.
Parent feature: HTML5 form features.
html5Pattern attribute for input fields

Allows validation of an input field based on a given regular expression pattern.

Browser-specific notes:
#1: Partial support refers to not displaying a message for invalid patterns.

Resources: Site with common sample patterns .
Parent feature: Form validation.
html5Color input type

Form field allowing the user to select a color.

Resources: Tutorial, Polyfill, WebPlatform Docs.
Parent feature: HTML5 form features.
domCSS.supports() API

The CSS.supports() static methods returns a Boolean value indicating if the browser supports a given CSS feature, or not.

See also @supports in CSS.

See the WebKit Bug for status in Safari.

Browser-specific notes:
#1: Opera 12 uses a different method name('window.supportsCSS').

Resources: MDN Docs, Demo (Chinese), Native CSS Feature Detection via the @supports Rule, CSS @supports, Article (Chinese).
css3CSS Feature Queries

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

See also the CSS.supports() DOM API.

Resources: MDN Article, @supports in Firefox, Test case, WebPlatform Docs.
html5Drag and Drop

Method of easily dragging and dropping elements on a page, requiring minimal JavaScript.

dataTransfer.items only supported by Chrome.

Currently no browser supports the dropzone attribute.

Firefox supports any kind of DOM elements for .setDragImage. Chrome must have either an HTMLImageElement or any kind of DOM elements attached to the DOM and within the viewport of the browser for .setDragImage.

Browser-specific notes:
#1: Partial support refers to no support for the dataTransfer.files or .types objects and limited supported formats for dataTransfer.setData/getData.
#2: Partial support refers to not supporting .setDragImage.

Resources: HTML5 Doctor article, Shopping cart demo, Demo with link blocks, WebPlatform Docs, Polyfill for setDragImage in IE, Implementing Native Drag and Drop.
html5Download attribute

When used on an anchor, this attribute signifies that the browser should download the resource the anchor points to rather than navigate to it.

Resources: HTML5Rocks post, Demo: creating a text file and downloading it..
otherWebP image format

Image format that supports lossy and lossless compression, as well as animation and alpha transparency.

Partial support in older Chrome, Opera and Android refers to browser not supporting lossless and alpha versions of WebP. Animated webp images are supported in Chrome 32+ and Opera 19+.

Resources: Official website, Polyfill for browsers with WebM support, Decoder in JS, Polyfill for browsers with or without WebM support (i.e. IE6-IE9, Safari/iOS version 6.1 and below; Firefox versions 24 and bel, Official website FAQ - Which web browsers natively support WebP?.
jsVibration API

Method to access the vibration mechanism of the hosting device.

Resources: MDN article, Vibration API sample code & demo, Tuts+ article, Demo, Article and Usage Examples.
css3CSS box-decoration-break

Controls whether the box's margins, borders, padding, and other decorations wrap the broken edges of the box fragments (when the box is split by a break (page/column/region/line).

Resources: MDN article, Demo of effect on box border.
cssCSS Filter Effects

Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.

Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.

Partial support in Firefox before version 34 only implemented the url() function of the filter property.

Browser-specific notes:
#1: Supported in Firefox under the layout.css.filters.enabled flag.

Resources: Demo file for WebKit browsers, HTML5Rocks article, Filter editor, Filter Playground.
css3Intrinsic & Extrinsic Sizing

Allows for the heights and widths to be specified in intrinsic values using the fill-available, max-content, min-content, and fit-content properties.

Prefixes are on the values, not the property names (e.g. -webkit-min-content) Firefox currently supports the "-moz-available" property rather than "-moz-fill-available".

Resources: Min-Content tutorial.
css3CSS3 word-break

Property to prevent or allow words to be broken over multiple lines between letters.

Partial support refers to supporting the "break-all" value, but not the "keep-all" value.

Resources: MDN article, WebPlatform Docs.
jsInternationalization API

Locale-sensitive collation (string comparison), number formatting, and date and time formatting.

Resources: MDN reference, The ECMAScript Internationalization API.
jsWeb Notifications

Method of alerting the user outside of a web page by displaying notifications (that do not require interaction by the user).

Resources: HTML5 Rocks tutorial, Chromium API, Add-on , MDN Notifications, SitePoint article, Demo.
jsUser Timing API

Method to help web developers measure the performance of their applications by giving them access to high precision timestamps.

Resources: SitePoint article, HTML5Rocks article, Polyfill, Demo, UserTiming.js polyfill.
css3Font unicode-range subsetting

This @font-face descriptor defines the set of Unicode codepoints that may be supported by the font face for which it is declared. The descriptor value is a comma-delimited list of Unicode range (<urange>) values. The union of these ranges defines the set of codepoints that serves as a hint for user agents when deciding whether or not to download a font resource for a given text run.

Partial support indicates that unnecessary code-ranges are downloaded by the browser - see browser test matrix.

Browser-specific notes:
#1: Can be enabled in Firefox using the layout.css.unicode-range.enabled flag.

Resources: MDN: unicode-range, Safari CSS Reference: unicode-range, Web Platform Docs: unicode-range, Demo.
cssCSS Canvas Drawings

Method of using HTML5 Canvas as a background image. Not currently part of any specification.

A similar effect can be achieved in Firefox 4+ using the -moz-element() background property.

Resources: Webkit blog post.
cssCSS text-stroke

Method of declaring the outline (stroke) width and color for text.

Does not yet appear in any W3C specification. Was briefly included in a spec as the "text-outline" property, but this was removed.

Resources: Information & workarounds, Live editor.
cssCSS Reflections

Method of displaying a reflection of an element.

Similar effect can be achieved in Firefox 4+ using the -moz-element() background property.

Resources: Webkit blog post.
canvasWebGL - 3D Canvas graphics

Method of generating dynamic 3D graphics using JavaScript, accelerated through hardware.

Support listed as "partial" refers to the fact that not all users with these browsers have WebGL access. This is due to the additional requirement for users to have up to date video drivers. This problem was solved in Chrome on Windows as of version 18.

Note that WebGL is part of the Khronos Group, not the W3C.

Resources: Instructions on enabling WebGL, Tutorial, Firefox blog post, Webkit blog post, Polyfill for IE.
Parent feature: Canvas (basic support).
jsWeb Cryptography

JavaScript API for performing basic cryptographic operations in web applications.

Many browsers support the crypto.getRandomValues() method, but not actual cryptography functionality under crypto.subtle.

Firefox also has support for unofficial features.

In Chrome the API is only usable over secure connections. (corresponding bug).

Browser-specific notes:
#1: Support in IE11 is based an older version of the specification.
#2: Supported in Firefox behind the dom.webcrypto.enabled flag.
#3: Supported in Safari using the crypto.webkitSubtle prefix.
#4: Partial support in Firefox is described here.

Resources: The History and Status of Web Crypto API, Microsoft Research JavaScript Cryptography Library, Cross-browser cryptography library.
css3CSS3 Cursors (new values)

Support for zoom-in and zoom-out values for the CSS3 cursor property.

Chrome, Safari and Firefox also support the unofficial grab and grabbing values (with prefix).

Resources: MDN Documentation.
otherWAI-ARIA Accessibility features

Method of providing ways for people with disabilities to use dynamic web content and web applications.

Resources: Information page, Links to various test results, Wikipedia, ALA Article, HTML5/WAI-ARIA information.
css3CSS resize property

Method of allowing an element to be resized by the user, with options to limit to a given direction.

Opera 12.10+ currently only supports the resize property for textarea elements.

Resources: CSS Tricks info, On textarea resizing.
otherOgg/Theora video format

Free lossy video compression format.

Resources: Wikipedia article.
Parent feature: Video element.
css3CSS3 Box-sizing

Method of specifying whether or not an element's borders and padding should be included in size units.

Partial support refers to supporting only the content-box and border-box values, not padding-box (which was added to the spec later).

Resources: MDN article, Blog post, Polyfill for IE, CSS Tricks, WebPlatform Docs.
jsWeb Audio API

High-level JavaScript API for processing and synthesizing audio.

Firefox versions < 25 support an alternative, deprecated audio API.

Chrome support went through some changes as of version 36.

Resources: Polyfill to support Web Audio API in Firefox, WebPlatform Docs, Additional browser compatibility tests for specific features, Polyfill to enable Web Audio API through Firefox Audio Data api or flash.
cssCSS background-blend-mode

Allows blending between CSS background images, gradients, and colors.

Resources: codepen example, Blog post, Demo.
html5Custom protocol handling

Method of allowing a webpage to handle a given protocol using navigator.registerProtocolHandler. This allows certain URLs to be opened by a given web application, for example mailto: addresses can be opened by a webmail client.

Browser-specific notes:
#1: Supports protocols mailto, mms, nntp, rtsp, and webcal but requires custom protocols to start with web+.

Resources: MDN article.
css3CSS3 object-fit/object-position

Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.

Browser-specific notes:
#1: Partial support in Safari refers to support for object-fit but not object-position.

Resources: Dev.Opera article, WebPlatform Docs, object-fit JavaScript-Polyfill.
html5Date and time input types

Form field widget to easily allow users to enter a date or a time, generally by using a calendar/time input widget. Previously there was also a single field for both date & time, but this has been deprecated.

Partial support in iOS refers to a lack of support for attributes like step, min, or max.

Older versions of Safari provide date-formatted text fields, but no real calendar widget.

Some modified versions of the Android 4.x browser do have support for date/time fields.

Resources: Datepicker tutorial w/polyfill, Polyfill for HTML5 forms, has.js test, WebPlatform Docs.
Parent feature: HTML5 form features.
jsShared Web Workers

Method of allowing multiple scripts to communicate with a single web worker.

Resources: Sitepoint article, Blog post.
Parent feature: Web Workers.
jsFull Screen API

API for allowing content (like a video or canvas element) to take up the entire screen.

Partial support refers to supporting an earlier draft of the spec.

Resources: MDN article, Blog post, Mozilla hacks article, WebPlatform Docs.
css3CSS3 Multiple column layout

Method of flowing information in multiple columns.

Partial support refers to not supporting the break-before, break-after, break-inside properties. Webkit browsers do have equivalent support for the non-standard -webkit-column-break-* properties while Firefox supports page-break-* to accomplish the same result.

Resources: Dev.Opera article, Introduction page, WebPlatform Docs, Polyfill.
domShadow DOM

Method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM.

Browser-specific notes:
#1: Supported in Firefox behind the dom.webcomponents.enabled flag.

Resources: Shadow DOM Visualizer, HTML5Rocks - Shadow DOM 101 article.
jsGamepad API

API to support input from USB gamepad controllers though JavaScript.

Resources: Controller demo, MDN article, HTML5Rocks article, Detailed tutorial.

Royalty-free open audio codec by IETF, which incorporated SILK from Skype and CELT from, to serve higher sound quality and lower latency at the same bitrate.

For Opera the Linux version may be able to play it when the GStreamer module is up to date and the served mime-type is 'audio/ogg'.

Resources: Introduction of Opus by Mozilla, Google's statement about the use of VP8 and Opus codec for WebRTC standard.
Parent feature: Audio element.
cssCSS touch-action property

touch-action is a CSS property that controls filtering of gesture events, providing developers with a declarative mechanism to selectively disable touch scrolling (in one or both axes), pinch-zooming or double-tap-zooming.

Browser-specific notes:
#1: Supported in Firefox behind the layout.css.touch_action.enabled flag, Firefox for Windows 8 Touch ('Metro') enabled by default.
#2: IE10+ has already supported these property which are not in standard at present such as'pinch-zoom','double-tap-zoom','cross-slide-x','cross-slide-y'.

Resources: WebPlatform Docs, MSDN Docs, 300ms tap delay, gone away, What Exactly Is..... The 300ms Click Delay, What Exactly Is..... The 300ms Click Delay(Chinese).
cssCSS image-set

Method of letting the browser pick the most appropriate CSS background image from a given set, primarily for high PPI screens.

Resources: Demo.
jsgetUserMedia/Stream API

Method of accessing external device data (such as a webcam video stream). Formerly this was envisioned as the <device> element.

Resources: Technology preview from Opera, WebPlatform Docs.
cssCSS will-change property

Method of optimizing animations by informing the browser which elements will change and what properties will change.

Browser-specific notes:
#1: Supported in Firefox behind the layout.css.will-change.enabled flag.

Resources: Detailed article, Blog post.
svgSVG effects for HTML

Method of using SVG transforms, filters, etc on HTML elements using either CSS or the foreignObject element.

Partial support refers to lack of filter support or buggy result from effects. A CSS Filter Effects specification is in the works that would replace this method.

Resources: MDN Tutorial, MDN Reference page, Filter Effects draft.
jsClipboard API

API to provide copy, cut and paste functionality using the OS clipboard.

Partial support in IE refers using a non-standard method of interacting with the clipboard. For other browsers it refers to not supporting the ClipboardEvent constructor.

Resources: MDN page on ClipboardEvent, Blog post on cross-browser usage.
jsWebRTC Peer-to-peer connections

Method of allowing two users to communicate directly, browser to browser using the RTCPeerConnection API.

BlackBerry 10 recognizes RTCPeerConnection but real support is unconfirmed.

Resources: WebRTC Project site.
jsScreen Orientation

Provides the ability to read the screen orientation state, to be informed when this state changes, and to be able to lock the screen orientation to a specific state.

Partial support refers to an older version of the draft specification, and the spec has undergone significant changes since.

Resources: Demo, MDN article, SitePoint article.
css:placeholder-shown CSS pseudo-class

The :placeholder-shown pseudo-class represents the placeholder contents of a form field with placeholder text.

Partial support refers to support for alternative syntax: ::-webkit-input-placeholder (Chrome/Safari/Opera),.
::-moz-placeholder (Firefox) and.
:-ms-input-placeholder (IE).

Resources: MSDN article, CSS-Tricks article with all prefixes, CSSWG discussion.
cssCrisp edges/pixelated images

Forces images to be scaled with an algorithm that preserves contrast and edges in the image, without smoothing colors or introduce blur. This is intended for images such as pixel art. Official values that accomplish this for the image-rendering property are crisp-edges and pixelated.

Note that prefixes apply to the value (e.g. -moz-crisp-edges), not the image-rendering property.

Browser-specific notes:
#1: Supported using the non-standard value -webkit-optimize-contrast.
#2: Internet Explorer accomplishes support using the non-standard declaration -ms-interpolation-mode: nearest-neighbor.
#3: Supports the crisp-edges value, but not pixelated.
#4: Supports the pixelated value, but not crisp-edges.

Resources: MDN article, HTML5Rocks article.
html5Ruby annotation

Method of adding pronunciation or other annotations using ruby elements (primarily used in East Asian typography).

Browsers without native support can still simulate support using CSS. Partial support refers to only supporting basic ruby, may still be missing writing-mode, Complex ruby and CSS3 Ruby.

Resources: HTML5 Doctor article, WebPlatform Docs, Add-on "XHTML Ruby Support" for Firefox, Addon "HTML Ruby" for Firefox support.
domCustom Elementswd2733‒442.1‒‒87.0‒8.15.5‒910‒TP230‒395.044
jsBattery Status API

Method to provide information about the battery status of the hosting device.

Browser-specific notes:
#1: Partial support refers to support for the older specification's navigator.battery rather than navigator.getBattery() to access the BatteryManager.

Resources: MDN Docs, Simple demo.
html5HTML5 form features

Expanded form options, including things like date pickers, sliders, validation, placeholders and multiple file uploads. Previously known as "Web forms 2.0".

Resources: HTML5 inputs and attribute support page, Cross-browser JS implementation (based on original spec).
domHTML Imports

Method of including and reusing HTML documents in other HTML documents.

Browser-specific notes:
#1: Firefox has no plans to support HTML imports though for now it can be enabled through the "dom.webcomponents.enabled" preference in about:config.
#2: Enabled through the "Enable HTML Imports" flag in chrome://flags.
#3: Enabled through the "Experimental Web Platform features" flag in chrome://flags.
#4: Enabled through the "Enable HTML Imports" flag in opera://flags.
#5: Enabled through the "Experimental Web Platform features" flag in opera://flags.

Resources: Polymer project (polyfill & web components framework), HTML5Rocks - HTML Imports: #include for the web, Chromium tracking bug: Implement HTML Imports, Firefox tracking bug: Implement HTML Imports, IE Web Platform Status and Roadmap: HTML Imports.
html5Srcset attribute

Allows authors to define various image resources and "hints" that assist a user agent to determine the most appropriate image source to display (e.g. high-resolution displays, small monitors, etc).

Browser-specific notes:
#1: Can be enabled in Firefox by setting the about:config preference dom.image.srcset.enabled to true.
#2: Supports the subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).

Resources: Improved support for high-resolution displays with the srcset image attribute.
jsDeviceOrientation events

API for detecting orientation and motion events from the device running the browser.

Partial support refers to the lack of compassneedscalibration event. Partial support also refers to the lack of devicemotion event support for Chrome 30- and Opera. Opera Mobile 14 lost the ondevicemotion event support. Firefox 3.6, 4 and 5 support the non-standard MozOrientation event.

Browser-specific notes:
#1: compassneedscalibration supported in IE11 only for compatible devices with Windows 8.1+.

Resources: HTML5 Rocks tutorial, has.js test, DeviceOrientation implementation prototype for IE10, Demo.
css3CSS Shapes Level 1

Allows geometric shapes to be set in CSS to define an area for text to flow around.

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.

Resources: Adobe demos and samples, CSS shapes support test by Adobe, A List Apart article.
jsSpeech Synthesis API

A web API for controlling a text-to-speech output.

Resources: HTML5Rocks article, SitePoint article, Demo.
Parent feature: Web Speech API.
css3CSS Font Loading

This CSS module defines a scripting interface to font faces in CSS, allowing font faces to be easily created and loaded from script. It also provides methods to track the loading status of an individual font, or of all the fonts on an entire page.

Browser-specific notes:
#1: Can be enabled in Firefox using the layout.css.font-loading-api.enabled flag.

Resources: Optimizing with font load events.
otherWOFF 2.0 - Web Open Font Format

TrueType/OpenType font that provides better compression than WOFF 1.0.

Browser-specific notes:
#1: Default 'enabled' for Firefox Developer Edition and Nightly, but Beta and Release versions will need to set a flag to 'true' to use WOFF2.

Resources: Basics about WOFF 2.0, WOFF 2.0 converter.
Parent feature: @font-face Web fonts.
cssBlending of HTML/SVG elements

Allows blending between arbitrary SVG and HTML elements.

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.

Resources: codepen example, Blog post.
cssCSS Masks

Method of displaying part of an element, using a selected image as a mask.

Partial support in WebKit/Blink browsers refers to supporting the mask-image and mask-box-image properties, but lacks support for other parts of the spec. Partial support in Firefox refers to only support for inline SVG mask elements i.e. mask: url(#foo).

Resources: WebPlatform Docs, HTML5 Rocks article, Detailed blog post.
domPicture element

A responsive images method to control which image resource a user agent presents to a user, based on resolution, media query and/or support for a particular image format.

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.
#2: Enabled in Opera through the "experimental Web Platform features" flag in opera://flags.
#3: Enabled in Firefox by setting the about:config preference dom.image.picture.enable to true.

Resources: Demo, Tutorial, Read about the use cases, General information about Responsive Images, Blog post on usage, HTML5 Rocks tutorial.
jsObject.observe data binding

Method for data binding, part of the ECMAScript 7 proposals.

Resources: Data-binding Revolutions with Object.observe().
domDialog element

Method of easily creating custom dialog boxes to display to the user with modal or non-modal options. Also includes a ::backdrop pseudo-element for behind the element.

Browser-specific notes:
#1: Enabled through the "Experimental Web Platform features" flag in chrome://flags.
#2: Enabled through the "Experimental Web Platform features" flag in opera://flags.

Resources: Polyfill.
jsFilesystem & FileWriter API

Method of reading and writing files to a sandboxed file system.

The File API: Directories and System specification is no longer being maintained and support may be dropped in future versions.

Resources: HTML5 Rocks tutorial, WebPlatform Docs.
css3CSS clip-path property

Method of defining the visible region of an element using SVG or a shape definition.

Browser-specific notes:
#1: Partial support refers to only supporting the url() syntax.
#2: Partial support refers to supporting shapes and the url(#foo) syntax for inline SVG, but not shapes in external SVGs.

Resources: CSS Tricks article.

Special tags that allow mathematical formulas and notations to be written on web pages.

Opera's support is limited to a CSS profile of MathML. Support was added in Chrome 24, but removed afterwards due to instability.

Resources: Wikipedia, MathML demos, Cross-browser support script, MDN element reference.
svgSVG fonts

Method of using fonts defined as SVG shapes. Considered among a number of browser vendors as a deprecated feature with support being removed.

Browser-specific notes:
#1: Chrome 38 and newer support SVG fonts only on Windows Vista and XP.
#2: Supported in Opera Mini in SVG images only, not in HTML.

Resources: Blog post, Blog post on usage for iPad.
Parent feature: @font-face Web fonts.
css3text-emphasis styling

Method of using small symbols next to each glyph to emphasize a run of text, commonly used in East Asian languages. The text-emphasis shorthand, and its text-emphasis-style and text-emphasis-color longhands, can be used to apply marks to the text. The text-emphasis-position property, which inherits separately, allows setting the emphasis marks' position with respect to the text.

Some old webkit browsers (like Chrome 24) support -webkit-text-emphasis, but does not support CJK languages and is therefore considered unsupported.

Browser-specific notes:
#1: Partial support refers to incorrect support for -webkit-text-emphasis-position. These browsers support over and under as values, but not the added left and right values required by the spec.

Resources: A javascript fallback for CSS3 emphasis mark..
css3CSS3 text-align-last

CSS property to describe how the last line of a block or a line right before a forced line break when text-align is justify.

Browser-specific notes:
#1: In Internet Explorer, the start and end values are not supported.
#2: Enabled through the "Enable Experimental Web Platform Features" flag in chrome://flags.
#3: Enabled through the "Enable Experimental Web Platform Features" flag in opera://flags.

Resources: MDN text-align-last, Adobe Web Platform Article.
cssCSS font-stretch

If a font has multiple types of variations based on the width of characters, the font-stretch property allows the appropriate one to be selected. The property in itself does not cause the browser to stretch to a font.

Resources: MDN article, CSS Tricks article.
css3CSS Hyphenation

Method of controlling when words at the end of lines should be hyphenated using the "hyphens" property.

Chrome 29- and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property. Chrome 30+ doesn't support it either. It is advisable to set the @lang attribute on the HTML element to enable hyphenation support and improve accessibility.

Resources: MDN article, Blog post, WebPlatform Docs.
domPointer events

This specification integrates various inputs from mice, touchscreens, and pens, making separate implementations no longer necessary and authoring for cross-device pointers easier. Not to be mistaken with the unrelated "pointer-events" CSS property.

Partial support in IE10 refers the lack of pointerenter and pointerleave events. Firefox Nightly provides 'dom.w3c_pointer_events.enabled' option to support this specification starting with version 28.

Resources: Implementation of Pointer Events in IE10, Hand.js, the polyfill for browsers only supporting Touch Events, Article & tutorial.
css3text-decoration styling

Method of defining the type, style and color of lines in the text-decoration property. These can be defined as shorthand (e.g. text-decoration: line-through dashed blue) or as single properties (e.g. text-decoration-color: blue).

All browsers support the CSS2 version of text-decoration, which matches only the text-decoration-line values (underline, etc.).

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.
#2: Partial support in Safari refers to not supporting the text-decoration-style property.

Resources: MDN Documentation for text-decoration-style, MDN Documentation for text-decoration-color, MDN Documentation for text-decoration-line.
jsWeb Speech API

Method to provide speech input and text-to-speech output features in a web browser.

Partial support in Chrome refers to some attributes missing. Partial support in Safari refers to only Speech Synthesis supported.

Resources: HTML5Rocks article, SitePoint article, Demo, Advanced demo and resource.
domWeb Animations API

Lets you create animations that are run in the browser and as well as inspect and manipulate animations created through declarative means like CSS.

Browser-specific notes:
#1: Partial support refers to basic support of element.animate().
#2: Partial support refers to basic support of element.animate() and playback control of AnimationPlayer.
#3: Partial support in Firefox is detailed in Are we animated yet?.

Resources: HTML5 Rocks, HTML5 Rocks, Current Firefox status.
jsService Workers

Method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline.

Details on partial support can be found on is ServiceWorker Ready?.

Browser-specific notes:
#1: Partial support can be enabled in Firefox with the dom.serviceWorkers.enabled flag.

Resources: HTML5Rocks article (introduction), MDN article, List of various resources.
otherXHTML+SMIL animation

Method of using SMIL animation in web pages.

Internet Explorer supports the W3C proposal HTML+TIME, which is largely the same as XHTML+SMIL.

Resources: Wikipedia, JS library to support XHTML+SMIL.
Parent feature: XHTML served as application/xhtml+xml.
pngAnimated PNG (APNG)

Like animated GIFs, but allowing 24-bit colors and alpha transparency.

Where support for APNG is missing, only the first frame is displayed.

Resources: Wikipedia, Polyfill using canvas, Chrome extension providing support.
cssCSS Grid Layout

Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for lay out into columns and rows using a set of predictable sizing behaviors.

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.
#2: Partial support in IE refers to supporting an older version of the specification.

Resources: IE Blog post, Webkit (Chrome, Safari, etc.) feature request, Mozilla (Firefox) feature request, Polyfill based on old spec, Polyfill based on new spec.
cssCSS position:sticky

Keeps elements positioned as "fixed" or "relative" depending on how it appears in the viewport. As a result the element is "stuck" when necessary while scrolling.

Browser-specific notes:
#1: Can be enabled in Firefox by setting the about:config preference layout.css.sticky.enabled to true.
#2: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.

Resources: HTML5Rocks, MDN article, WebPlatform Docs, Polyfill, Another polyfill.
otherEOT - Embedded OpenType fonts

Type of font that can be derived from a regular font, allowing small files and legal use of high-quality fonts. Usage is restricted by the file being tied to the website.

Proposal by Microsoft, being considered for W3C standardization.

Resources: Wikipedia, Example pages.
Parent feature: @font-face Web fonts.
cssCSS font-size-adjust

Method of adjusting the font size in a matter that relates to the height of lowercase vs. uppercase letters. This makes it easier to set the size of fallback fonts.

Does not appear to work on Firefox mobile, despite recognition of the property.

Resources: Article on font-size-adjust, MDN article on font-size-adjust.
cssScoped CSS

Allows CSS rules to be scoped to part of the document, based on the position of the style element.

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.

Resources: Polyfill, HTML5 Doctor article, HTML5Rocks article.
css3CSS3 image-orientation

CSS property used generally to fix the intended orientation of an image. This can be done using 90 degree increments or based on the image's EXIF data using the "from-image" value.

Partial support in iOS refers to the browser using EXIF data by default, though it does not actually support the property. Opening the image in a new tab in Chrome results in the image shown in the orientation according to the EXIF data.

Resources: MDN article, Blog post, Demo (Chinese).
jsProximity API

Defines events that provide information about the distance between a device and an object, as measured by a proximity sensor.

Resources: Demo, SitePoint article.
jsAmbient Light API

Defines events that provide information about the ambient light level, as measured by a device's light sensor.

Firefox desktop supports this API only on Mac OS X. Support for Windows 7 is in progress.

Resources: Demo, Article.
domrelList (DOMTokenList)

Method of easily manipulating rel attribute values on elements, using the DOMTokenList object (similar to classList).

Resources: MDN - DOMTokenList.
css3CSS Variables

Permits the declaration and usage of cascading variables in stylesheets.

Resources: Mozilla hacks article (older syntax), MDN article.
otherJPEG XR image format

The latest JPEG image format of Joint Photographic Experts Group which boasts better compression and supports lossless compression, alpha channel, and 48-bit deep color over normal jpg format.

Resources: Microsoft JPEG XR Codec Overview.

A modern replacement for XMLHttpRequest.

Browser-specific notes:
#1: Partial support can be enabled in Firefox with the dom.fetch.enabled flag.
#2: Only available in Chrome and Opera within ServiceWorkers.
#3: Available in Chrome and Opera within Window and Workers by enabling the "Experimental Web Platform Features" flag in chrome://flags.

Resources: Polyfill, Demo.
css3CSS Regions

Method of flowing content into multiple elements.

Support in IE10 and IE11 is limited to using an iframe as a content source with the -ms-flow-into: flow_name; and -ms-flow-from: flow_name; syntax.

Resources: Adobe demos and samples, IE10 developer guide info, WebPlatform Docs.
cssCSS Device Adaptation

A standard way to override the size of viewport in web page, standardizing and replacing Apple's own popular <meta> viewport implementation.

Browser-specific notes:
#1: IE only supports the 'width' and 'height' properties.
#2: Opera Mobile and Opera Mini only support the 'orientation' property.

Resources: Introduction to meta viewport and @viewport in Opera Mobile, Device adaptation in Internet Explorer 10.
cssCSS Scroll snap points

CSS technique that allows customizable scrolling experiences like pagination of carousels by setting defined snap points.

Currently in development in WebKit with partial support in nightly builds.

Browser-specific notes:
#1: Partial support in IE10 refers to support limited to touch screens.
#2: Partial support in IE11 documented here.
#3: Can be enabled in Firefox using the layout.css.scroll-snap.enabled flag in about:config.

Resources: Blog post.
css3CSS text-size-adjust

On mobile devices, the text-size-adjust CSS property allows Web authors to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to.

Resources: MDN Docs.
html5seamless attribute for iframes

The seamless attribute makes an iframe's contents actually part of a page, and adopts the styles from its hosting page.

Chrome 20-26 had partial support behind a flag, though this was later removed.

Safari 7 (& iOS 7 Safari) hides the border of seamless iframes and recognizes the 'seamless' DOM property, but does not provide actual support.

Resources: Experimental polyfill, Article.

BroadcastChannel allows scripts from the same origin but other browsing contexts (windows, workers) to send each other messages.

Resources: MDN article.

supported partial optional missing unknown prefixed

Usage percentage: 0 - .01 - 1-9 - 10 - 20 - majority