Web platform features explorer

📃 March 2019 release notes

Newly available

The following features are newly available:

  • Abortable fetch: If you construct a fetch request with an AbortSignal, you can cancel the request.
  • AbortController and AbortSignal: The AbortController and AbortSignal APIs allow you to cancel an ongoing operation, such as a fetch() request.
  • Intersection observer: The Intersection Observer API asynchronously observes changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Widely available

The following features are now widely 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.
  • 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

The following features are now available in Chrome:

  • Constructed stylesheets: The CSSStyleSheet constructor creates a new stylesheet which can be shared between a document and multiple shadow roots using adoptedStyleSheets.
  • Gamepad touch buttons: The touched property of a GamepadButton object indicates whether a button capable of detecting touch is currently touched.
  • 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.
  • Preloading responsive images: The imagesrcset and imagesizes attributes with the rel="preload" attribute for the <link> HTML element starts fetching responsive images before they're found in the body of the document.
  • Shadow parts: The part and exportparts HTML attributes expose elements of a shadow DOM as named parts, which can be selected by the ::part() CSS pseudo-element for styling.
  • String matchAll(): The matchAll() method of strings matches a string against a regular expression and returns an iterator of all results, including capturing groups.

New in Chrome Android

The following features are now available in Chrome Android:

  • Constructed stylesheets: The CSSStyleSheet constructor creates a new stylesheet which can be shared between a document and multiple shadow roots using adoptedStyleSheets.
  • Gamepad touch buttons: The touched property of a GamepadButton object indicates whether a button capable of detecting touch is currently touched.
  • Preloading responsive images: The imagesrcset and imagesizes attributes with the rel="preload" attribute for the <link> HTML element starts fetching responsive images before they're found in the body of the document.
  • Shadow parts: The part and exportparts HTML attributes expose elements of a shadow DOM as named parts, which can be selected by the ::part() CSS pseudo-element for styling.
  • String matchAll(): The matchAll() method of strings matches a string against a regular expression and returns an iterator of all results, including capturing groups.

New in Firefox

The following features are now available in Firefox:

  • Case-sensitive attribute selector: The s identifier in a CSS attribute selector matches attribute values case-sensitively in document languages like HTML where attribute values are case-insensitive.
  • Grid animation: Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.
  • Logical properties: CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, block-end refers to the bottom. Also known as flow relative.
  • min-content and max-content: The min-content and max-content CSS keywords represent the smallest and largest intrinsic sizes of an element.
  • Overflow media queries: The overflow-block and overflow-inline CSS media queries set styles based on the way a device displays content that's larger than the viewport or page area. For example, a laptop lets users scroll to reveal content, while a printer displays overflowing content on additional pages.
  • overflow-anchor: The overflow-anchor CSS property sets an element as a possible scroll anchor, reducing unintended scrolling when document changes occur above the current scrollport. This is enabled by default where supported.
  • WebDriver: The WebDriver interface allows out-of-process programs to inspect and control browsers to, for example, run tests of web applications. Also known as WebDriver classic.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • Case-sensitive attribute selector: The s identifier in a CSS attribute selector matches attribute values case-sensitively in document languages like HTML where attribute values are case-insensitive.
  • Grid animation: Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.
  • Logical properties: CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, block-end refers to the bottom. Also known as flow relative.
  • min-content and max-content: The min-content and max-content CSS keywords represent the smallest and largest intrinsic sizes of an element.
  • Overflow media queries: The overflow-block and overflow-inline CSS media queries set styles based on the way a device displays content that's larger than the viewport or page area. For example, a laptop lets users scroll to reveal content, while a printer displays overflowing content on additional pages.
  • overflow-anchor: The overflow-anchor CSS property sets an element as a possible scroll anchor, reducing unintended scrolling when document changes occur above the current scrollport. This is enabled by default where supported.

New in Safari

The following features are now available in Safari:

  • Conic gradients: The conic-gradient() and repeating-conic-gradient() CSS functions create backgrounds that progress between two or more colors around a center point.
  • Contenteditable: The contenteditable global HTML attribute allows the user to edit the content of an element, such as inserting or deleting text.
  • <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.
  • globalThis: The globalThis property accesses the global this value (and hence the global object itself) across environments.
  • HSL: The hsl() and hsla() CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels.
  • <input type="color">: The <input type="color"> HTML element shows a color picker from which users can choose a color value.
  • prefers-color-scheme media query: The prefers-color-scheme CSS media query sets styles based on the requested color scheme, light or dark.
  • RGB: The rgb(), rgba(), and hexadecimal (as in #004488ff`) notations pick colors using red, green, blue, and alpha (transparency) channels.
  • navigator.share(): The navigator.share() method invokes the device's native sharing mechanism and passes text, links, files, and other content to share targets.
  • Text underline position: The text-underline-position and text-underline-offset CSS properties set the position and distance from initial position of text underlines on text with text-decoration: underline.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • Conic gradients: The conic-gradient() and repeating-conic-gradient() CSS functions create backgrounds that progress between two or more colors around a center point.
  • Contenteditable: The contenteditable global HTML attribute allows the user to edit the content of an element, such as inserting or deleting text.
  • <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.
  • globalThis: The globalThis property accesses the global this value (and hence the global object itself) across environments.
  • HSL: The hsl() and hsla() CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels.
  • <input type="color">: The <input type="color"> HTML element shows a color picker from which users can choose a color value.
  • RGB: The rgb(), rgba(), and hexadecimal (as in #004488ff`) notations pick colors using red, green, blue, and alpha (transparency) channels.
  • navigator.share(): The navigator.share() method invokes the device's native sharing mechanism and passes text, links, files, and other content to share targets.
  • Text underline position: The text-underline-position and text-underline-offset CSS properties set the position and distance from initial position of text underlines on text with text-decoration: underline.