September 2022 web platform update
Now widely available on the web platform
Widely available
-
Web animations: The web animations API allows you to animate and synchronize the animations of DOM elements. Learn more.
Newly available on the web platform
Newly available
-
:modal: The
:modal
pseudo-class selects elements that put other elements into a non-interactive state, such as a fullscreen element or a<dialog>
element used withshowModal()
. Learn more. -
overflow: The
overflow
CSS property sets the behavior for when content doesn't fit in an element. Learn more. -
Permissions: The
navigator.permissions
API checks whether a permission, such as access to geolocation data, has been granted. Learn more.
Now available in Chrome
Limited availability
-
blocking="render": The
blocking="render"
attribute for<link>
,<script>
, and<style>
elements blocks rendering until the external script or stylesheet has been loaded. For<link rel="expect">
, rendering is blocked until a specific element is in the DOM. Learn more. -
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 styledisplay: none
, but can also check forvisibility: hidden
. Learn more. -
Container queries: Container size queries with the
@container
at-rule apply styles to an element based on the dimensions of its container. Learn more. -
:has(): The
:has()
CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element. Learn more. -
Custom highlights: Custom highlights style arbitrary text ranges, without adding extra elements to the DOM. Learn more.
-
ic unit: The CSS
ic
unit corresponds to the width of CJK ideographic characters. Learn more. -
WebDriver BiDi: WebDriver BiDi is a bidirectional protocol that allows a WebDriver client and a browser to communicate with each other. Learn more.
Now available in Chrome Android
Limited availability
-
blocking="render": The
blocking="render"
attribute for<link>
,<script>
, and<style>
elements blocks rendering until the external script or stylesheet has been loaded. For<link rel="expect">
, rendering is blocked until a specific element is in the DOM. Learn more. -
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 styledisplay: none
, but can also check forvisibility: hidden
. Learn more. -
Container queries: Container size queries with the
@container
at-rule apply styles to an element based on the dimensions of its container. Learn more. -
:has(): The
:has()
CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element. Learn more. -
Custom highlights: Custom highlights style arbitrary text ranges, without adding extra elements to the DOM. Learn more.
-
ic unit: The CSS
ic
unit corresponds to the width of CJK ideographic characters. Learn more. -
Picture-in-picture (video): The picture-in-picture API allow websites to create a floating, always-on-top video window. Also known as PiP or pop-out video. Learn more.
-
WebDriver BiDi: WebDriver BiDi is a bidirectional protocol that allows a WebDriver client and a browser to communicate with each other. Learn more.
Now available in Edge
Limited availability
-
blocking="render": The
blocking="render"
attribute for<link>
,<script>
, and<style>
elements blocks rendering until the external script or stylesheet has been loaded. For<link rel="expect">
, rendering is blocked until a specific element is in the DOM. Learn more. -
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 styledisplay: none
, but can also check forvisibility: hidden
. Learn more. -
Container queries: Container size queries with the
@container
at-rule apply styles to an element based on the dimensions of its container. Learn more. -
:has(): The
:has()
CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element. Learn more. -
Custom highlights: Custom highlights style arbitrary text ranges, without adding extra elements to the DOM. Learn more.
Now available in Firefox
Limited availability
-
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.
Now available in Firefox for Android
Limited availability
-
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.
Now available in Safari
Limited availability
-
animation-composition: The
animation-composition
CSS property chooses how to combine animations that affect the same property. Learn more. -
Array by copy: The
toReversed()
,toSorted()
,toSpliced()
, andwith()
methods of arrays and typed arrays return changed copies of arrays. They stand in contrast to methods such assort()
orreverse()
that change arrays in place. Learn more. -
AVIF: AVIF (AV1 Image File Format) is an image format based on the AV1 video format. Learn more.
-
calc() constants: The
e
,pi
,infinity
, andNaN
constants are accepted in CSS math functions such ascalc()
. Learn more. -
Container queries: Container size queries with the
@container
at-rule apply styles to an element based on the dimensions of its container. Learn more. -
Grid animation: Grid animation allows you to animate the
grid-template-columns
andgrid-template-rows
CSS properties. Learn more. -
Motion path: The
offset
CSS property animates an element along a defined motion path. 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.
-
Subgrid: The
subgrid
value for thegrid-template-columns
andgrid-template-rows
properties allows a grid item to inherit the grid definition of its parent grid container. Learn more. -
Web authentication easy public key access: The
getAuthenticatorData()
,getPublicKey()
, andgetPublicKeyAlgorithm()
methods ofAuthenticatorAttestationResponse
access credential data insideattestationObject
without the need to parse it. Learn more. -
WebGL OES_draw_buffers_indexed extension: The
OES_draw_buffers_indexed
extension to WebGL allows you to control blending on a per-color basis when writing to multiple color buffers simultaneously. Learn more.
Now available in Safari on iOS
Limited availability
-
animation-composition: The
animation-composition
CSS property chooses how to combine animations that affect the same property. Learn more. -
Array by copy: The
toReversed()
,toSorted()
,toSpliced()
, andwith()
methods of arrays and typed arrays return changed copies of arrays. They stand in contrast to methods such assort()
orreverse()
that change arrays in place. Learn more. -
AVIF: AVIF (AV1 Image File Format) is an image format based on the AV1 video format. Learn more.
-
calc() constants: The
e
,pi
,infinity
, andNaN
constants are accepted in CSS math functions such ascalc()
. Learn more. -
Container queries: Container size queries with the
@container
at-rule apply styles to an element based on the dimensions of its container. Learn more. -
Grid animation: Grid animation allows you to animate the
grid-template-columns
andgrid-template-rows
CSS properties. Learn more. -
Motion path: The
offset
CSS property animates an element along a defined motion path. Learn more. -
Subgrid: The
subgrid
value for thegrid-template-columns
andgrid-template-rows
properties allows a grid item to inherit the grid definition of its parent grid container. Learn more. -
Web authentication easy public key access: The
getAuthenticatorData()
,getPublicKey()
, andgetPublicKeyAlgorithm()
methods ofAuthenticatorAttestationResponse
access credential data insideattestationObject
without the need to parse it. Learn more. -
WebGL OES_draw_buffers_indexed extension: The
OES_draw_buffers_indexed
extension to WebGL allows you to control blending on a per-color basis when writing to multiple color buffers simultaneously. Learn more.