Web platform features explorer

📃 March 2023 release notes

Newly available

The following features are newly available:

  • Constructed stylesheets: The CSSStyleSheet constructor creates a new stylesheet which can be shared between a document and multiple shadow roots using adoptedStyleSheets.
  • font-synthesis-small-caps: The font-synthesis-small-caps CSS property sets whether or not the browser should synthesize small caps typefaces when they're missing from the font.
  • font-synthesis-style: The font-synthesis-style CSS property sets whether or not the browser should synthesize italic and oblique typefaces when they're missing from the font.
  • font-synthesis-weight: The font-synthesis-weight CSS property sets whether or not the browser should synthesize bold typefaces when they're missing from the font.
  • font-variant-alternates: The font-variant-alternates CSS property, along with the @font-feature-values at-rule, chooses when to use a font's alternate glyphs.
  • Form-associated custom elements: Custom elements may act like built-in form elements, via the the attachInternals() method of HTMLElement and the ElementInternals API.
  • Import maps: A <script type="importmap"> HTML element provides an import map as a JSON string. An import map controls how the browser should resolve module specifiers when importing JavaScript modules.
  • Media query range syntax: The range syntax of CSS media queries allows you to use mathematical comparison operators such as <, >, <=, and >= to define a range of values for a media query. For example, (400px < width < 1000px) returns true if the viewport width is between 400px and 1000px.
  • messageerror: The messageerror event fires on a target, such as a window or worker, when an incoming message cannot be deserialized. This event can fire for many types of messages, such as cross-document messages or broadcast channel messages.
  • Notifications from service workers and installed apps: Notifications via service worker registration's showNotification() method, sent from installed web applications (for example, saved to the Home Screen on Safari for iOS), show a message to the user, typically using the notification system of the host operating system.
  • Offscreen canvas: The OffscreenCanvas API provides a canvas that can be drawn to off screen, with no dependencies on the DOM, which can be used to run heavy rendering operations inside a worker context.
  • Origin private file system: The navigator.storage.getDirectory() method returns a FileSystemDirectoryHandle that is restricted to a specific origin and invisible to the user's actual file system for faster file-based applications, such as SQLite databases.
  • outline: The outline CSS shorthand sets the color, style, and width of a line around an element, outside of the border.
  • pdfViewerEnabled: The navigator.pdfViewerEnabled property is a boolean for whether the browser navigates to and shows a PDF in the browser window or downloads the PDF.
  • Push messages: The Push API subscribes to and receives server-initiated messages. Subscribers receive pushed messages in the background, even after periods inactive or offline.
  • requestAnimationFrame() in workers: The requestAnimationFrame() method in workers schedules a function that runs before the next repaint. Together with offscreen canvas, you can animate content from a worker.
  • Resource size: The decodedBodySize, encodedBodySize, and transferSize properties of the PerformanceResourceTiming API reports the size of resources loaded.
  • Screen orientation: The screen.orientation API gets information about the orientation of the viewport, such as landscape or portrait. With this API, you can adapt an application's layout or behavior in response to changes in orientation.
  • Server timing: The serverTiming property of the PerformanceResourceTiming API contains server timing information about network requests.
  • Imperative slot assignment: The assign() method for <slot> elements assigns nodes to the slot, as an alternative to using the slot and name HTML attributes. The nodes must be children of a shadow host and the shadow root must be created with the slotAssignment set to "manual". Also known as manual slot assignment.
  • translate: The translate HTML attribute marks whether an element's text should be translated.
  • sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS): The sin(), cos(), tan(), asin(), acos(), atan(), and atan2() CSS functions compute various trigonometric functions.
  • Fixed-width SIMD (WebAssembly): 128-bit SIMD (Single Instruction Multiple Data) performs one instruction on multiple units of data, when running on hardware that supports such instructions. Also known as vector instructions.

Widely available

