Web platform features explorer

📃 September 2018 release notes

Newly available

The following features are newly available:

  • font-variation-settings: The font-variation-settings CSS property sets an "axis of variability" on a variable font, such as weight, optical size, or a custom axis defined by the typeface designer. When possible, use other CSS font properties, such as font-weight: bold. Also known as variable fonts.
  • Speech synthesis: The SpeechSynthesis API converts text to speech with artificial voices.

Widely available

The following features are now widely available:

  • Classes: Classes are an object-oriented syntax for JavaScript prototypes.
  • DOMParser: The DOMParser API parses XML or HTML source code from a string into a DOM Document.
  • <picture>: The <picture> element is used for art direction in responsive images, where a different image is displayed based on the <source> element.
  • unset: The unset keyword resets any CSS property, removing any values previously set by the author, user, or browser. Inherited properties (like color) reset to the parent element's computed value. Non-inherited properties (like display) reset to the specified initial value (inline).

New in Chrome

The following features are now available in Chrome:

  • Array flat() and flatMap(): The flat() and flatMap() methods for arrays creates a new array such that each nested array item is concatenated into it.
  • Conic gradients: The conic-gradient() and repeating-conic-gradient() CSS functions create backgrounds that progress between two or more colors around a center point.
  • <datalist>: The <datalist> element sets recommended values for an <input> element. Browsers may show a dropdown menu of all values or match values as the user types.
  • Keyboard map: The navigator.keyboard.getLayoutMap() API returns a map from key codes to human readable key names. It can be used to describe buttons to the user when using the keyboard as a set of buttons, such as in games.
  • Offscreen canvas: The OffscreenCanvas API provides a canvas that can be drawn to off screen, with no dependencies on the DOM, which can be used to run heavy rendering operations inside a worker context.
  • Picture-in-picture (video): The picture-in-picture API allow websites to create a floating, always-on-top video window. Also known as PiP or pop-out video.
  • requestAnimationFrame() in workers: The requestAnimationFrame() method in workers schedules a function that runs before the next repaint. Together with offscreen canvas, you can animate content from a worker.
  • Safe area inset environment variables: The safe-area-inset- CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, top:\ env(safe-area-inset-top); positions the top of an element below the notch on an iPhone.
  • Scroll snap: CSS scroll snap controls the panning and scrolling behavior within a scroll container.
  • Import and export of mutable globals (WebAssembly): Mutable global variables are importable and exportable.
  • Sign extension operators (WebAssembly): Sign-extension operator instructions extend the width of 8-bit, 16-bit, and 32-bit values to 32-bit and 64-bit values.
  • Locks: The navigator.locks API coordinates work with shared resources through mutually exclusive ownership of a resource's name. Also known as web locks.

New in Chrome Android

The following features are now available in Chrome Android:

  • Array flat() and flatMap(): The flat() and flatMap() methods for arrays creates a new array such that each nested array item is concatenated into it.
  • Conic gradients: The conic-gradient() and repeating-conic-gradient() CSS functions create backgrounds that progress between two or more colors around a center point.
  • <datalist>: The <datalist> element sets recommended values for an <input> element. Browsers may show a dropdown menu of all values or match values as the user types.
  • Keyboard map: The navigator.keyboard.getLayoutMap() API returns a map from key codes to human readable key names. It can be used to describe buttons to the user when using the keyboard as a set of buttons, such as in games.
  • Offscreen canvas: The OffscreenCanvas API provides a canvas that can be drawn to off screen, with no dependencies on the DOM, which can be used to run heavy rendering operations inside a worker context.
  • requestAnimationFrame() in workers: The requestAnimationFrame() method in workers schedules a function that runs before the next repaint. Together with offscreen canvas, you can animate content from a worker.
  • Safe area inset environment variables: The safe-area-inset- CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, top:\ env(safe-area-inset-top); positions the top of an element below the notch on an iPhone.
  • Scroll snap: CSS scroll snap controls the panning and scrolling behavior within a scroll container.
  • Import and export of mutable globals (WebAssembly): Mutable global variables are importable and exportable.
  • Sign extension operators (WebAssembly): Sign-extension operator instructions extend the width of 8-bit, 16-bit, and 32-bit values to 32-bit and 64-bit values.
  • Locks: The navigator.locks API coordinates work with shared resources through mutually exclusive ownership of a resource's name. Also known as web locks.

