Web platform features explorer

📃 September 2023 release notes

Newly available

The following features are newly available:

  • Clearing site data: The Clear-Site-Data header deletes browsing data (such as cookies, storage, or cache) associated with the requesting website.
  • contain-intrinsic-size: The contain-intrinsic-size CSS property sets the intrinsic size of an element. When using size containment, the browser will lay out the element as if it had a single child of this size.
  • @counter-style: The @counter-style CSS at-rule sets custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list.
  • Device orientation events: The DeviceMotion and DeviceOrientation events report the movement and orientation of the browser's device in physical space. Note that coordinates can differ noticeably between platforms and devices.
  • Hyphenate character: The hyphenate-character CSS property sets the character or string to use at the end of a line before a line break.
  • Hyphenation: The hyphens CSS property controls when long words are broken by line wrapping. Although called hyphens, the property applies to word-splitting behavior across languages, such as customary spelling changes or the use of other characters. Support for non-English languages varies significantly.
  • image-set(): The image-set() CSS function provides a set of images at different resolutions or pixel densities, which the browser can pick from, depending on the device capabilities.
  • <link rel="modulepreload">: The rel="modulepreload" attribute for the <link> HTML element indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution.
  • Overflow media queries: The overflow-block and overflow-inline CSS media queries set styles based on the way a device displays content that's larger than the viewport or page area. For example, a laptop lets users scroll to reveal content, while a printer displays overflowing content on additional pages.
  • Storage manager: The navigator.storage API provides information about the availability and persistence of the data that a site stores on the device, by using APIs such as the Cache API or the IndexedDB API.
  • Subgrid: The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.
  • Update frequency media query: The update CSS media query sets styles based on whether and how fast the user's device can modify display after it has been rendered. For example, you can avoid animations on devices that aren't fast enough to display them smoothly.

New in Chrome

The following features are now available in Chrome:

  • 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.
  • display animation: You can animate elements between display: none and any other display value or animate between content-visibility: hidden and any other content-visibility value. This also applies to transitions.
  • overlay: The overlay CSS property, used as an allow-discrete CSS transition, prevents a top layer element, such as a popover or a <dialog>, from being removed from the top layer before it has finished animating. You can't set the value of the overlay property; only use it as transition property.
  • @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: pretty: The text-wrap: pretty CSS declaration prioritizes better layout over speed when text is broken into multiple lines.
  • 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%.

New in Chrome Android

The following features are now available in Chrome Android:

  • 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.
  • display animation: You can animate elements between display: none and any other display value or animate between content-visibility: hidden and any other content-visibility value. This also applies to transitions.
  • overlay: The overlay CSS property, used as an allow-discrete CSS transition, prevents a top layer element, such as a popover or a <dialog>, from being removed from the top layer before it has finished animating. You can't set the value of the overlay property; only use it as transition property.
  • @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: pretty: The text-wrap: pretty CSS declaration prioritizes better layout over speed when text is broken into multiple lines.
  • 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%.

New in Edge

The following features are now available in Edge:

  • 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.
  • display animation: You can animate elements between display: none and any other display value or animate between content-visibility: hidden and any other content-visibility value. This also applies to transitions.
  • overlay: The overlay CSS property, used as an allow-discrete CSS transition, prevents a top layer element, such as a popover or a <dialog>, from being removed from the top layer before it has finished animating. You can't set the value of the overlay property; only use it as transition property.
  • @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: pretty: The text-wrap: pretty CSS declaration prioritizes better layout over speed when text is broken into multiple lines.
  • 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%.

New in Firefox

