Web platform features explorer

📃 March 2017 release notes

Newly available

The following features are newly available:

  • Clipboard events: The "copy", "cut", and "paste" events fire on elements when the user starts an action with the clipboard.
  • column-fill: The column-fill CSS property sets the distribution of content across columns in a multi-column layout.
  • Exponentiation operator: The exponentiation (**) operator returns the result of raising the first operand to the power of the second operand.
  • Fetch: The fetch() method makes asynchronous HTTP requests.
  • Gamepad: The navigator.getGamepads() API accesses and responds to signals from game controllers.
  • <input type="range">: The <input type="range"> element represents a slider for choosing an inexact value between a minimum and maximum value.
  • 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.
  • Selection: The Selection API controls and modifies user text selections within the page.
  • srcset and sizes: The srcset and sizes attributes for <img> elements set a list of possible sources for the image and a corresponding list of size conditions for choosing a source, to show a responsive image that fits the size of the display.
  • 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 Chrome

The following features are now available in Chrome:

  • caret-color: The caret-color CSS property sets the color of the text insertion pointer in a text input.
  • Grid: CSS grid is a two-dimensional layout system, which lays content out in rows and columns.
  • Navigation timing: The navigation performance entry and the PerformanceNavigationTiming API measures navigation events, such as loading time or the number of redirects.
  • ::placeholder: The ::placeholder CSS pseudo-element selects help text in <input> and <textarea> elements when no value is set.
  • 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.
  • text-decoration-line: blink: The text-decoration: blink CSS declaration flashes text between visible and invisible.
  • WebAssembly: The WebAssembly.instantiate() and WebAssembly.instantiateStreaming() global static methods load WebAssembly code (also known as Wasm), a portable binary instruction format.

New in Chrome Android

The following features are now available in Chrome Android:

  • caret-color: The caret-color CSS property sets the color of the text insertion pointer in a text input.
  • Grid: CSS grid is a two-dimensional layout system, which lays content out in rows and columns.
  • Media session: The navigator.mediaSession API integrates with platform UI for media playback. It can be used to set metadata such as title and artwork, and to handle user actions like playing, pausing, or seeking.
  • Navigation timing: The navigation performance entry and the PerformanceNavigationTiming API measures navigation events, such as loading time or the number of redirects.
  • ::placeholder: The ::placeholder CSS pseudo-element selects help text in <input> and <textarea> elements when no value is set.
  • 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.
  • text-decoration-line: blink: The text-decoration: blink CSS declaration flashes text between visible and invisible.
  • WebAssembly: The WebAssembly.instantiate() and WebAssembly.instantiateStreaming() global static methods load WebAssembly code (also known as Wasm), a portable binary instruction format.

New in Firefox