The following features are now widely available:

  • BigInt: The BigInt JavaScript type represents integers of any size, including integers too large for the primitive Number type.
  • EXT_color_buffer_half_float WebGL extension: The EXT_color_buffer_half_float extension for WebGL 1.0 and 2.0 contexts renders 16-bit floating-point color buffers.
  • Intl.Locale: The Intl.Locale API parses Unicode locale identifiers, with language, region, and script codes, such as zh-Hans-CN or en-GB.
  • Intl.RelativeTimeFormat: The Intl.RelativeTimeFormat API creates a locale-aware formatter that turns an object representing a relative time (such as '1 day ago') into a localized string.
  • Logical assignments: The logical AND assignment (&&=) and the logical OR assignment (||=) operators short-circuit the respective binary logical operators.
  • Nullish coalescing: The nullish coalescing (??) and nullish coalescing assignment (??=) operators return (or assign) its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
  • Promise.any(): The Promise.any() static method returns a promise that fulfills as soon as the first of an iterable of promises fulfills, with that promise's value. Otherwise, it rejects with an AggregateError when all of the promises have rejected.
  • Scroll methods on elements: The scroll() and scrollBy() methods change the scroll position of overflow content within an element. Similar to setting scrollTop and scrollLeft properties, but with options setting whether the scroll should animate smoothly or jump. Note that scrollTo() is an alias for scroll().
  • steps() easing: The steps() CSS easing function divides an animation or transition into equidistant intervals, jumping from value to value. The step-start and step-end keyword values are presets with a single interval.
  • text-orientation: The text-orientation CSS property sets the how text is typeset within a line when the writing mode is vertical.
  • Web animations: The web animation API programmatically creates, inspects, and controls element animations, to change and synchronize appearance over time.
  • WEBGL_debug_shaders WebGL extension: The WEBGL_debug_shaders extension for WebGL 1.0 and 2.0 contexts adds the getTranslatedShaderSource() method to debug shaders from privileged contexts.
  • WebP: The WebP image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression.

New in Chrome

The following features are now available in Chrome:

  • baseline-source: The baseline-source CSS property controls how inline-level boxes with multiple lines of text are aligned with the surrounding text. By default, which typographic baseline is used depends on the display property value.
  • color(): The color() function picks a color from a given color space. Wide gamut color spaces like display-p3 allow showing more vibrant and saturated colors than the standard srgb color space.
  • color-mix(): The color-mix() function mixes two colors in a given color space and by a given amount. Commonly, lighter or darker variations of a color are created by mixing with white or black.
  • Container style queries: Container style queries with the @container at-rule apply styles to an element based on the values of custom properties of its container.
  • Declarative shadow DOM: The shadowrootmode attribute on <template> creates a shadow root without the use of JavaScript. It is a declarative alternative to the attachShadow() method.
  • Gradient interpolation: Gradient interpolation controls how the colors between gradient stops are calculated in CSS. For example, linear-gradient(to right in oklch longer hue, red, red); calculates in the oklch color space, with the hue going all the way around the hue circle from red back to red.
  • Lab and LCH: The CIE Lab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is. LCH is a variant of Lab with polar coordinates. These color spaces can be used with the CSS color(), lab(), and lch() functions. Also known as CIELAB and CIELCH.
  • :nth-child() of <selector>: The of syntax for the :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.
  • Oklab and Oklch: The Oklab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is, aiming to match how humans perceive colors. Oklch is a variant of Oklab with polar coordinates. These color spaces can be used with the CSS color(), oklab(), and oklch() functions.
  • rch unit: The rch CSS length unit is a font-relative length equal to the value of the ch unit on the root element. ch length is based on the width of the zero (0) character.
  • Resizable buffers: The resize() method of an ArrayBuffer and the grow() method of a SharedArrayBuffer, constructed with the maxByteLength option, changes the size of the buffer in place.
  • rex unit: The rex CSS length unit is a font-relative length that is equal to the x-height of the root element.
  • ric unit: The ric CSS length unit, or root international character, is a font-relative length equal to the width of CJK character relative to the root element.
  • rlh unit: The rlh CSS length unit is a font-relative length relative to the line height of root element.
  • String isWellFormed() and toWellFormed(): The isWellFormed() method of strings returns a boolean indicating if the string contains any Unicode lone surrogates. The toWellFormed() method returns a new string where all lone surrogates are replaced by the Unicode replacement character.
  • View transitions: View transitions allow you to create animated visual transitions between different states of a document.
  • Window management: The window.getScreenDetails() method gets information about the screens on a device, which you can use to place new windows on a specific screen with window.open().

New in Chrome Android