The following features are now available in Firefox:

  • abs() and sign(): The abs() and sign() CSS functions compute the absolute value or the sign of the input.
  • pow(), sqrt(), hypot(), log(), and exp(): The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions.
  • font-size-adjust: The font-size-adjust CSS property preserves apparent text size, regardless of the font used, by scaling fonts to the same size with respect to a specific metric, such as x-height. This can help make fallback fonts look the same size.
  • font-synthesis-position: The font-synthesis-position CSS property sets whether or not the browser should synthesize subscript and superscript typefaces when they're missing from the font.
  • round(), mod(), and rem(): The round(), mod(), and rem() CSS functions compute rounded values and the remainder after division.
  • <search>: The <search> HTML element is a container that represents the parts of the web page with search functionality.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • abs() and sign(): The abs() and sign() CSS functions compute the absolute value or the sign of the input.
  • pow(), sqrt(), hypot(), log(), and exp(): The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions.
  • font-size-adjust: The font-size-adjust CSS property preserves apparent text size, regardless of the font used, by scaling fonts to the same size with respect to a specific metric, such as x-height. This can help make fallback fonts look the same size.
  • font-synthesis-position: The font-synthesis-position CSS property sets whether or not the browser should synthesize subscript and superscript typefaces when they're missing from the font.
  • round(), mod(), and rem(): The round(), mod(), and rem() CSS functions compute rounded values and the remainder after division.
  • <search>: The <search> HTML element is a container that represents the parts of the web page with search functionality.

New in Safari

The following features are now available in Safari:

  • Badging: The navigator.setAppBadge() method allows installed web applications to display an application badge, typically a dot or number shown alongside the application's icon on the device's home screen or application dock.
  • Selection composed ranges: The window.getSelection().getComposedRanges() method returns ranges that represent the current user selection, even if the selection spans across shadow tree boundaries.
  • font-size-adjust: The font-size-adjust CSS property preserves apparent text size, regardless of the font used, by scaling fonts to the same size with respect to a specific metric, such as x-height. This can help make fallback fonts look the same size.
  • Intl.Locale info: The getter methods of the Intl.Locale API provide supplemental information about a Unicode locale, such as the locale's calendar (for example, the first day in a week or the weekend start day), writing direction, 12- or 24-hour cycles, and numbering system.
  • JPEG XL: The JPEG XL image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression.
  • Managed media source: The ManagedMediaSource API is a MediaSource where the browser manages the memory of source buffers and may evict data if needed.
  • Web app manifest: A web app manifest file provides metadata about the site. The browser can use the metadata to install the site as a standalone application on the user's device. The metadata usually includes the app's name, icon, description, and ways in which the app wishes to integrate with the device.
  • Popover: The popover HTML attribute creates an overlay to display content on top of other page content. Popovers can be shown declaratively using HTML, or using the showPopover() method.
  • scripting media query: The scripting CSS media query sets styles based on whether scripting such as JavaScript is available. Values are enabled if scripting is available, initial-only if scripting is only available on page load (for example, printed content), or none.
  • <search>: The <search> HTML element is a container that represents the parts of the web page with search functionality.
  • Set methods: The difference(), intersection(), isDisjointFrom(), isSubsetOf(), isSupersetOf(), symmetricDifference(), and union() methods of the JavaScript Set object performs operations between two sets.
  • URL.canParse(): The URL.canParse() static method checks whether a URL can be parsed into a valid URL object. It's an alternative to calling new URL() in a try … catch statement.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • Selection composed ranges: The window.getSelection().getComposedRanges() method returns ranges that represent the current user selection, even if the selection spans across shadow tree boundaries.
  • font-size-adjust: The font-size-adjust CSS property preserves apparent text size, regardless of the font used, by scaling fonts to the same size with respect to a specific metric, such as x-height. This can help make fallback fonts look the same size.
  • Intl.Locale info: The getter methods of the Intl.Locale API provide supplemental information about a Unicode locale, such as the locale's calendar (for example, the first day in a week or the weekend start day), writing direction, 12- or 24-hour cycles, and numbering system.
  • JPEG XL: The JPEG XL image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression.
  • scripting media query: The scripting CSS media query sets styles based on whether scripting such as JavaScript is available. Values are enabled if scripting is available, initial-only if scripting is only available on page load (for example, printed content), or none.
  • <search>: The <search> HTML element is a container that represents the parts of the web page with search functionality.
  • Set methods: The difference(), intersection(), isDisjointFrom(), isSubsetOf(), isSupersetOf(), symmetricDifference(), and union() methods of the JavaScript Set object performs operations between two sets.
  • URL.canParse(): The URL.canParse() static method checks whether a URL can be parsed into a valid URL object. It's an alternative to calling new URL() in a try … catch statement.