Web platform features explorer

📃 September 2016 release notes

Newly available

The following features are newly available:

  • 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 includes(): The includes() method of arrays and typed arrays returns whether a given value appears in the array.
  • Array.of(): The Array.of() and typed array .of() static methods create new arrays from the values of any number of arguments.
  • background-repeat: The background-repeat CSS property sets how a background image is tiled.
  • Base64 encoding and decoding: The atob() and btoa() global functions encode and decode strings to and from base 64, respectively.
  • filter: The filter CSS property applies one or more graphic effects to an element. You can use filter functions, such as blur() and drop-shadow(), alone or combined to produce different effects.
  • @font-face: The @font-face CSS at-rule creates a custom font-family value. The at-rule's descriptors set the font's name, source, and various display settings.
  • Generators: Generator functions (function*) create iterators that return multiple values, one after another, on-demand.
  • Let and const: The let and const declarations define block-scoped variables.
  • Proxy and Reflect: The Proxy and Reflect JavaScript built-ins intercept and define custom behavior for fundamental language operations (such as property lookup, assignment, enumeration, or function invocation).
  • String normalize(): The normalize() method of strings returns a Unicode normal form of a string as a new string. More than one code point sequence can represent the same characters. You can use the normalize() method to find canonically or compatibly equivalent strings.
  • @supports (compatibility prefix): The @supports (-webkit-transform-3d) CSS media query is a standardized compatibility alternative to @supports (transform-style).
  • 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:

  • COLRv0: COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors.
  • Web app manifest: A web app manifest file provides metadata about the site. The browser can use the metadata to install the site as a standalone application on the user's device. The metadata usually includes the app's name, icon, description, and ways in which the app wishes to integrate with the device.
  • Media capture: The navigator.mediaDevices.getUserMedia() API requests access to devices that produce audio or video streams, such as microphones or video cameras.
  • Payment request: The PaymentRequest API prompts the user to make a payment through the browser's user interface.
  • Shadow DOM: Shadow DOM allows you to attach encapsulated "shadow" DOM trees to elements. A shadow DOM tree is a separate component, isolated from the scripts and styles in other parts of the document. This is a part of Web Components.
  • <slot>: The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.

New in Firefox

The following features are now available in Firefox:

  • Animatable clipping paths: The clip-path property can be animated using CSS transitions and animations.
  • <details>: The <details> element is a disclosure widget which can be expanded to reveal additional content. When closed, only the nested <summary> element is visible.
  • :dir(): The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).
  • overflow-wrap: The overflow-wrap CSS property breaks a line of text onto multiple lines inside the targeted element in an otherwise unbreakable place to prevent overflow. The legacy property is word-wrap.
  • Q unit: The Q CSS length unit is an absolute length anchored to the physical measurement of quarter-millimeters. 1Q is equivalent to 1/40 of 1 centimeter.
  • Speech synthesis: The SpeechSynthesis API converts text to speech with artificial voices.
  • text-align-last: The text-align-last CSS property sets the alignment of the last line of text before a forced line break.
  • Text stroke and fill (compatibility prefixes): The -webkit-text-stroke-width and -webkit-text-stroke-color CSS properties set the thickness and color of text outlines. The -webkit-text-fill-color sets the color within text character outlines. Both default to the text color.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • Animatable clipping paths: The clip-path property can be animated using CSS transitions and animations.
  • <details>: The <details> element is a disclosure widget which can be expanded to reveal additional content. When closed, only the nested <summary> element is visible.
  • :dir(): The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).
  • overflow-wrap: The overflow-wrap CSS property breaks a line of text onto multiple lines inside the targeted element in an otherwise unbreakable place to prevent overflow. The legacy property is word-wrap.
  • Q unit: The Q CSS length unit is an absolute length anchored to the physical measurement of quarter-millimeters. 1Q is equivalent to 1/40 of 1 centimeter.
  • text-align-last: The text-align-last CSS property sets the alignment of the last line of text before a forced line break.
  • Text stroke and fill (compatibility prefixes): The -webkit-text-stroke-width and -webkit-text-stroke-color CSS properties set the thickness and color of text outlines. The -webkit-text-fill-color sets the color within text character outlines. Both default to the text color.

New in Safari

