Web platform 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.

New in Safari

The following features are now available in Safari:

  • background-clip: border-area: The background-clip: border-area CSS declaration draws the background underneath only the border of an element.
  • 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.
  • line-clamp: The line-clamp CSS property limits the text in a block container to a certain number of lines. The prefixed -webkit-line-clamp is widely supported but only works with -webkit-box-orient: vertical in combination with display: -webkit-box or display: -webkit-inline-box.
  • 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 Uint8Array object methods fromBase64(), toBase64(), and setFromBase64() convert to and from base64 strings. The fromHex(), toHex(), and setFromHex() methods 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.
  • View transitions: View transitions allow you to create animated visual transitions between different states of a document.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • background-clip: border-area: The background-clip: border-area CSS declaration draws the background underneath only the border of an element.
  • 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.
  • line-clamp: The line-clamp CSS property limits the text in a block container to a certain number of lines. The prefixed -webkit-line-clamp is widely supported but only works with -webkit-box-orient: vertical in combination with display: -webkit-box or display: -webkit-inline-box.
  • 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 Uint8Array object methods fromBase64(), toBase64(), and setFromBase64() convert to and from base64 strings. The fromHex(), toHex(), and setFromHex() methods 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.
  • View transitions: View transitions allow you to create animated visual transitions between different states of a document.