New in Firefox

The following features are now available in Firefox:

  • Array flat() and flatMap(): The flat() and flatMap() methods for arrays creates a new array such that each nested array item is concatenated into it.
  • font-optical-sizing: The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.
  • resolution media query: The resolution CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel.
  • ::selection: The ::selection CSS pseudo-element selects text a user has highlighted.
  • shape-outside: The shape-outside CSS property, along with shape-margin and shape-image-threshold, sets the shape around which adjacent content will wrap.
  • Import and export of mutable globals (WebAssembly): Mutable global variables are importable and exportable.
  • Sign extension operators (WebAssembly): Sign-extension operator instructions extend the width of 8-bit, 16-bit, and 32-bit values to 32-bit and 64-bit values.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • Array flat() and flatMap(): The flat() and flatMap() methods for arrays creates a new array such that each nested array item is concatenated into it.
  • font-optical-sizing: The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.
  • resolution media query: The resolution CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel.
  • ::selection: The ::selection CSS pseudo-element selects text a user has highlighted.
  • shape-outside: The shape-outside CSS property, along with shape-margin and shape-image-threshold, sets the shape around which adjacent content will wrap.
  • Import and export of mutable globals (WebAssembly): Mutable global variables are importable and exportable.
  • Sign extension operators (WebAssembly): Sign-extension operator instructions extend the width of 8-bit, 16-bit, and 32-bit values to 32-bit and 64-bit values.

New in Safari

The following features are now available in Safari:

  • Array flat() and flatMap(): The flat() and flatMap() methods for arrays creates a new array such that each nested array item is concatenated into it.
  • Async generators: Async generator functions (async function*) create iterators that return multiple promises, one after another, on-demand.
  • Async iterators and the for await..of loop: Asynchronous iterator objects, such as those returned by promises or generator functions, are iterable with the for await .. of loop.
  • overflow: overlay: The overflow: overlay CSS declaration is an alias to overflow: auto. Historically, it caused non-standard behavior, allowing scrollbars to overlay content without taking up layout space.
  • String trimStart() and trimEnd(): The trimStart() and trimEnd() methods of strings return a new string with whitespace removed from the beginning or end of the string.
  • WEBGL_compressed_texture_astc WebGL extension: The WEBGL_compressed_texture_astc extension for WebGL 1.0 and 2.0 contexts adds the Adaptive Scalable Texture Compression format to compressedTexImage2D() and compressedTexSubImage2D().

New in Safari on iOS

The following features are now available in Safari on iOS:

  • Array flat() and flatMap(): The flat() and flatMap() methods for arrays creates a new array such that each nested array item is concatenated into it.
  • Async generators: Async generator functions (async function*) create iterators that return multiple promises, one after another, on-demand.
  • Async iterators and the for await..of loop: Asynchronous iterator objects, such as those returned by promises or generator functions, are iterable with the for await .. of loop.
  • overflow: overlay: The overflow: overlay CSS declaration is an alias to overflow: auto. Historically, it caused non-standard behavior, allowing scrollbars to overlay content without taking up layout space.
  • String trimStart() and trimEnd(): The trimStart() and trimEnd() methods of strings return a new string with whitespace removed from the beginning or end of the string.
  • WEBGL_compressed_texture_astc WebGL extension: The WEBGL_compressed_texture_astc extension for WebGL 1.0 and 2.0 contexts adds the Adaptive Scalable Texture Compression format to compressedTexImage2D() and compressedTexSubImage2D().