Web platform features explorer

📃 March 2024 release notes

Newly available

The following features are newly available:

  • AbortSignal.any(): The AbortSignal.any() static method combines an iterable of abort signals into a single signal, with the abort reason taken from the first signal to abort.
  • Array grouping: The Object.groupBy() and Map.groupBy() static methods group values of arrays and iterables based on a function that returns a key for each value.
  • checkVisibility(): The checkVisibility() method checks if an element is potentially visible, with optional parameters for the kinds of visibility to check. For example, it checks whether the element has the style display: none, but can also check for visibility: hidden.
  • Promise.withResolvers(): The Promise.withResolvers() static method is an alternative to the Promise() constructor that returns both the promise and resolution functions. You can use this to access resolve and reject outside the scope of the executor function.
  • 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.
  • text-wrap: nowrap: The text-wrap: nowrap CSS declaration prevents text breaking into multiple lines. Text that doesn't fit overflows instead.
  • Transferable ArrayBuffer: The transfer() and transferToFixedLength() methods of ArrayBuffer move a buffer from one context to another (for example, to a worker).
  • Extended constant expressions (WebAssembly): The i32.add, i32.sub, i32.mul, i64.add, i64.sub, and i64.mul operations extend constant expressions to include arithmetic.
  • white-space-collapse: The white-space-collapse CSS property sets whether new line characters are shown as line breaks, and whether multiple consecutive spaces are all displayed or combined.

Widely available

The following features are now widely available:

  • aspect-ratio: The aspect-ratio CSS property controls the width-to-height ratio of elements. For <img> and <video> elements, the width and height attributes used together with height: auto control the aspect ratio while the image/video is loading.
  • BigInt64Array: The BigInt64Array and BigUint64Array typed arrays represent 64-bit integers, signed and unsigned respectively.
  • Error cause: The cause property of errors records the specific original cause of the error, particularly for errors that have been re-thrown.
  • EXT_color_buffer_float WebGL extension: The EXT_color_buffer_float extension for WebGL 2.0 contexts adds color-renderable floating point formats to renderbufferStorage().
  • System font: The font-family: system-ui CSS declaration uses the operating system default font for text.
  • IndexedDB: The IndexedDB API is a local storage transactional object database.
  • Logical properties: CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, block-end refers to the bottom. Also known as flow relative.
  • Referrer policy: The Referrer-Policy HTTP header and referrerpolicy HTML attributes control whether requests have the Referer header and what information the header contains.
  • Web authentication: The web authentication API allows you to create public key-based credentials and use them for authentication, such as when signing in. Also known as WebAuthn.
  • WEBGL_color_buffer_float WebGL extension: The WEBGL_color_buffer_float extension for WebGL 1.0 contexts adds the 32-bit floating-point type RGBA32F as a color-renderable format.
  • WebGL2: The WebGL2RenderingContext API is the "webgl2" rendering context for the <canvas> element. It represents a space for drawing two- and three-dimensional graphics and animations. It corresponds to OpenGL ES 3.0.

New in Chrome

The following features are now available in Chrome:

  • align-content in block layouts: The align-content property vertically aligns content in block layouts, like it does in flex or grid layouts.
  • CSS import attributes: Module import … with { type: "css" } statements load CSS modules as constructable stylesheets. Also known as CSS module scripts.
  • display-mode media query: The display-mode CSS media query sets styles based on whether the web page is in fullscreen, standalone, minimal-ui, browser, or picture-in-picture mode.
  • field-sizing: The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content.
  • JSON import attributes: Module import … with { type: "json" } statements load JSON data. Also known as JSON module scripts.
  • light-dark(): The light-dark() CSS function accepts two colors and uses one depending on the current color scheme.
  • Long animation frames: The long-animation-frame performance event type and the PerformanceLongAnimationFrameTiming API provide information about rendering updates that take longer than 50 milliseconds. Also known as LoAFs.
  • paint-order: The paint-order CSS property sets the z-order of strokes, fills, and (in SVG content) markers. For example, paint-order: markers stroke fill; draws the markers, then stroke on top of markers, then fill on top of both markers and stroke.
  • text-spacing-trim: The text-spacing-trim CSS property controls spacing around CJK characters, avoiding excessive whitespace when using full-width punctuation characters.
  • 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 Chrome Android

The following features are now available in Chrome Android:

  • align-content in block layouts: The align-content property vertically aligns content in block layouts, like it does in flex or grid layouts.
  • CSS import attributes: Module import … with { type: "css" } statements load CSS modules as constructable stylesheets. Also known as CSS module scripts.
  • field-sizing: The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content.
  • JSON import attributes: Module import … with { type: "json" } statements load JSON data. Also known as JSON module scripts.
  • light-dark(): The light-dark() CSS function accepts two colors and uses one depending on the current color scheme.
  • Long animation frames: The long-animation-frame performance event type and the PerformanceLongAnimationFrameTiming API provide information about rendering updates that take longer than 50 milliseconds. Also known as LoAFs.
  • paint-order: The paint-order CSS property sets the z-order of strokes, fills, and (in SVG content) markers. For example, paint-order: markers stroke fill; draws the markers, then stroke on top of markers, then fill on top of both markers and stroke.
  • text-spacing-trim: The text-spacing-trim CSS property controls spacing around CJK characters, avoiding excessive whitespace when using full-width punctuation characters.
  • 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 Edge

