Web platform features explorer

📃 September 2015 release notes

Newly available

The following features are newly available:

  • Animations (CSS): The animation CSS property animates an element's style over time, using keyframes described in @keyframes rules.
  • Channel messaging: Channel messaging communicates one-to-one between browsing contexts on the same origin, such as between <iframe> elements or two documents using a shared worker.
  • CSS object model: The CSS object model API reads, creates, and modifies CSS stylesheets and inline styles. Also known as CSSOM.
  • Flexbox: Flexbox is a one-dimensional layout system, which places content either horizontally or vertically, with optional wrapping.
  • HTTP/2: The HTTP/2 protocol is a major revision of the HTTP network protocol, providing improved performance and efficiency by using a single TCP connection to send multiple streams of data at once.
  • Performance: The performance global object and the PerformanceObserver API provide access to performance-related information for the current execution context.
  • String codePointAt() and fromCodePoint(): The codePointAt() method returns the numeric value of the UTF-16 code point at an index of the string. The fromCodePoint() method returns a string created from one or more code points.
  • String includes(): The includes() method of strings returns whether a search string appears within the string.
  • String raw(): The String.raw() static method interpolates template literal substitutions, but ignores escape sequences. It is the tag function for template literals.
  • String repeat(): The repeat() method of strings returns the original string repeated a number of times.
  • String startsWith() and endsWith(): The startsWith() and endsWith() methods of strings returns whether a search string appears at the beginning or end of the provided string.
  • @supports: The @supports at-rule applies styles based on a browser's support for CSS features, such as a CSS property and value. Also known as feature queries.
  • Symbol: A Symbol value is a unique, non-enumerable primitive value used for encapsulation or information hiding. For example, a symbol can be a key of an object that can never collide with any other key.
  • 2D transforms: The transform CSS property and its 2D transform functions allow rotating, scaling, skewing, and translating an element. Arbitrary 2D transforms are also possible using a transformation matrix.
  • Transitions (CSS): The transition shorthand CSS property sets how changes to an element's styles may occur over time. Transitions can be applied to specific CSS properties, all properties, or none.
  • Unicode point escapes: Unicode point escapes (\\u{}) represent Unicode characters within strings.
  • WeakSet: A WeakSet object stores unique values of any type without creating strong references to the values, such that membership in the set does not prevent garbage collection of the value.
  • word-break: The word-break CSS property sets how lines break within words.

New in Chrome

The following features are now available in Chrome:

  • Array copyWithin(): The copyWithin() method of arrays and typed arrays shifts or copies items of an array to another index of the array without changing its length.
  • Array fill(): The fill() method of arrays and typed arrays sets all or some items of an array to a given a value.
  • Array find() and findIndex(): The find() and findIndex() methods of arrays and typed arrays search an array for the first item that satisfies a test function.
  • Array.from(): The Array.from() and typed array .from() static methods copy items from an iterable or array-like object to make a new array.
  • Array.of(): The Array.of() and typed array .of() static methods create new arrays from the values of any number of arguments.
  • document.write(): The document.open(), document.write(), document.writeln(), and document.close() methods write content to a document, possibly while that document is still loading.
  • Service workers: The service worker of a website is a script that runs in its own thread and which acts as local proxy that intercepts network requests from the website. Use a service worker to implement advanced caching strategies, offline support, background tasks, or push notification support on your website.
  • Typed array iteration methods: Typed array iteration methods
  • Typed array iterators: Typed arrays are iterable with the for … of statement and enumerable with the methods entries(), keys(), and values().

New in Chrome Android

The following features are now available in Chrome Android:

  • Array copyWithin(): The copyWithin() method of arrays and typed arrays shifts or copies items of an array to another index of the array without changing its length.
  • Array fill(): The fill() method of arrays and typed arrays sets all or some items of an array to a given a value.
  • Array find() and findIndex(): The find() and findIndex() methods of arrays and typed arrays search an array for the first item that satisfies a test function.
  • Array.from(): The Array.from() and typed array .from() static methods copy items from an iterable or array-like object to make a new array.
  • Array.of(): The Array.of() and typed array .of() static methods create new arrays from the values of any number of arguments.
  • document.write(): The document.open(), document.write(), document.writeln(), and document.close() methods write content to a document, possibly while that document is still loading.
  • Service workers: The service worker of a website is a script that runs in its own thread and which acts as local proxy that intercepts network requests from the website. Use a service worker to implement advanced caching strategies, offline support, background tasks, or push notification support on your website.
  • Typed array iteration methods: Typed array iteration methods
  • Typed array iterators: Typed arrays are iterable with the for … of statement and enumerable with the methods entries(), keys(), and values().

New in Firefox