The following features are now available in Chrome Android:

  • baseline-source: The baseline-source CSS property controls how inline-level boxes with multiple lines of text are aligned with the surrounding text. By default, which typographic baseline is used depends on the display property value.
  • color(): The color() function picks a color from a given color space. Wide gamut color spaces like display-p3 allow showing more vibrant and saturated colors than the standard srgb color space.
  • color-mix(): The color-mix() function mixes two colors in a given color space and by a given amount. Commonly, lighter or darker variations of a color are created by mixing with white or black.
  • Container style queries: Container style queries with the @container at-rule apply styles to an element based on the values of custom properties of its container.
  • Declarative shadow DOM: The shadowrootmode attribute on <template> creates a shadow root without the use of JavaScript. It is a declarative alternative to the attachShadow() method.
  • Gradient interpolation: Gradient interpolation controls how the colors between gradient stops are calculated in CSS. For example, linear-gradient(to right in oklch longer hue, red, red); calculates in the oklch color space, with the hue going all the way around the hue circle from red back to red.
  • Lab and LCH: The CIE Lab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is. LCH is a variant of Lab with polar coordinates. These color spaces can be used with the CSS color(), lab(), and lch() functions. Also known as CIELAB and CIELCH.
  • :nth-child() of <selector>: The of syntax for the :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.
  • Oklab and Oklch: The Oklab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is, aiming to match how humans perceive colors. Oklch is a variant of Oklab with polar coordinates. These color spaces can be used with the CSS color(), oklab(), and oklch() functions.
  • rch unit: The rch CSS length unit is a font-relative length equal to the value of the ch unit on the root element. ch length is based on the width of the zero (0) character.
  • Resizable buffers: The resize() method of an ArrayBuffer and the grow() method of a SharedArrayBuffer, constructed with the maxByteLength option, changes the size of the buffer in place.
  • rex unit: The rex CSS length unit is a font-relative length that is equal to the x-height of the root element.
  • ric unit: The ric CSS length unit, or root international character, is a font-relative length equal to the width of CJK character relative to the root element.
  • rlh unit: The rlh CSS length unit is a font-relative length relative to the line height of root element.
  • String isWellFormed() and toWellFormed(): The isWellFormed() method of strings returns a boolean indicating if the string contains any Unicode lone surrogates. The toWellFormed() method returns a new string where all lone surrogates are replaced by the Unicode replacement character.
  • View transitions: View transitions allow you to create animated visual transitions between different states of a document.

New in Edge

The following features are now available in Edge:

  • baseline-source: The baseline-source CSS property controls how inline-level boxes with multiple lines of text are aligned with the surrounding text. By default, which typographic baseline is used depends on the display property value.
  • color(): The color() function picks a color from a given color space. Wide gamut color spaces like display-p3 allow showing more vibrant and saturated colors than the standard srgb color space.
  • color-mix(): The color-mix() function mixes two colors in a given color space and by a given amount. Commonly, lighter or darker variations of a color are created by mixing with white or black.
  • Container style queries: Container style queries with the @container at-rule apply styles to an element based on the values of custom properties of its container.
  • Declarative shadow DOM: The shadowrootmode attribute on <template> creates a shadow root without the use of JavaScript. It is a declarative alternative to the attachShadow() method.
  • Gradient interpolation: Gradient interpolation controls how the colors between gradient stops are calculated in CSS. For example, linear-gradient(to right in oklch longer hue, red, red); calculates in the oklch color space, with the hue going all the way around the hue circle from red back to red.
  • Lab and LCH: The CIE Lab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is. LCH is a variant of Lab with polar coordinates. These color spaces can be used with the CSS color(), lab(), and lch() functions. Also known as CIELAB and CIELCH.
  • :nth-child() of <selector>: The of syntax for the :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.
  • Oklab and Oklch: The Oklab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is, aiming to match how humans perceive colors. Oklch is a variant of Oklab with polar coordinates. These color spaces can be used with the CSS color(), oklab(), and oklch() functions.
  • rch unit: The rch CSS length unit is a font-relative length equal to the value of the ch unit on the root element. ch length is based on the width of the zero (0) character.
  • Resizable buffers: The resize() method of an ArrayBuffer and the grow() method of a SharedArrayBuffer, constructed with the maxByteLength option, changes the size of the buffer in place.
  • rex unit: The rex CSS length unit is a font-relative length that is equal to the x-height of the root element.
  • ric unit: The ric CSS length unit, or root international character, is a font-relative length equal to the width of CJK character relative to the root element.
  • rlh unit: The rlh CSS length unit is a font-relative length relative to the line height of root element.
  • String isWellFormed() and toWellFormed(): The isWellFormed() method of strings returns a boolean indicating if the string contains any Unicode lone surrogates. The toWellFormed() method returns a new string where all lone surrogates are replaced by the Unicode replacement character.
  • View transitions: View transitions allow you to create animated visual transitions between different states of a document.
  • Window management: The window.getScreenDetails() method gets information about the screens on a device, which you can use to place new windows on a specific screen with window.open().

