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. For instance, filter: blur(2px).
  • @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().
  • User agent sniffing: The navigator.userAgent property and several others loosely identify a browser. Selectively showing content based on the user agent string, also known as user agent sniffing, is unreliable. Consider using feature detection or user agent client hints instead.

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.