March 2023 web platform update
Now widely available on the web platform
Widely available
-
BigInt: The
BigInt
JavaScript type represents integers of any size, including integers too large for the primitiveNumber
type. Learn more. -
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 anAggregateError
when all of the promises have rejected. Learn more. -
scrollIntoView(): The
scrollIntoView()
method scrolls an element's ancestor containers such that the element is visible to the user. Learn more. -
WebP: The WebP image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression. Learn more.
Newly available on the web platform
Newly available
-
Constructed stylesheets: The
CSSStyleSheet
constructor creates a new stylesheet which can be shared between a document and multiple shadow roots usingadoptedStyleSheets
. Learn more. -
Fetch metadata request headers: The
Sec-Fetch-Dest
,Sec-Fetch-Mode,
Sec-Fetch-Site, and
Sec-Fetch-User` HTTP headers provide extra information about the way a request was made, to help servers reject certain kinds of malicious requests. Learn more. -
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. Learn more. -
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. Learn more. -
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. Learn more. -
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. Learn more. -
Form-associated custom elements: Custom elements may act like built-in form elements, via the the
attachInternals()
method ofHTMLElement
and theElementInternals
API. Learn more. -
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. Learn more. -
input event: The
input
event fires when a form control changes or an element with thecontenteditable
attribute changes. Learn more. -
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 feature. For example,(400px < width < 1000px)
returns true if the viewport width is between 400px and 1000px. Learn more. -
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. Learn more. -
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. Learn more. -
Origin private file system: The
navigator.storage.getDirectory()
method returns aFileSystemDirectoryHandle
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. Learn more. -
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. Learn more.
-
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. Learn more. -
Resource size: The
decodedSize
,encodedSize
, andtransferSize
properties of thePerformanceResourceTiming
API reports the size of resources loaded. Learn more. -
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. Learn more. -
Server timing: The
serverTiming
property of thePerformanceResourceTiming
API contains server timing information about network requests. Learn more. -
Imperative slot assignment: The
assign()
method for<slot>
elements assigns nodes to the slot, as an alternative to using theslot
andname
HTML attributes. The nodes must be children of a shadow host and the shadow root must be created with theslotAssignment
set to "manual". Also known as manual slot assignment. Learn more. -
translate attribute: The
translate
HTML attribute marks whether an element's text should be translated. Learn more. -
sin(), cos(), tan(), asin(), acos(), atan(), and atan2(): The
sin()
,cos()
,tan()
,asin()
,acos()
,atan()
, andatan2()
CSS functions compute various trigonometric functions. Learn more. -
WebAssembly SIMD: The 128-bit SIMD (Single Instruction Multiple Data) extension to WebAssembly performs one instruction on multiple units of data, when running on hardware that supports such instructions. Also known as vector instructions. Learn more.
Now available in Chrome
Limited availability
-
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 thedisplay
property value. Learn more. -
color(): The
color()
function defines a color within a given color space. Wide gamut color spaces likedisplay-p3
allow showing more vibrant and saturated colors than the standardsrgb
color space. Learn more. -
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. Learn more. -
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. Learn more. -
Declarative shadow DOM: The
shadowrootmode
attribute on<template>
creates a shadow root without the use of JavaScript. It is a declarative alternative to theattachShadow()
method. Learn more. -
Growable SharedArrayBuffer: The
grow()
method of aSharedArrayBuffer
, constructed with themaxByteLength
option, increases the size of the buffer in place. Learn more. -
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()
, andlch()
functions. Also known as CIELAB and CIELCH. Learn more. -
: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. Learn more. -
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()
, andoklch()
functions. Learn more. -
Resizable ArrayBuffer: The
resize()
method of anArrayBuffer
, constructed with themaxByteLength
option, changes the size of the buffer in place. Learn more. -
View transitions: View transitions allow you to create animated visual transitions between different states of a document, or between different documents. Learn more.
Now available in Chrome Android
Limited availability
-
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 thedisplay
property value. Learn more. -
color(): The
color()
function defines a color within a given color space. Wide gamut color spaces likedisplay-p3
allow showing more vibrant and saturated colors than the standardsrgb
color space. Learn more. -
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. Learn more. -
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. Learn more. -
Declarative shadow DOM: The
shadowrootmode
attribute on<template>
creates a shadow root without the use of JavaScript. It is a declarative alternative to theattachShadow()
method. Learn more. -
Growable SharedArrayBuffer: The
grow()
method of aSharedArrayBuffer
, constructed with themaxByteLength
option, increases the size of the buffer in place. Learn more. -
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()
, andlch()
functions. Also known as CIELAB and CIELCH. Learn more. -
: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. Learn more. -
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()
, andoklch()
functions. Learn more. -
Resizable ArrayBuffer: The
resize()
method of anArrayBuffer
, constructed with themaxByteLength
option, changes the size of the buffer in place. Learn more. -
View transitions: View transitions allow you to create animated visual transitions between different states of a document, or between different documents. Learn more.
Now available in Edge
Limited availability
-
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 thedisplay
property value. Learn more. -
color(): The
color()
function defines a color within a given color space. Wide gamut color spaces likedisplay-p3
allow showing more vibrant and saturated colors than the standardsrgb
color space. Learn more. -
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. Learn more. -
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. Learn more. -
Declarative shadow DOM: The
shadowrootmode
attribute on<template>
creates a shadow root without the use of JavaScript. It is a declarative alternative to theattachShadow()
method. Learn more. -
Growable SharedArrayBuffer: The
grow()
method of aSharedArrayBuffer
, constructed with themaxByteLength
option, increases the size of the buffer in place. Learn more. -
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()
, andlch()
functions. Also known as CIELAB and CIELCH. Learn more. -
: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. Learn more. -
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()
, andoklch()
functions. Learn more. -
Resizable ArrayBuffer: The
resize()
method of anArrayBuffer
, constructed with themaxByteLength
option, changes the size of the buffer in place. Learn more. -
View transitions: View transitions allow you to create animated visual transitions between different states of a document, or between different documents. Learn more.
Now available in Safari
Limited availability
-
Array.fromAsync(): The
Array.fromAsync()
static method copies items from an async iterable object to make a new array. Learn more. -
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. Learn more. -
Canvas createConicGradient(): The
createConicGradient()
methods draw a conic gradient to a 2D canvas. Learn more. -
Canvas roundRect(): The
roundRect()
methods draw a rounded rectangle to a 2D canvas. Learn more. -
Compression streams: The
CompressionStream
andDecompressionStream
interfaces compress and decompress data using the gzip or deflate formats. Learn more. -
Declarative shadow DOM: The
shadowrootmode
attribute on<template>
creates a shadow root without the use of JavaScript. It is a declarative alternative to theattachShadow()
method. Learn more. -
:dir(): The
:dir()
CSS functional pseudo-class matches elements by text direction, either right to left (rtl
) or left to right (ltr
). Learn more. -
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. Learn more. -
Fullscreen API: The fullscreen API makes a specific element fill the whole screen and hides most browser UI. Learn more.
-
Growable SharedArrayBuffer: The
grow()
method of aSharedArrayBuffer
, constructed with themaxByteLength
option, increases the size of the buffer in place. Learn more. -
lh unit: The CSS
lh
unit corresponds to the requested line height, the computed value of theline-height
property. Some lines may be higher than this based on their content. Learn more. -
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. Learn more. -
margin-trim: The
margin-trim
CSS property removes the margins of child elements when they meet the edges of the container. Learn more. -
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. Learn more. -
Relative colors: The
from
keyword for color functions (color()
,hsl()
,oklch()
, etc.) creates a new color based on a given color by modifying the values of the input color. Also known as relative color syntax (RCS). Learn more. -
Resizable ArrayBuffer: The
resize()
method of anArrayBuffer
, constructed with themaxByteLength
option, changes the size of the buffer in place. Learn more. -
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. Learn more.
Now available in Safari on iOS
Limited availability
-
Array.fromAsync(): The
Array.fromAsync()
static method copies items from an async iterable object to make a new array. Learn more. -
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. Learn more. -
Canvas createConicGradient(): The
createConicGradient()
methods draw a conic gradient to a 2D canvas. Learn more. -
Canvas roundRect(): The
roundRect()
methods draw a rounded rectangle to a 2D canvas. Learn more. -
Compression streams: The
CompressionStream
andDecompressionStream
interfaces compress and decompress data using the gzip or deflate formats. Learn more. -
Declarative shadow DOM: The
shadowrootmode
attribute on<template>
creates a shadow root without the use of JavaScript. It is a declarative alternative to theattachShadow()
method. Learn more. -
:dir(): The
:dir()
CSS functional pseudo-class matches elements by text direction, either right to left (rtl
) or left to right (ltr
). Learn more. -
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. Learn more. -
Growable SharedArrayBuffer: The
grow()
method of aSharedArrayBuffer
, constructed with themaxByteLength
option, increases the size of the buffer in place. Learn more. -
lh unit: The CSS
lh
unit corresponds to the requested line height, the computed value of theline-height
property. Some lines may be higher than this based on their content. Learn more. -
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. Learn more. -
margin-trim: The
margin-trim
CSS property removes the margins of child elements when they meet the edges of the container. Learn more. -
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. Learn more. -
Relative colors: The
from
keyword for color functions (color()
,hsl()
,oklch()
, etc.) creates a new color based on a given color by modifying the values of the input color. Also known as relative color syntax (RCS). Learn more. -
Resizable ArrayBuffer: The
resize()
method of anArrayBuffer
, constructed with themaxByteLength
option, changes the size of the buffer in place. Learn more. -
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. Learn more.