Web platform features explorer

📃 March 2022 release notes

Newly available

The following features are newly available:

  • 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.
  • Array at(): The at() method of arrays and typed arrays returns the item at an index, including negative indices for getting items relative to the end of an array. Also known as the relative indexing method.
  • ::backdrop: The ::backdrop CSS pseudo-element is a box underneath an element in the top layer, such as a <dialog>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.
  • background-attachment: The background-attachment CSS property sets whether an element's background image or gradient moves as the element scrolls.
  • BroadcastChannel: The BroadcastChannel API allows you to send messages between same-origin browsing contexts, such as between the same page loaded in multiple tabs.
  • Cascade layers: The @layer CSS at-rule avoids specificity conflicts by providing priority levels for different groups of CSS rules, such as low-priority styles like resets, and high-priority styles like UI components.
  • 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.
  • <dialog>: The <dialog> HTML element represents a modal or non-modal dialog box, such as a confirmation prompt or a subwindow used to enter data.
  • :focus-visible: The :focus-visible CSS pseudo-class selects elements that match the :focus pseudo-class and meets the browser's criteria for visually emphasizing focused elements.
  • hardwareConcurrency: The navigator.hardwareConcurrency read-only property returns the number of logical processors available to run threads on the user's computer.
  • scroll-behavior: The scroll-behavior CSS property controls whether scrolling is smooth or snaps, for scroll actions not performed by the user such as those triggered by navigation.
  • String at(): The at() method of strings returns the character (one UTF-16 code unit) at an index, including negative indices for getting the character relative to the end of the string. Also known as the relative indexing method.
  • structuredClone(): The structuredClone() global method creates a deep copy of an object. Values that cannot be cloned can instead be transferred, making the original value no longer usable.
  • text-combine-upright: The text-combine-upright CSS property displays multiple characters in the space of a single character in vertical text. This is used in East Asian documents to display Latin-based strings such as components of a date or letters of an initialism.
  • text-emphasis: The text-emphasis CSS property sets position and style for text emphasis marks, especially for East Asian languages.
  • 3D transforms: The transform CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms.
  • Locks: The navigator.locks API coordinates work with shared resources through mutually exclusive ownership of a resource's name. Also known as web locks.

Widely available

The following features are now widely available:

  • 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.
  • Intl.PluralRules: The Intl.PluralRules API creates a locale-aware object that tells you which of the language's pluralization rules apply based on a given number.
  • Print events: An alternative to @media print queries, the beforeprint and afterprint events allow you to change the page for printing and and restore the page after printing.
  • Sticky positioning: The position: sticky CSS declaration positions an element in the normal flow until it crosses a specified threshold, at which points it becomes fixed (stuck) at that position.
  • touch-action: The touch-action CSS property sets whether an element on a touch screen can be panned or pinched to zoom.

New in Chrome

The following features are now available in Chrome:

  • willReadFrequently: The optional willReadFrequently parameter of a canvas's getContext() method permits the browser to optimize for frequent getImageData() calls by avoiding hardware acceleration. Also known as multiple readback.
  • contextlost and contextrestored: The contextlost event for <canvas> fires when the canvas backing storage is lost, while the contextrestored event fires when it is recreated.
  • Canvas createConicGradient(): The createConicGradient() methods draw a conic gradient to a 2D canvas.
  • Canvas reset(): The reset() method clears a canvas to its initial state.
  • Canvas roundRect(): The roundRect() methods draw a rounded rectangle to a 2D canvas.
  • showPicker() for <input>: The showPicker() method for <input> elements shows the user interface for picking a value. For example, for <input type="date"> it shows the interface for picking a date.
  • OES_draw_buffers_indexed WebGL extension: The OES_draw_buffers_indexed extension for WebGL 2.0 contexts allows you to control blending on a per-color basis when writing to multiple color buffers simultaneously.

New in Chrome Android

The following features are now available in Chrome Android:

  • willReadFrequently: The optional willReadFrequently parameter of a canvas's getContext() method permits the browser to optimize for frequent getImageData() calls by avoiding hardware acceleration. Also known as multiple readback.
  • contextlost and contextrestored: The contextlost event for <canvas> fires when the canvas backing storage is lost, while the contextrestored event fires when it is recreated.
  • Canvas createConicGradient(): The createConicGradient() methods draw a conic gradient to a 2D canvas.
  • Canvas reset(): The reset() method clears a canvas to its initial state.
  • Canvas roundRect(): The roundRect() methods draw a rounded rectangle to a 2D canvas.
  • showPicker() for <input>: The showPicker() method for <input> elements shows the user interface for picking a value. For example, for <input type="date"> it shows the interface for picking a date.
  • Web NFC: The NDEFReader API reads and writes messages to near-field communication (NFC) tags.
  • OES_draw_buffers_indexed WebGL extension: The OES_draw_buffers_indexed extension for WebGL 2.0 contexts allows you to control blending on a per-color basis when writing to multiple color buffers simultaneously.

New in Edge

The following features are now available in Edge:

  • willReadFrequently: The optional willReadFrequently parameter of a canvas's getContext() method permits the browser to optimize for frequent getImageData() calls by avoiding hardware acceleration. Also known as multiple readback.
  • contextlost and contextrestored: The contextlost event for <canvas> fires when the canvas backing storage is lost, while the contextrestored event fires when it is recreated.
  • Canvas createConicGradient(): The createConicGradient() methods draw a conic gradient to a 2D canvas.
  • Canvas reset(): The reset() method clears a canvas to its initial state.
  • Canvas roundRect(): The roundRect() methods draw a rounded rectangle to a 2D canvas.
  • showPicker() for <input>: The showPicker() method for <input> elements shows the user interface for picking a value. For example, for <input type="date"> it shows the interface for picking a date.