The following features are now available in Firefox:

  • Async functions: The async and await keywords allow you to use the asynchronous, promise-based behavior of a function without using promise chains.
  • :focus-within: The :focus-within CSS pseudo-class matches an element if the element or any of its children are focused.
  • Grid: CSS grid is a two-dimensional layout system, which lays content out in rows and columns.
  • HSL: The hsl() and hsla() CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels.
  • isSecureContext: The isSecureContext global property is a boolean for whether the current browsing context is secure. This is primarily a check that the page has been served over an HTTPS URL.
  • RGB: The rgb(), rgba(), and hexadecimal (as in #004488ff) notations pick colors using red, green, blue, and alpha (transparency) channels.
  • touch-action: The touch-action CSS property sets whether an element on a touch screen can be panned or pinched to zoom.
  • Touch events: Touch events touchstart, touchmove, touchend, and touchcancel fire when users interact with a touch-sensitive surface, such as a screen or drawing tablet. These events are similar to mouse events.
  • WebAssembly: The WebAssembly.instantiate() and WebAssembly.instantiateStreaming() global static methods load WebAssembly code (also known as Wasm), a portable binary instruction format.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • Async functions: The async and await keywords allow you to use the asynchronous, promise-based behavior of a function without using promise chains.
  • :focus-within: The :focus-within CSS pseudo-class matches an element if the element or any of its children are focused.
  • Grid: CSS grid is a two-dimensional layout system, which lays content out in rows and columns.
  • HSL: The hsl() and hsla() CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels.
  • isSecureContext: The isSecureContext global property is a boolean for whether the current browsing context is secure. This is primarily a check that the page has been served over an HTTPS URL.
  • RGB: The rgb(), rgba(), and hexadecimal (as in #004488ff) notations pick colors using red, green, blue, and alpha (transparency) channels.
  • touch-action: The touch-action CSS property sets whether an element on a touch screen can be panned or pinched to zoom.
  • WebAssembly: The WebAssembly.instantiate() and WebAssembly.instantiateStreaming() global static methods load WebAssembly code (also known as Wasm), a portable binary instruction format.

New in Safari

The following features are now available in Safari:

  • Async functions: The async and await keywords allow you to use the asynchronous, promise-based behavior of a function without using promise chains.
  • Autonomous custom elements: Autonomous custom elements are HTML elements with a hyphenated tag name (like <example-element>) that have behaviors you define.
  • Constraint validation API: Methods that validate form controls before submission, such as checkValidity(), reportValidity() and setCustomValidity().
  • CSS.escape(): The CSS.escape() static method escapes a string so that it can be used in a valid CSS selector.
  • download: The download attribute for <a> elements loads the target URL as a file to be saved, instead of navigating to it. An optional attribute value sets a default file name.
  • File API: The File API represents and reads from file data and metadata. Typically, you get files through other APIs, such as the <input type="file"> element or drag-and-drop events. You may also send file data to other APIs, such as creating images or drawing on canvases.
  • :focus-within: The :focus-within CSS pseudo-class matches an element if the element or any of its children are focused.
  • Grid: CSS grid is a two-dimensional layout system, which lays content out in rows and columns.
  • ::placeholder: The ::placeholder CSS pseudo-element selects help text in <input> and <textarea> elements when no value is set.
  • Pointer lock: Provides access to raw mouse movement by locking the target of mouse events to a single element and hiding the mouse cursor.
  • prefers-reduced-motion media query: The prefers-reduced-motion CSS media query sets styles based on whether the user prefers to minimize the amount of non-essential animations on the device, such as scrolling, panning, zooming, and strobing.
  • shape-outside: The shape-outside CSS property, along with shape-margin and shape-image-threshold, sets the shape around which adjacent content will wrap.
  • shapes: The circle(), ellipse(), inset(), polygon(), rect(), and xywh() CSS shape functions create shapes for use with clip-path and shape-outside.
  • Stable array sort: Stable array sort() function
  • Text encoding and decoding: The TextEncoder API transforms a stream of code points into a byte stream with UTF-8 encoding, and TextDecoder does the reverse.
  • Upgrade insecure requests: The Upgrade-Insecure-Requests HTTP request header tells the server that the response should redirect to a secure (HTTPS) resource.
  • writing-mode SVG 1.1 values: The lr, lr-tb, rl, rl-tb, tb, and tb-rl keyword values for the writing-mode CSS property set the text direction for elements in SVG 1.1 documents.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • Async functions: The async and await keywords allow you to use the asynchronous, promise-based behavior of a function without using promise chains.
  • autocapitalize: The autocapitalize global HTML attribute sets the virtual keyboard capitalization behavior for user input on an element, such as the first letter of sentences or all words.
  • Autonomous custom elements: Autonomous custom elements are HTML elements with a hyphenated tag name (like <example-element>) that have behaviors you define.
  • Constraint validation API: Methods that validate form controls before submission, such as checkValidity(), reportValidity() and setCustomValidity().
  • CSS.escape(): The CSS.escape() static method escapes a string so that it can be used in a valid CSS selector.
  • File API: The File API represents and reads from file data and metadata. Typically, you get files through other APIs, such as the <input type="file"> element or drag-and-drop events. You may also send file data to other APIs, such as creating images or drawing on canvases.
  • :focus-within: The :focus-within CSS pseudo-class matches an element if the element or any of its children are focused.
  • Grid: CSS grid is a two-dimensional layout system, which lays content out in rows and columns.
  • <meter>: The <meter> element represents a scalar value within a known range or a fractional value, typically shown as a progress bar.
  • ::placeholder: The ::placeholder CSS pseudo-element selects help text in <input> and <textarea> elements when no value is set.
  • prefers-reduced-motion media query: The prefers-reduced-motion CSS media query sets styles based on whether the user prefers to minimize the amount of non-essential animations on the device, such as scrolling, panning, zooming, and strobing.
  • shape-outside: The shape-outside CSS property, along with shape-margin and shape-image-threshold, sets the shape around which adjacent content will wrap.
  • shapes: The circle(), ellipse(), inset(), polygon(), rect(), and xywh() CSS shape functions create shapes for use with clip-path and shape-outside.
  • Stable array sort: Stable array sort() function
  • Text encoding and decoding: The TextEncoder API transforms a stream of code points into a byte stream with UTF-8 encoding, and TextDecoder does the reverse.
  • Upgrade insecure requests: The Upgrade-Insecure-Requests HTTP request header tells the server that the response should redirect to a secure (HTTPS) resource.
  • writing-mode SVG 1.1 values: The lr, lr-tb, rl, rl-tb, tb, and tb-rl keyword values for the writing-mode CSS property set the text direction for elements in SVG 1.1 documents.