Web platform features explorer

📃 May 2024 release notes

Newly available

The following features are newly available:

  • light-dark(): The light-dark() CSS function accepts two colors and uses one depending on the current color scheme.
  • round(), mod(), and rem(): The round(), mod(), and rem() CSS functions compute rounded values and the remainder after division.
  • :state(): The :state() CSS pseudo-class matches custom elements based on their custom state, set through the ElementInternals.states API.
  • text-wrap: balance: The text-wrap: balance CSS declaration balances the length of each line when text is broken into multiple lines. Also known as headline balancing.
  • zoom: The zoom CSS property scales the size of an element. Unlike the transform property, a zoomed element affects page layout.

Widely available

The following features are now widely available:

  • Enterkeyhint: The enterkeyhint global HTML attribute sets the label for a virtual keyboard's Enter key. For example, enterkeyhint="search" may label the key with a magnifying glass icon.
  • fit-content: The fit-content CSS keyword expands a box as needed to fit its contents until the maximum size is reached, preserving the content's preferred aspect ratio.
  • Reference types (WebAssembly): The externref type can be both a value type and a table element type, while funcref can be a value type.

New in Chrome

The following features are now available in Chrome:

  • Active view transition: The :active-view-transition CSS pseudo-class matches the root element when a view transition is active. The :active-view-transition-type() CSS pseudo-class matches only when the active view transition was started with the specified type.
  • Anchor positioning: Anchor positioning places an element based on the position of another element. For example, you can place a tooltip next to the content it references.
  • Attribution reporting: The Attribution Reporting API measures when an ad click or view leads to a conversion, such as a purchase on an advertiser site.
  • Back/forward cache blocking reasons: The notRestoredReasons property of a PerformanceNavigationTiming object explains why the current document was blocked from using the back/forward cache (also known as the bfcache) on navigation.
  • CPU compute pressure: The PressureObserver API monitors CPU load, allowing you to adjust workloads in response to available computing resources. Also known as the Compute Pressure API.
  • Non-cookie storage access: Non-cookie storage access extends the requestStorageAccess() API to let content in cross-site iframes request access to first-party data beyond cookies.
  • 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).
  • view-transition-class: The view-transition-class CSS property sets a name that can be used to apply styles to multiple named view transition pseudo-elements.

New in Chrome Android

The following features are now available in Chrome Android:

  • Active view transition: The :active-view-transition CSS pseudo-class matches the root element when a view transition is active. The :active-view-transition-type() CSS pseudo-class matches only when the active view transition was started with the specified type.
  • Anchor positioning: Anchor positioning places an element based on the position of another element. For example, you can place a tooltip next to the content it references.
  • Attribution reporting: The Attribution Reporting API measures when an ad click or view leads to a conversion, such as a purchase on an advertiser site.
  • Back/forward cache blocking reasons: The notRestoredReasons property of a PerformanceNavigationTiming object explains why the current document was blocked from using the back/forward cache (also known as the bfcache) on navigation.
  • 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).
  • view-transition-class: The view-transition-class CSS property sets a name that can be used to apply styles to multiple named view transition pseudo-elements.

New in Edge

The following features are now available in Edge:

  • Active view transition: The :active-view-transition CSS pseudo-class matches the root element when a view transition is active. The :active-view-transition-type() CSS pseudo-class matches only when the active view transition was started with the specified type.
  • Anchor positioning: Anchor positioning places an element based on the position of another element. For example, you can place a tooltip next to the content it references.
  • Attribution reporting: The Attribution Reporting API measures when an ad click or view leads to a conversion, such as a purchase on an advertiser site.
  • Back/forward cache blocking reasons: The notRestoredReasons property of a PerformanceNavigationTiming object explains why the current document was blocked from using the back/forward cache (also known as the bfcache) on navigation.
  • CPU compute pressure: The PressureObserver API monitors CPU load, allowing you to adjust workloads in response to available computing resources. Also known as the Compute Pressure API.
  • 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).
  • view-transition-class: The view-transition-class CSS property sets a name that can be used to apply styles to multiple named view transition pseudo-elements.

New in Firefox

The following features are now available in Firefox:

  • Screen wake lock: The navigator.wakeLock.request("screen") API prevents the device's screen from dimming or being turned off.
  • Zstandard compression: Zstandard or zstd is fast lossless compression algorithm. When used as a content encoding, it is often faster and offers better compression than brotli.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • Screen wake lock: The navigator.wakeLock.request("screen") API prevents the device's screen from dimming or being turned off.
  • Zstandard compression: Zstandard or zstd is fast lossless compression algorithm. When used as a content encoding, it is often faster and offers better compression than brotli.

New in Safari

The following features are now available in Safari:

  • @starting-style: The @starting-style CSS at-rule sets the starting values for properties that are transitioning when the target element's style is first updated.
  • text-wrap: stable: The text-wrap: stable CSS declaration wraps text using the default algorithm, but does not change wrapping on earlier lines while the text is being edited.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • @starting-style: The @starting-style CSS at-rule sets the starting values for properties that are transitioning when the target element's style is first updated.
  • text-wrap: stable: The text-wrap: stable CSS declaration wraps text using the default algorithm, but does not change wrapping on earlier lines while the text is being edited.