Web features explorer

📅 December 2024 release notes

Newly available

The following features are newly available:

  • Page setup: The @page CSS at-rule sets the page-specific dimensions and margins for content such as printed documents, ebooks, or slides.
  • ruby-align: The ruby-align CSS property sets the spacing and alignment of ruby annotation text when it does not fill its available space.
  • 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.
  • scrollbar-gutter: The scrollbar-gutter CSS property reserves space for the scrollbar, preventing unwanted layout changes as the scrollbar appears and disappears.
  • scrollbar-width: The scrollbar-width CSS property sets the width of the scrollbar.
  • ::target-text: The ::target-text pseudo-element allows you to style text highlighted by a URL text fragment such as #:~:text=snippet.
  • Garbage collection (WebAssembly): Garbage collection tracks references for better memory management with garbage-collected languages running in WebAssmbly.
  • Tail call optimization (WebAssembly): Tail call optimization discards a caller frame and replaces the call with a jump instruction.

Widely available

The following features are now widely available:

  • Streams: The streams API creates, composes, and consumes continuously generated data.

New in Safari

The following features are now available in Safari:

  • 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.
  • background-clip: border-area: The background-clip: border-area CSS declaration draws the background underneath only the border of an element.
  • blocking="render": The blocking="render" attribute for <link>, <script>, and <style> elements blocks rendering until the external script or stylesheet has been loaded. For <link rel="expect">, rendering is blocked until a specific element is in the DOM.
  • Cross-document view transitions: The @view-transition CSS rule sets whether a document opts-in to transitions between documents in a multi-page application. Both the old and new document must opt-in for a transition to be triggered.
  • Float16Array: Float16Array is a typed array of 16-bit floating point numbers.
  • Promise.try(): The Promise.try() static method returns a promise that takes a callback of any kind (returns or throws, synchronously or asynchronously) and wraps its result in a Promise.
  • RegExp.escape(): The RegExp.escape() static method takes a string and replaces any characters that are potentially special characters of a regular expression with equivalent escape sequences. For example, RegExp.escape("[abc]") returns "\\[abc\\]".
  • ruby-overhang: The ruby-overhang CSS property sets whether ruby annotations may overlap adjacent text.
  • text-box: The text-box CSS property sets the spacing above and below text based on a font's typographic features. For example, text-box: trim-both ex alphabetic trims the top to the top of the letter x and the bottom to the bottom of most letters, without descenders.
  • Uint8Array base64 and hex conversion: The static Uint8Array.fromBase64() method and the Uint8Array instance methods toBase64() and setFromBase64() convert to and from base64 strings. Similarly, the static Uint8Array.fromHex() method and the instance methods toHex() and setFromHex() convert to and from hex strings.
  • 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 Safari on iOS

The following features are now available in Safari on iOS:

  • 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.
  • background-clip: border-area: The background-clip: border-area CSS declaration draws the background underneath only the border of an element.
  • blocking="render": The blocking="render" attribute for <link>, <script>, and <style> elements blocks rendering until the external script or stylesheet has been loaded. For <link rel="expect">, rendering is blocked until a specific element is in the DOM.
  • Cross-document view transitions: The @view-transition CSS rule sets whether a document opts-in to transitions between documents in a multi-page application. Both the old and new document must opt-in for a transition to be triggered.
  • Float16Array: Float16Array is a typed array of 16-bit floating point numbers.
  • Promise.try(): The Promise.try() static method returns a promise that takes a callback of any kind (returns or throws, synchronously or asynchronously) and wraps its result in a Promise.
  • RegExp.escape(): The RegExp.escape() static method takes a string and replaces any characters that are potentially special characters of a regular expression with equivalent escape sequences. For example, RegExp.escape("[abc]") returns "\\[abc\\]".
  • ruby-overhang: The ruby-overhang CSS property sets whether ruby annotations may overlap adjacent text.
  • text-box: The text-box CSS property sets the spacing above and below text based on a font's typographic features. For example, text-box: trim-both ex alphabetic trims the top to the top of the letter x and the bottom to the bottom of most letters, without descenders.
  • Uint8Array base64 and hex conversion: The static Uint8Array.fromBase64() method and the Uint8Array instance methods toBase64() and setFromBase64() convert to and from base64 strings. Similarly, the static Uint8Array.fromHex() method and the instance methods toHex() and setFromHex() convert to and from hex strings.
  • 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.