March 2022 web platform update
Now widely available on the web platform
Widely available
-
Print events: An alternative to
@media print
queries, thebeforeprint
andafterprint
events allow you to change the page for printing and and restore the page after printing. Learn more. -
Sticky positioning: The
position: sticky
CSS declaration positions an element in the normal flow until it crosses a specified threshold, at which points it becomes fixed (stuck) at that position. Learn more.
Newly available on the web platform
Newly available
-
accent-color: The
accent-color
CSS property sets a color for checkboxes, radio buttons, and other form controls. Learn more. -
appearance: The
appearance
CSS property controls the appearance of form controls. Usingappearance: none
disables any default native appearance and allows the elements to be styled with CSS. Learn more. -
Array at(): The
at()
method of arrays and typed arrays returns the item at an index, including negative indices for getting items relative to the end of an array. Also known as the relative indexing method. Learn more. -
BroadcastChannel: The
BroadcastChannel
API allows you to send messages between same-origin browsing contexts, such as between the same page loaded in multiple tabs. Learn more. -
Cascade layers: The
@layer
CSS at-rule avoids specificity conflicts by providing priority levels for different groups of CSS rules, such as low-priority styles like resets, and high-priority styles like UI components. Learn more. -
<dialog>: The
<dialog>
HTML element represents a modal or non-modal dialog box, such as a confirmation prompt or a subwindow used to enter data. Learn more. -
:focus-visible: The
:focus-visible
CSS pseudo-class selects elements that match the:focus
pseudo-class and meets the browser's criteria for visually emphasizing focused elements. Learn more. -
structuredClone(): The
structuredClone()
global method creates a deep copy of an object. Values that cannot be cloned can instead be transferred, making the original value no longer usable. Learn more. -
3D transforms: The
transform
CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms. Learn more. -
Locks: The
navigator.locks
API coordinates work with shared resources through mutually exclusive ownership of a resource's name. Also known as web locks. Learn more.
Now available in Chrome
Limited availability
-
contextlost and contextrestored: The
contextlost
event for<canvas>
fires when the canvas backing storage is lost, while thecontextrestored
event fires when it is recreated. Learn more. -
Canvas createConicGradient(): The
createConicGradient()
methods draw a conic gradient to a 2D canvas. Learn more. -
Canvas reset(): The
reset()
method clears a canvas to its initial state. Learn more. -
Canvas roundRect(): The
roundRect()
methods draw a rounded rectangle to a 2D canvas. Learn more. -
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. 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 Chrome Android
Limited availability
-
contextlost and contextrestored: The
contextlost
event for<canvas>
fires when the canvas backing storage is lost, while thecontextrestored
event fires when it is recreated. Learn more. -
Canvas createConicGradient(): The
createConicGradient()
methods draw a conic gradient to a 2D canvas. Learn more. -
Canvas reset(): The
reset()
method clears a canvas to its initial state. Learn more. -
Canvas roundRect(): The
roundRect()
methods draw a rounded rectangle to a 2D canvas. Learn more. -
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. 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 Edge
Limited availability
-
contextlost and contextrestored: The
contextlost
event for<canvas>
fires when the canvas backing storage is lost, while thecontextrestored
event fires when it is recreated. Learn more. -
Canvas createConicGradient(): The
createConicGradient()
methods draw a conic gradient to a 2D canvas. Learn more. -
Canvas reset(): The
reset()
method clears a canvas to its initial state. Learn more. -
Canvas roundRect(): The
roundRect()
methods draw a rounded rectangle to a 2D canvas. Learn more. -
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. Learn more.
Now available in Firefox
Limited availability
-
Form-associated custom elements: Custom elements may act like built-in form elements, via the the
attachInternals()
method ofHTMLElement
and theElementInternals
API. Learn more.
Now available in Firefox for Android
Limited availability
-
Form-associated custom elements: Custom elements may act like built-in form elements, via the the
attachInternals()
method ofHTMLElement
and theElementInternals
API. Learn more.
Now available in Safari
Limited availability
-
abs() and sign(): The
abs()
andsign()
CSS functions compute the absolute value or the sign of the input. Learn more. -
Array findLast() and findLastIndex(): The
findLast()
andfindLastIndex()
methods of arrays and typed arrays search an array in reverse order for the first item that satisfies a test function. Learn more. -
pow(), sqrt(), hypot(), log(), and exp(): The
pow()
,sqrt()
,hypot()
,log()
, andexp()
CSS functions compute various exponential functions. Learn more. -
font-palette: The
font-palette
CSS property selects a color palette from the font, optionally overriding individual colors in the@font-palette-values
at-rule. 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. -
ic unit: The CSS
ic
unit corresponds to the width of CJK ideographic characters. Learn more. -
Masks: The
mask
CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image. Learn more. -
Media element pseudo-classes: The
:playing
,:paused
,:seeking
,:buffering
,:stalled
,:muted
, and:volume-locked
CSS pseudo-classes match<audio>
and<video>
elements based on their state. 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. -
requestVideoFrameCallback(): The
requestVideoFrameCallback()
method for<video>
schedules a function that runs with the next video frame. It is similar torequestAnimationFrame()
, but for video. Learn more. -
round(), mod(), and rem(): The
round()
,mod()
, andrem()
CSS functions compute rounded values and the remainder after division. 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. -
Small, large, and dynamic viewport units: The
sv*
,lv*
, anddv*
CSS viewport units are relative to the smallest, largest, and current (dynamic) viewport size. They are used to size elements in relation to the viewport's dimensions. Learn more. -
WebRTC encoded transform: The WebRTC encoded transform API allows you to modify audio and video streams in WebRTC connections. For example, it can be used for visual effects or custom codecs. Learn more.
-
WebRTC SCTP information: The
sctp
object onRTCPeerConnection
represents the negotiated SCTP transport. SCTP (Stream Control Transmission Protocol) is the protocol thatRTCDataChannel
uses. Learn more.
Now available in Safari on iOS
Limited availability
-
abs() and sign(): The
abs()
andsign()
CSS functions compute the absolute value or the sign of the input. Learn more. -
Array findLast() and findLastIndex(): The
findLast()
andfindLastIndex()
methods of arrays and typed arrays search an array in reverse order for the first item that satisfies a test function. Learn more. -
pow(), sqrt(), hypot(), log(), and exp(): The
pow()
,sqrt()
,hypot()
,log()
, andexp()
CSS functions compute various exponential functions. Learn more. -
font-palette: The
font-palette
CSS property selects a color palette from the font, optionally overriding individual colors in the@font-palette-values
at-rule. 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. -
ic unit: The CSS
ic
unit corresponds to the width of CJK ideographic characters. Learn more. -
Masks: The
mask
CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image. Learn more. -
Media element pseudo-classes: The
:playing
,:paused
,:seeking
,:buffering
,:stalled
,:muted
, and:volume-locked
CSS pseudo-classes match<audio>
and<video>
elements based on their state. 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. -
requestVideoFrameCallback(): The
requestVideoFrameCallback()
method for<video>
schedules a function that runs with the next video frame. It is similar torequestAnimationFrame()
, but for video. Learn more. -
round(), mod(), and rem(): The
round()
,mod()
, andrem()
CSS functions compute rounded values and the remainder after division. 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. -
Small, large, and dynamic viewport units: The
sv*
,lv*
, anddv*
CSS viewport units are relative to the smallest, largest, and current (dynamic) viewport size. They are used to size elements in relation to the viewport's dimensions. Learn more. -
WebRTC encoded transform: The WebRTC encoded transform API allows you to modify audio and video streams in WebRTC connections. For example, it can be used for visual effects or custom codecs. Learn more.
-
WebRTC SCTP information: The
sctp
object onRTCPeerConnection
represents the negotiated SCTP transport. SCTP (Stream Control Transmission Protocol) is the protocol thatRTCDataChannel
uses. Learn more.