Web platform features explorer

📃 July 2020 release notes

Newly available

The following features are newly available:

  • column-span: The column-span CSS property controls whether a child element extends across all columns of a multi-column parent.
  • line-break: The line-break CSS property sets how strictly to apply rules for wrapping text to new lines, especially for symbols and punctuation.
  • min(), max(), and clamp(): The min() and max() CSS functions return the minimum or maximum of the arguments, while clamp() clamps a value to a given range.
  • Numeric separators: To improve readability for numeric literals, underscores (_) can be used as separators. For example, 1_050.95 is equivalent to 1050.95.
  • Pointer Events: Pointer events, such as pointerdown, and the PointerEvent API, represent general pointing inputs, from a wide range of devices, such as a mouse, pen or stylus, or touch with one or more fingers. Not to be confused with the pointer-events CSS property.
  • Promise.allSettled(): The Promise.allSettled() static method waits for an array of promises to settle (resolve or reject).
  • :read-only and :read-write: The :read-only and :read-write CSS pseudo-classes match elements that are read-only or read-write, respectively. For example, :read-only matches <input> and <textarea> elements with the readonly attribute.
  • Resize observer: The ResizeObserver API observes and reacts to changes in the size of DOM elements.
  • revert: The revert CSS keyword resets any property to its previous default, provided by either the user or browser stylesheets. For example, setting display: revert on a <div> will likely result in display: block, the browser default style. This is often confused with initial.
  • 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.

New in Chrome

The following features are now available in Chrome:

  • appearance: The appearance CSS property controls the appearance of form controls. Using appearance: none disables any default native appearance and allows the elements to be styled with CSS.
  • Flexbox gap: The gap CSS property in a flexbox layout sets the size of the space between items.
  • Layout instability: The layout-shift performance entry and LayoutShift API measures the layout stability of web pages based on movements of the elements on the page.
  • ruby-position: The ruby-position CSS property sets the position of a ruby annotation in relation to its base text. Annotations can display over, under, or interleaved with the base text.
  • Screen wake lock: The navigator.wakeLock.request("screen") API prevents the device's screen from dimming or being turned off.
  • Weak references: The WeakRef and FinalizationRegistry objects hold references to garbage-collectable objects without creating strong references that prevent their garbage collection.

New in Chrome Android

The following features are now available in Chrome Android:

  • Application shortcuts: The shortcuts web app manifest member registers common actions of an installed web app with the device. The device can present these actions to the user in contextually appropriate locations, such as jump lists on Windows or the app launcher on Android.
  • appearance: The appearance CSS property controls the appearance of form controls. Using appearance: none disables any default native appearance and allows the elements to be styled with CSS.
  • Content Index: The Content Index API allows developers to register their offline enabled content with the browser.
  • Flexbox gap: The gap CSS property in a flexbox layout sets the size of the space between items.
  • Layout instability: The layout-shift performance entry and LayoutShift API measures the layout stability of web pages based on movements of the elements on the page.
  • ruby-position: The ruby-position CSS property sets the position of a ruby annotation in relation to its base text. Annotations can display over, under, or interleaved with the base text.
  • Screen wake lock: The navigator.wakeLock.request("screen") API prevents the device's screen from dimming or being turned off.
  • Weak references: The WeakRef and FinalizationRegistry objects hold references to garbage-collectable objects without creating strong references that prevent their garbage collection.
  • WebOTP: The OTPCredential API represents a one-time-password (OTP).

New in Edge

The following features are now available in Edge:

  • appearance: The appearance CSS property controls the appearance of form controls. Using appearance: none disables any default native appearance and allows the elements to be styled with CSS.
  • Flexbox gap: The gap CSS property in a flexbox layout sets the size of the space between items.
  • Layout instability: The layout-shift performance entry and LayoutShift API measures the layout stability of web pages based on movements of the elements on the page.
  • ruby-position: The ruby-position CSS property sets the position of a ruby annotation in relation to its base text. Annotations can display over, under, or interleaved with the base text.
  • Screen wake lock: The navigator.wakeLock.request("screen") API prevents the device's screen from dimming or being turned off.
  • Weak references: The WeakRef and FinalizationRegistry objects hold references to garbage-collectable objects without creating strong references that prevent their garbage collection.

New in Firefox