The following features are now available in Safari:

  • Array iterators: Arrays are iterable with the for … of statement and enumerable with the methods entries(), keys(), and values().
  • color-gamut media query: The color-gamut media query sets styles based on the colors a device can display.
  • cross-fade(): The cross-fade() CSS function generates an image by mixing two images.
  • CSS object model (DOM level 2): The DOM level 2 style specification defined interfaces to access and modify CSS styles, such as CSSValue and CSSPrimitiveValue, that were later excluded from the CSS object model.
  • <data>: The <data> element links a given piece of content with a machine-readable translation.
  • Font loading: The document.fonts API dynamically loads custom fonts and tracks when fonts are loading or ready to use.
  • Host: The :host CSS pseudo-class selects the containing element of the shadow tree in which it is used. The :host() CSS pseudo-class selects the that element only if it matches the provided selector.
  • image-rendering: The image-rendering CSS property sets how images are scaled, retaining smoothness for photos, or hard edges for pixel art and QR codes.
  • :indeterminate: The :indeterminate CSS pseudo-class selects any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, or radio buttons which are members of a group in which all radio buttons are unchecked.
  • Intl: The Intl API provides language sensitive string comparison, number formatting, date and time formatting, and more.
  • object-fit: The object-fit CSS property sets how images, videos, and other replaced elements are scaled within their container.
  • object-position: The object-position CSS property places images, videos, and other replaced elements within their boxes.
  • Page breaks: In printed page layouts, the break-after, break-before, break-inside CSS properties control where printed pages start and end. Also known as pagination or page breaking.
  • Shadow DOM: Shadow DOM allows you to attach encapsulated "shadow" DOM trees to elements. A shadow DOM tree is a separate component, isolated from the scripts and styles in other parts of the document. This is a part of Web Components.
  • <slot>: The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.
  • String padStart() and padEnd(): The padStart() and padEnd() methods of strings return a string lengthened to a minimum number of characters by adding characters to the start or end of the string.
  • <time>: The <time> HTML element represents a time, such as a calendar date, clock time, or duration. It may include the datetime attribute to translate dates into machine-readable format.
  • with: The with JavaScript statement adds a given object to the chain of scopes used to evaluate names.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • Array iterators: Arrays are iterable with the for … of statement and enumerable with the methods entries(), keys(), and values().
  • color-gamut media query: The color-gamut media query sets styles based on the colors a device can display.
  • CSS object model (DOM level 2): The DOM level 2 style specification defined interfaces to access and modify CSS styles, such as CSSValue and CSSPrimitiveValue, that were later excluded from the CSS object model.
  • <data>: The <data> element links a given piece of content with a machine-readable translation.
  • Font loading: The document.fonts API dynamically loads custom fonts and tracks when fonts are loading or ready to use.
  • Host: The :host CSS pseudo-class selects the containing element of the shadow tree in which it is used. The :host() CSS pseudo-class selects the that element only if it matches the provided selector.
  • HTML media capture: The capture HTML attribute for <input type="file"> elements allows the user to capture media using the device's camera or microphone.
  • image-rendering: The image-rendering CSS property sets how images are scaled, retaining smoothness for photos, or hard edges for pixel art and QR codes.
  • :indeterminate: The :indeterminate CSS pseudo-class selects any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, or radio buttons which are members of a group in which all radio buttons are unchecked.
  • Intl: The Intl API provides language sensitive string comparison, number formatting, date and time formatting, and more.
  • inverted-colors media query: The inverted-colors CSS media query sets styles based on whether the user has inverted all colors, such as with mobile accessibility settings.
  • object-fit: The object-fit CSS property sets how images, videos, and other replaced elements are scaled within their container.
  • object-position: The object-position CSS property places images, videos, and other replaced elements within their boxes.
  • Page breaks: In printed page layouts, the break-after, break-before, break-inside CSS properties control where printed pages start and end. Also known as pagination or page breaking.
  • Shadow DOM: Shadow DOM allows you to attach encapsulated "shadow" DOM trees to elements. A shadow DOM tree is a separate component, isolated from the scripts and styles in other parts of the document. This is a part of Web Components.
  • <slot>: The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.
  • String padStart() and padEnd(): The padStart() and padEnd() methods of strings return a string lengthened to a minimum number of characters by adding characters to the start or end of the string.
  • <time>: The <time> HTML element represents a time, such as a calendar date, clock time, or duration. It may include the datetime attribute to translate dates into machine-readable format.
  • with: The with JavaScript statement adds a given object to the chain of scopes used to evaluate names.