New in Firefox

The following features are now available in Firefox:

  • Form-associated custom elements: Custom elements may act like built-in form elements, via the the attachInternals() method of HTMLElement and the ElementInternals API.
  • Hyphenate character: The hyphenate-character CSS property sets the character or string to use at the end of a line before a line break.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • Form-associated custom elements: Custom elements may act like built-in form elements, via the the attachInternals() method of HTMLElement and the ElementInternals API.
  • Hyphenate character: The hyphenate-character CSS property sets the character or string to use at the end of a line before a line break.

New in Safari

The following features are now available in Safari:

  • abs() and sign(): The abs() and sign() CSS functions compute the absolute value or the sign of the input.
  • Array findLast() and findLastIndex(): The findLast() and findLastIndex() methods of arrays and typed arrays search an array in reverse order for the first item that satisfies a test function.
  • Style containment: The contain: style CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (counter-increment and counter-set) and quotation styles (content property quote values) beyond the element's descendants.
  • pow(), sqrt(), hypot(), log(), and exp(): The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions.
  • font-palette: The font-palette CSS property selects a color palette from the font, optionally overriding individual colors in the @font-palette-values at-rule.
  • :has(): The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.
  • ic unit: The CSS ic unit corresponds to the width of CJK ideographic characters.
  • Masks: The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.
  • Media element pseudo-classes: The :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked CSS pseudo-classes match <audio> and <video> elements based on their state.
  • Oklab and Oklch: The Oklab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is, aiming to match how humans perceive colors. Oklch is a variant of Oklab with polar coordinates. These color spaces can be used with the CSS color(), oklab(), and oklch() functions.
  • Print color adjust: The print-color-adjust CSS property sets whether styles of printed pages should be adjusted to use less ink, in cases such as light text on a dark background.
  • requestVideoFrameCallback(): The requestVideoFrameCallback() method for <video> schedules a function that runs with the next video frame. It is similar to requestAnimationFrame(), but for video.
  • round(), mod(), and rem(): The round(), mod(), and rem() CSS functions compute rounded values and the remainder after division.
  • sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS): The sin(), cos(), tan(), asin(), acos(), atan(), and atan2() CSS functions compute various trigonometric functions.
  • Small, large, and dynamic viewport units: The sv*, lv*, and dv* CSS viewport units are relative to the smallest, largest, and current (dynamic) viewport size. They are used to size elements in relation to the viewport's dimensions.
  • WebRTC encoded transform: The WebRTC encoded transform API allows you to modify audio and video streams in WebRTC connections. For example, it can be used for visual effects or custom codecs.
  • WebRTC SCTP information: The sctp object on RTCPeerConnection represents the negotiated SCTP transport. SCTP (Stream Control Transmission Protocol) is the protocol that RTCDataChannel uses.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • abs() and sign(): The abs() and sign() CSS functions compute the absolute value or the sign of the input.
  • Array findLast() and findLastIndex(): The findLast() and findLastIndex() methods of arrays and typed arrays search an array in reverse order for the first item that satisfies a test function.
  • Style containment: The contain: style CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (counter-increment and counter-set) and quotation styles (content property quote values) beyond the element's descendants.
  • pow(), sqrt(), hypot(), log(), and exp(): The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions.
  • font-palette: The font-palette CSS property selects a color palette from the font, optionally overriding individual colors in the @font-palette-values at-rule.
  • :has(): The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.
  • ic unit: The CSS ic unit corresponds to the width of CJK ideographic characters.
  • 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.
  • Masks: The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.
  • Media element pseudo-classes: The :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked CSS pseudo-classes match <audio> and <video> elements based on their state.
  • Oklab and Oklch: The Oklab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is, aiming to match how humans perceive colors. Oklch is a variant of Oklab with polar coordinates. These color spaces can be used with the CSS color(), oklab(), and oklch() functions.
  • Print color adjust: The print-color-adjust CSS property sets whether styles of printed pages should be adjusted to use less ink, in cases such as light text on a dark background.
  • requestVideoFrameCallback(): The requestVideoFrameCallback() method for <video> schedules a function that runs with the next video frame. It is similar to requestAnimationFrame(), but for video.
  • round(), mod(), and rem(): The round(), mod(), and rem() CSS functions compute rounded values and the remainder after division.
  • sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS): The sin(), cos(), tan(), asin(), acos(), atan(), and atan2() CSS functions compute various trigonometric functions.
  • Small, large, and dynamic viewport units: The sv*, lv*, and dv* CSS viewport units are relative to the smallest, largest, and current (dynamic) viewport size. They are used to size elements in relation to the viewport's dimensions.
  • WebRTC encoded transform: The WebRTC encoded transform API allows you to modify audio and video streams in WebRTC connections. For example, it can be used for visual effects or custom codecs.
  • WebRTC SCTP information: The sctp object on RTCPeerConnection represents the negotiated SCTP transport. SCTP (Stream Control Transmission Protocol) is the protocol that RTCDataChannel uses.