📃 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.

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.

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.
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.
getHTML(): The getHTML() method of Element and ShadowRoot objects serializes an element's DOM to an HTML string.
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.

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.
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.
getHTML(): The getHTML() method of Element and ShadowRoot objects serializes an element's DOM to an HTML string.
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.

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.
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.
getHTML(): The getHTML() method of Element and ShadowRoot objects serializes an element's DOM to an HTML string.
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.

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 a fast lossless compression algorithm. When used as a content encoding, it is often faster and offers better compression than brotli.

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 a fast lossless compression algorithm. When used as a content encoding, it is often faster and offers better compression than brotli.

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: The text-wrap CSS property sets how lines break in text that overflows the container. It is a shorthand for text-wrap-style and text-wrap-mode.

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: The text-wrap CSS property sets how lines break in text that overflows the container. It is a shorthand for text-wrap-style and text-wrap-mode.