New in Firefox

The following features are now available in Firefox:

  • autocapitalize: The autocapitalize global HTML attribute sets the virtual keyboard capitalization behavior for user input on an element, such as the first letter of sentences or all words.
  • context-fill and context-stroke: The context-fill and context-stroke CSS values are used with fill and stroke in SVG <marker> or <use> elements to match a color from where they appear.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • autocapitalize: The autocapitalize global HTML attribute sets the virtual keyboard capitalization behavior for user input on an element, such as the first letter of sentences or all words.
  • context-fill and context-stroke: The context-fill and context-stroke CSS values are used with fill and stroke in SVG <marker> or <use> elements to match a color from where they appear.

New in Safari

The following features are now available in Safari:

  • ARIA attribute reflection: WAI-ARIA attributes have corresponding properties on Element and ElementInternals objects.
  • Array.fromAsync(): The Array.fromAsync() static method copies items from an async iterable object to make a new array.
  • Atomics.waitAsync: The Atomics.waitAsync() static method waits for a value in a shared memory location, providing a promise when the expected value is not yet in memory. The waitAsync() method is a non-blocking alternative to Atomics.wait().
  • Audio session: The navigator.audioSession API controls how audio playback interacts with other applications. For example, playing music can pause audio from other applications, while ambient audio can play at the same time.
  • Canvas createConicGradient(): The createConicGradient() methods draw a conic gradient to a 2D canvas.
  • Canvas roundRect(): The roundRect() methods draw a rounded rectangle to a 2D canvas.
  • Compression streams: The CompressionStream and DecompressionStream APIs compress and decompress data using the gzip or deflate formats.
  • CSS typed object model: The CSSStyleValue and its subclasses represent CSS values as distinct types instead of only strings. Also known as typed OM.
  • Declarative shadow DOM: The shadowrootmode attribute on <template> creates a shadow root without the use of JavaScript. It is a declarative alternative to the attachShadow() method.
  • :dir(): The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).
  • Fullscreen API: The fullscreen API makes a specific element fill the whole screen and hides most browser UI.
  • Gamepad haptic feedback: The gamepad.vibrationActuator property represents a gamepad's haptics hardware, which allows you to control the vibration motors in a gamepad.
  • Intl.DurationFormat: The Intl.DurationFormat API creates a locale-aware formatter that turns an object representing a duration (such as days, hours, and minutes) into a string.
  • lh unit: The lh CSS length unit corresponds to the requested line height, the computed value of the line-height property. Some lines may be higher than this based on their content.
  • Lazy-loading images and iframes: The loading="lazy" attribute for <img> and <iframe> elements blocks loading the external resource until the user scrolls to that element's part of the page.
  • margin-trim: The margin-trim CSS property removes the margins of child elements when they meet the edges of the container.
  • Numeric factory functions: The numeric factory functions, such as CSS.px() or CSS.kHz(), return a CSSUnitValue representing a CSS number value (as in 12px or 440kHz).
  • Registered custom properties: The CSS.registerProperty() static method and the @property CSS at-rule register custom properties for which types and behaviors can be defined.
  • Reporting API: The Reporting-Endpoints HTTP header and ReportingObserver() API send reports of Content Security Policy (CSP) violations, Permissions-Policy violations, deprecated feature usage, browser interventions, and crashes to a nominated URL or callback function.
  • Resizable buffers: The resize() method of an ArrayBuffer and the grow() method of a SharedArrayBuffer, constructed with the maxByteLength option, changes the size of the buffer in place.
  • rlh unit: The rlh CSS length unit is a font-relative length relative to the line height of root element.
  • Screen wake lock: The navigator.wakeLock.request("screen") API prevents the device's screen from dimming or being turned off.
  • String isWellFormed() and toWellFormed(): The isWellFormed() method of strings returns a boolean indicating if the string contains any Unicode lone surrogates. The toWellFormed() method returns a new string where all lone surrogates are replaced by the Unicode replacement character.
  • User activation: The navigator.userActivation API reveals whether the user has interacted with the page through an "activation" gesture such as a click, tap, or key press. User activation gated APIs (such as the fullscreen API) fail without user interaction, and this API allows you to predict such a failure.
  • Color management for WebGL: The drawingBufferColorSpace and unpackColorSpace properties of WebGLRenderingContext sets the color representation for the buffer and imported textures, such as "srgb" or "display-p3".
  • Color management for WebGL2: The drawingBufferColorSpace and unpackColorSpace properties of WebGL2RenderingContext sets the color representation for the buffer and imported textures, such as "srgb" or "display-p3".