The following features are now available in Firefox:

  • Logical assignments: The logical AND assignment (&&=) and the logical OR assignment (||=) operators short-circuit the respective binary logical operators.
  • Nullish coalescing: The nullish coalescing (??) and nullish coalescing assignment (??=) operators return (or assign) its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
  • Promise.any(): The Promise.any() static method returns a promise that fulfills as soon as the first of an iterable of promises fulfills, with that promise's value. Otherwise, it rejects with an AggregateError when all of the promises have rejected.
  • SharedArrayBuffer and Atomics: The SharedArrayBuffer object represents bytes shared between multiple workers and the main thread. The Atomics object safely accesses SharedArrayBuffer data to make sure predictable values are read and written and that operations are not interrupted.
  • Reference types (WebAssembly): The externref type can be both a value type and a table element type, while funcref can be a value type.
  • Threads and atomics (WebAssembly): Threads in WebAssembly run code in parallel, while atomic memory instructions can guarantee that no two threads can read or write to shared memory at the same time.
  • Weak references: The WeakRef and FinalizationRegistry objects hold references to garbage-collectable objects without creating strong references that prevent their garbage collection.
  • SharedArrayBuffer in WebGL: SharedArrayBuffer objects can be used in WebGL APIs that previously only worked with ArrayBuffer objects.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • AudioWorklet: The AudioWorklet API runs module code in a separate thread, specifically for non-blocking, low latency audio processing.
  • clip-path: The clip-path CSS property and SVG attribute set the visible area of an element. Everything outside the area will be hidden.
  • contain: The contain CSS property sets limits to the scope of styles, layout, and paint rendering for speed and efficiency. The none keyword value disables containment, strict is equivalent to contain: size layout style paint, and content is equivalent to contain: layout style paint.
  • Layout containment: The contain: layout CSS declaration isolates the inside of an element such that it cannot affect the layout of the rest of the page or be affected by the rest of the page. This permits the browser to avoid slower layout calculations.
  • Paint containment: The contain: paint CSS declaration prevents an element's descendants from being drawn outside the boundaries of the containing element, with any overflow clipped. This permits the browser to avoid slower painting calculations.
  • Size containment: The contain: size CSS declaration sets an element's dimensions exclusively by its height and width properties, ignoring its contents and descendants. This permits the browser to avoid slower layout calculations.
  • Contenteditable: The contenteditable global HTML attribute allows the user to edit the content of an element, such as inserting or deleting text.
  • 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.
  • Individual transform properties: The translate, rotate, and scale CSS properties apply single transformations independently, as opposed to applying multiple transformations with the transform CSS property.
  • Intl.ListFormat: The Intl.ListFormat API creates a locale-aware formatter that turns iterable objects into localized strings.
  • Intl.Locale: The Intl.Locale API parses Unicode locale identifiers, with language, region, and script codes, such as zh-Hans-CN or en-GB.
  • Intl.RelativeTimeFormat: The Intl.RelativeTimeFormat API creates a locale-aware formatter that turns an object representing a relative time (such as '1 day ago') into a localized string.
  • Logical assignments: The logical AND assignment (&&=) and the logical OR assignment (||=) operators short-circuit the respective binary logical operators.
  • 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.
  • Motion path: The offset CSS property animates an element along a defined motion path.
  • Nullish coalescing: The nullish coalescing (??) and nullish coalescing assignment (??=) operators return (or assign) its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
  • OES_fbo_render_mipmap WebGL extension: The OES_fbo_render_mipmap extension for WebGL 1.0 contexts attaches any level of a texture to a framebuffer object.
  • 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.
  • Promise.any(): The Promise.any() static method returns a promise that fulfills as soon as the first of an iterable of promises fulfills, with that promise's value. Otherwise, it rejects with an AggregateError when all of the promises have rejected.
  • Quotes: The quotes CSS property sets the quotation marks inserted via the content CSS property or <q> element.
  • navigator.share(): The navigator.share() method invokes the device's native sharing mechanism and passes text, links, files, and other content to share targets.
  • SharedArrayBuffer and Atomics: The SharedArrayBuffer object represents bytes shared between multiple workers and the main thread. The Atomics object safely accesses SharedArrayBuffer data to make sure predictable values are read and written and that operations are not interrupted.
  • String replaceAll(): The replaceAll() method of strings returns a new string where all matches of a pattern (a string or regular expression) have been substituted with a replacement string.
  • Subgrid: The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.
  • 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.
  • Two-value display property: The display CSS property accepts multiple keyword values, such as inline flex or block flow, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.
  • user-select: The user-select CSS property controls which elements can be selected by the user.
  • BigInt to i64 conversion (WebAssembly): Integer values pass bidirectionally between JavaScript and WebAssembly, converted to i64 values in WebAssembly or BigInt values in JavaScript.
  • Bulk memory operations (WebAssembly): Bulk memory operations, such as copy and init, mirror the efficiency of native memcpy and memmove operations.
  • Multi-value (WebAssembly): Instructions and blocks can produce multiple result values.
  • Reference types (WebAssembly): The externref type can be both a value type and a table element type, while funcref can be a value type.
  • Threads and atomics (WebAssembly): Threads in WebAssembly run code in parallel, while atomic memory instructions can guarantee that no two threads can read or write to shared memory at the same time.
  • Weak references: The WeakRef and FinalizationRegistry objects hold references to garbage-collectable objects without creating strong references that prevent their garbage collection.
  • SharedArrayBuffer in WebGL: SharedArrayBuffer objects can be used in WebGL APIs that previously only worked with ArrayBuffer objects.