The following features are now available in Edge:

  • align-content in block layouts: The align-content property vertically aligns content in block layouts, like it does in flex or grid layouts.
  • CSS import attributes: Module import … with { type: "css" } statements load CSS modules as constructable stylesheets. Also known as CSS module scripts.
  • display-mode media query: The display-mode CSS media query sets styles based on whether the web page is in fullscreen, standalone, minimal-ui, browser, or picture-in-picture mode.
  • field-sizing: The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content.
  • JSON import attributes: Module import … with { type: "json" } statements load JSON data. Also known as JSON module scripts.
  • light-dark(): The light-dark() CSS function accepts two colors and uses one depending on the current color scheme.
  • Long animation frames: The long-animation-frame performance event type and the PerformanceLongAnimationFrameTiming API provide information about rendering updates that take longer than 50 milliseconds. Also known as LoAFs.
  • paint-order: The paint-order CSS property sets the z-order of strokes, fills, and (in SVG content) markers. For example, paint-order: markers stroke fill; draws the markers, then stroke on top of markers, then fill on top of both markers and stroke.
  • text-spacing-trim: The text-spacing-trim CSS property controls spacing around CJK characters, avoiding excessive whitespace when using full-width punctuation characters.
  • 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

The following features are now available in Firefox:

  • text-wrap-mode: The text-wrap-mode CSS property sets whether lines may wrap with the values wrap and nowrap. It is a longhand property for both white-space and text-wrap.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • text-wrap-mode: The text-wrap-mode CSS property sets whether lines may wrap with the values wrap and nowrap. It is a longhand property for both white-space and text-wrap.

New in Safari

The following features are now available in Safari:

  • align-content in block layouts: The align-content property vertically aligns content in block layouts, like it does in flex or grid layouts.
  • Alt text for generated content: The / notation in content CSS property values adds alternative text to generated content. For example, the content: url('upvote-icon.svg') / 'Upvote' declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.
  • Application shortcuts: The shortcuts web app manifest member registers common actions of an installed web app with the device. The device can present these actions to the user in contextually appropriate locations, such as jump lists on Windows or the app launcher on Android.
  • @scope: The @scope CSS at-rule sets the scope for a group of rules.
  • showPicker() for <input>: The showPicker() method for <input> elements shows the user interface for picking a value. For example, for <input type="date"> it shows the interface for picking a date.
  • ::spelling-error and ::grammar-error: The ::spelling-error and ::grammar-error CSS pseudo-elements match text that is highlighted as misspelled and grammatically incorrect, respectively.
  • :state(): The :state() CSS pseudo-class matches custom elements based on their custom state, set through the ElementInternals.states API.
  • text-wrap-mode: The text-wrap-mode CSS property sets whether lines may wrap with the values wrap and nowrap. It is a longhand property for both white-space and text-wrap.
  • transition-behavior: The transition-behavior: allow-discrete CSS declaration allows transitions for properties whose animation behavior is discrete. Such properties can't be interpolated and swap from their start value to the end value at 50%.
  • Vertical form controls: The writing-mode CSS property orients form elements (such as radio buttons, progress bars, or select menus) vertically when the writing mode is vertical-lr or vertical-rl. The direction CSS property sets whether inputs flow from top to bottom or bottom to top.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • align-content in block layouts: The align-content property vertically aligns content in block layouts, like it does in flex or grid layouts.
  • Alt text for generated content: The / notation in content CSS property values adds alternative text to generated content. For example, the content: url('upvote-icon.svg') / 'Upvote' declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.
  • @scope: The @scope CSS at-rule sets the scope for a group of rules.
  • ::spelling-error and ::grammar-error: The ::spelling-error and ::grammar-error CSS pseudo-elements match text that is highlighted as misspelled and grammatically incorrect, respectively.
  • :state(): The :state() CSS pseudo-class matches custom elements based on their custom state, set through the ElementInternals.states API.
  • text-wrap-mode: The text-wrap-mode CSS property sets whether lines may wrap with the values wrap and nowrap. It is a longhand property for both white-space and text-wrap.
  • transition-behavior: The transition-behavior: allow-discrete CSS declaration allows transitions for properties whose animation behavior is discrete. Such properties can't be interpolated and swap from their start value to the end value at 50%.
  • Vertical form controls: The writing-mode CSS property orients form elements (such as radio buttons, progress bars, or select menus) vertically when the writing mode is vertical-lr or vertical-rl. The direction CSS property sets whether inputs flow from top to bottom or bottom to top.