New in Safari on iOS

The following features are now available in Safari on iOS:

  • ARIA attribute reflection: WAI-ARIA attributes have corresponding properties on Element and ElementInternals objects.
  • Array.fromAsync(): The Array.fromAsync() static method copies items from an async iterable object to make a new array.
  • Atomics.waitAsync: The Atomics.waitAsync() static method waits for a value in a shared memory location, providing a promise when the expected value is not yet in memory. The waitAsync() method is a non-blocking alternative to Atomics.wait().
  • Audio session: The navigator.audioSession API controls how audio playback interacts with other applications. For example, playing music can pause audio from other applications, while ambient audio can play at the same time.
  • 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.
  • Canvas createConicGradient(): The createConicGradient() methods draw a conic gradient to a 2D canvas.
  • Canvas roundRect(): The roundRect() methods draw a rounded rectangle to a 2D canvas.
  • Compression streams: The CompressionStream and DecompressionStream APIs compress and decompress data using the gzip or deflate formats.
  • CSS typed object model: The CSSStyleValue and its subclasses represent CSS values as distinct types instead of only strings. Also known as typed OM.
  • Declarative shadow DOM: The shadowrootmode attribute on <template> creates a shadow root without the use of JavaScript. It is a declarative alternative to the attachShadow() method.
  • :dir(): The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).
  • Intl.DurationFormat: The Intl.DurationFormat API creates a locale-aware formatter that turns an object representing a duration (such as days, hours, and minutes) into a string.
  • lh unit: The lh CSS length unit corresponds to the requested line height, the computed value of the line-height property. Some lines may be higher than this based on their content.
  • Lazy-loading images and iframes: The loading="lazy" attribute for <img> and <iframe> elements blocks loading the external resource until the user scrolls to that element's part of the page.
  • margin-trim: The margin-trim CSS property removes the margins of child elements when they meet the edges of the container.
  • Numeric factory functions: The numeric factory functions, such as CSS.px() or CSS.kHz(), return a CSSUnitValue representing a CSS number value (as in 12px or 440kHz).
  • Registered custom properties: The CSS.registerProperty() static method and the @property CSS at-rule register custom properties for which types and behaviors can be defined.
  • Reporting API: The Reporting-Endpoints HTTP header and ReportingObserver() API send reports of Content Security Policy (CSP) violations, Permissions-Policy violations, deprecated feature usage, browser interventions, and crashes to a nominated URL or callback function.
  • Resizable buffers: The resize() method of an ArrayBuffer and the grow() method of a SharedArrayBuffer, constructed with the maxByteLength option, changes the size of the buffer in place.
  • rlh unit: The rlh CSS length unit is a font-relative length relative to the line height of root element.
  • String isWellFormed() and toWellFormed(): The isWellFormed() method of strings returns a boolean indicating if the string contains any Unicode lone surrogates. The toWellFormed() method returns a new string where all lone surrogates are replaced by the Unicode replacement character.
  • User activation: The navigator.userActivation API reveals whether the user has interacted with the page through an "activation" gesture such as a click, tap, or key press. User activation gated APIs (such as the fullscreen API) fail without user interaction, and this API allows you to predict such a failure.
  • Color management for WebGL: The drawingBufferColorSpace and unpackColorSpace properties of WebGLRenderingContext sets the color representation for the buffer and imported textures, such as "srgb" or "display-p3".
  • Color management for WebGL2: The drawingBufferColorSpace and unpackColorSpace properties of WebGL2RenderingContext sets the color representation for the buffer and imported textures, such as "srgb" or "display-p3".