The following features are now available in Firefox:

  • Font loading: The document.fonts API dynamically loads custom fonts and tracks when fonts are loading or ready to use.
  • text-orientation: The text-orientation CSS property sets the how text is typeset within a line when the writing mode is vertical.
  • writing-mode: The writing-mode CSS property sets whether text is laid out horizontally or vertically, and left to right, or right to left.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • Font loading: The document.fonts API dynamically loads custom fonts and tracks when fonts are loading or ready to use.
  • Media source: The MediaSource API is a custom data source for media elements commonly used for adaptive streaming. Also known as Media Source Extensions (MSE).
  • text-orientation: The text-orientation CSS property sets the how text is typeset within a line when the writing mode is vertical.
  • writing-mode: The writing-mode CSS property sets whether text is laid out horizontally or vertically, and left to right, or right to left.

New in Safari

The following features are now available in Safari:

  • Case-insensitive attribute selector: The i identifier in a CSS attribute selector matches attribute values case-insensitively in document languages like XML where attribute values are case-sensitive.
  • Classes: Classes are an object-oriented syntax for JavaScript prototypes.
  • column-fill: The column-fill CSS property sets the distribution of content across columns in a multi-column layout.
  • column-span: The column-span CSS property controls whether a child element extends across all columns of a multi-column parent.
  • EXT_blend_minmax WebGL extension: The EXT_blend_minmax extension for WebGL 1.0 contexts adds two blend equations, the minimum and maximum color components of the source and destination colors.
  • EXT_frag_depth WebGL extension: The EXT_frag_depth extension for WebGL 1.0 and 2.0 contexts adds setting the depth value of a fragment from within the fragment shader.
  • EXT_sRGB WebGL extension: The EXT_sRGB extension for WebGL 1.0 contexts adds sRGB support to textures and framebuffer objects.
  • font-kerning: The font-kerning CSS property sets whether kerning data from a font is used to adjust the space between letters.
  • font-synthesis: The font-synthesis CSS shorthand property disables all font synthesis except the given kinds. To disable a specific kind of font synthesis, instead use the longhand properties such as font-synthesis-style and font-synthesis-weight.
  • Interaction media queries: The pointer, any-pointer, hover, and any-hover CSS media queries set styles based on the presence of pointing devices and their ability to hover over elements. For example, most smartphones match the (hover: none) and (pointer: coarse) media query.
  • Link selectors: The :link CSS pseudo-class matches unvisited links, :visited matches visited links, and :any-link matches both.
  • Multi-column layout: Multi-column layout flows an element's content across one or more columns in a single row, without affecting the display property of its children.
  • :not(): The :not() functional pseudo-class matches elements that do not match the selectors in its argument.
  • :nth-child() of <selector>: The of syntax for the :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.
  • :placeholder-shown: The :placeholder-shown CSS pseudo-element selects <input> and <textarea> elements when no value is set and the element's placeholder attribute is not empty. Not to be confused with ::placeholder, which selects the placeholder text itself.
  • WEBGL_draw_buffers WebGL extension: The WEBGL_draw_buffers extension for WebGL 1.0 contexts enables a fragment shader to write to several textures, which is useful for deferred shading, for example.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • Case-insensitive attribute selector: The i identifier in a CSS attribute selector matches attribute values case-insensitively in document languages like XML where attribute values are case-sensitive.
  • Classes: Classes are an object-oriented syntax for JavaScript prototypes.
  • column-fill: The column-fill CSS property sets the distribution of content across columns in a multi-column layout.
  • column-span: The column-span CSS property controls whether a child element extends across all columns of a multi-column parent.
  • EXT_blend_minmax WebGL extension: The EXT_blend_minmax extension for WebGL 1.0 contexts adds two blend equations, the minimum and maximum color components of the source and destination colors.
  • EXT_sRGB WebGL extension: The EXT_sRGB extension for WebGL 1.0 contexts adds sRGB support to textures and framebuffer objects.
  • font-kerning: The font-kerning CSS property sets whether kerning data from a font is used to adjust the space between letters.
  • font-synthesis: The font-synthesis CSS shorthand property disables all font synthesis except the given kinds. To disable a specific kind of font synthesis, instead use the longhand properties such as font-synthesis-style and font-synthesis-weight.
  • Interaction media queries: The pointer, any-pointer, hover, and any-hover CSS media queries set styles based on the presence of pointing devices and their ability to hover over elements. For example, most smartphones match the (hover: none) and (pointer: coarse) media query.
  • Link selectors: The :link CSS pseudo-class matches unvisited links, :visited matches visited links, and :any-link matches both.
  • Multi-column layout: Multi-column layout flows an element's content across one or more columns in a single row, without affecting the display property of its children.
  • :not(): The :not() functional pseudo-class matches elements that do not match the selectors in its argument.
  • :nth-child() of <selector>: The of syntax for the :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.
  • OES_vertex_array_object WebGL extension: The OES_vertex_array_object extension for WebGL 1.0 contexts adds vertex array objects (VAOs) which encapsulate vertex array states. These objects keep pointers to vertex data and names for different sets of vertex data.
  • :placeholder-shown: The :placeholder-shown CSS pseudo-element selects <input> and <textarea> elements when no value is set and the element's placeholder attribute is not empty. Not to be confused with ::placeholder, which selects the placeholder text itself.