Web platform features explorer

📃 September 2024 release notes

Newly available

The following features are newly available:

  • backdrop-filter: The backdrop-filter CSS property applies graphical effects such as blurring or color shifting to the area behind an element.
  • 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.
  • content-visibility: The content-visibility CSS property delays rendering an element, including layout and painting, until it is needed.
  • cookieEnabled: The navigator.cookieEnabled property returns a Boolean value for whether the browser accepts or ignores attempts to write cookie data.
  • Mutually exclusive <details> elements: Multiple <details> elements which use the same name attribute are mutually exclusive. When one member of the group is opened, all other members are closed.
  • HTTP/3: HTTP/3 is a major revision of the HTTP network protocol, providing improved performance and efficiency by using QUIC as the underlying transport protocol.
  • Relative colors: The from keyword for color functions (color(), hsl(), oklch(), etc.) creates a new color based on a given color by modifying the values of the input color. Also known as relative color syntax (RCS).
  • Typed function references (WebAssembly): A typed function reference can be called directly.

Widely available

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

New in Chrome

The following features are now available in Chrome:

  • calc-size(): The calc-size() CSS function computes mathematical expressions that include height and width keyword values, for example calc-size(fit-content, size / 2). Not to be confused with the calc() CSS function, which cannot use keyword values.
  • interpolate-size: The interpolate-size CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to auto or fit-content.
  • Intl.DurationFormat: The Intl.DurationFormat API creates a locale-aware formatter that turns an object representing a duration (such as days, hours, and minutes) into a string.
  • Scheduler API: The scheduler API provides a way to prioritize all tasks belonging to an application.
  • Scroll snap events: The scrollsnapchanging and scrollsnapchange events fire when a scroll gesture changes the selected scroll snap target.
  • Virtual pressure sources: The CreateVirtualPressureSource WebDriver command creates artificial sources of compute pressure for testing without the need real device sources of compute pressure.

New in Chrome Android

The following features are now available in Chrome Android:

  • calc-size(): The calc-size() CSS function computes mathematical expressions that include height and width keyword values, for example calc-size(fit-content, size / 2). Not to be confused with the calc() CSS function, which cannot use keyword values.
  • interpolate-size: The interpolate-size CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to auto or fit-content.
  • Intl.DurationFormat: The Intl.DurationFormat API creates a locale-aware formatter that turns an object representing a duration (such as days, hours, and minutes) into a string.
  • Scheduler API: The scheduler API provides a way to prioritize all tasks belonging to an application.
  • Scroll snap events: The scrollsnapchanging and scrollsnapchange events fire when a scroll gesture changes the selected scroll snap target.
  • Virtual pressure sources: The CreateVirtualPressureSource WebDriver command creates artificial sources of compute pressure for testing without the need real device sources of compute pressure.

New in Edge

The following features are now available in Edge:

  • calc-size(): The calc-size() CSS function computes mathematical expressions that include height and width keyword values, for example calc-size(fit-content, size / 2). Not to be confused with the calc() CSS function, which cannot use keyword values.
  • interpolate-size: The interpolate-size CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to auto or fit-content.
  • Intl.DurationFormat: The Intl.DurationFormat API creates a locale-aware formatter that turns an object representing a duration (such as days, hours, and minutes) into a string.
  • Scheduler API: The scheduler API provides a way to prioritize all tasks belonging to an application.
  • Scroll snap events: The scrollsnapchanging and scrollsnapchange events fire when a scroll gesture changes the selected scroll snap target.
  • Virtual pressure sources: The CreateVirtualPressureSource WebDriver command creates artificial sources of compute pressure for testing without the need real device sources of compute pressure.

New in Firefox

The following features are now available in Firefox:

  • WebCodecs: The WebCodecs API provides low-level access to individual video frames and chunks of audio samples, for full control over the way media is processed.

New in Safari

The following features are now available in Safari:

  • Container style queries: Container style queries with the @container at-rule apply styles to an element based on the values of custom properties of its container.
  • display animation: You can animate elements between display: none and any other display value or animate between content-visibility: hidden and any other content-visibility value. This also applies to transitions.
  • writingsuggestions: The writingsuggestions HTML attribute turns on or off a browser's writing suggestions. Writing suggestions vary by browser. For example, if turned on then a browser might show inline text completions accepted by pressing Tab.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • Container style queries: Container style queries with the @container at-rule apply styles to an element based on the values of custom properties of its container.
  • display animation: You can animate elements between display: none and any other display value or animate between content-visibility: hidden and any other content-visibility value. This also applies to transitions.
  • writingsuggestions: The writingsuggestions HTML attribute turns on or off a browser's writing suggestions. Writing suggestions vary by browser. For example, if turned on then a browser might show inline text completions accepted by pressing Tab.