웹기술 도감

:state()

The :state() CSS pseudo-class matches custom elements based on their custom state, set through the ElementInternals.states API.

<input type="file" webkitdirectory>

The <input type="file" webkitdirectory> HTML element shows a file picker from which users can choose a folder to upload with the form.

AbortSignal.any()

The AbortSignal.any() static method combines an iterable of abort signals into a single signal, with the abort reason taken from the first signal to abort.

AbortSignal.timeout()

The AbortSignal.timeout() static method returns an abort signal that automatically aborts after a specified duration.

Active view transition

The :active-view-transition CSS pseudo-class matches the root element when a view transition is active. The :active-view-transition-type() CSS pseudo-class matches only when the active view transition was started with the specified type.

Async clipboard

The navigator.clipboard API asynchronously reads and writes to the system clipboard.

Branch hinting (WebAssembly)

Branch hints in WebAssembly allows a browser to optimize performance when a branch is a likely to take a specific path.

CSP violation reports

CSP violation reporting sends a report to a URL nominated by the Reporting-Endpoints header or the ReportingObserver API when a page violates its content security policy.

ClipboardItem.supports()

The ClipboardItem.supports() static method checks if the browser supports writing data types such as "image/svg+xml" or other custom formats to the system clipboard.

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".

Custom highlights

Custom highlights style arbitrary text ranges, without adding extra elements to the DOM.

EXT_texture_compression_rgtc WebGL extension

The EXT_texture_compression_rgtc extension for WebGL 1.0 and 2.0 contexts adds RGTC compressed texture formats. RGTC is a block-based texture compression format suited for unsigned and signed red and red-green textures. Also known as Red-Green Texture Compression.

Event timing

The event and first-input performance entries and the PerformanceEventTiming API measures the latency of user input events, such as mouse clicks or keypresses. They're used to calculate Interaction to Next Paint (INP), a common metric for perceived responsiveness.

Exception references with exnref (WebAssembly)

When caught, an exception is reified into an exception reference, a value of the new type exnref.

Extended constant expressions (WebAssembly)

The i32.add, i32.sub, i32.mul, i64.add, i64.sub, and i64.mul operations extend constant expressions to include arithmetic.

Fetch priority

The fetch() priority option and the fetchpriority HTML attribute give hints to the browser about which requests to do before other requests of the same type.

Garbage collection (WebAssembly)

Garbage collection tracks references for better memory management with garbage-collected languages running in WebAssmbly.

Invoker commands

The command and commandfor attributes for the <button> HTML element dispatch an action to an element when the button is invoked (by click or keystroke), as a declarative alternative to addEventListener() calls or onclick attribute handlers.

JavaScript modules in service workers

The navigator.serviceWorker.register() method accepts { type: "module" } to load scripts that use import and export. Also known as ECMAScript modules or ESM in service workers.

JavaScript modules in shared workers

The SharedWorker() constructor accepts { type: "module" } to load scripts that use import and export. Also known as ECMAScript modules or ESM in shared workers.

Largest contentful paint (LCP)

The largest-contentful-paint performance entry and the LargestContentfulPaint API measures the time it takes for the largest image or text to appear. Largest contentful paint (LCP) is a common metric for perceived loading times.

Navigation API

The navigation API initiates, intercepts, or modifies browser navigation actions. Not to be confused with the navigator API.

Readable byte streams

A ReadableStream constructed with { type: "bytes" } reads bytes from a stream without making extra copies, improving efficiency for streams of large chunks. Also known as BYOB or bring your own buffer.

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 selected reports, such as Content Security Policy (CSP) violation reports or crash reports, to a nominated URL or callback function.

Screen wake lock

The navigator.wakeLock.request("screen") API prevents the device's screen from dimming or being turned off.

Scroll to text fragment

Text fragments are URL fragments on the form #:~:text=snippet and link to a snippet of text within a page. The browser may scroll, highlight, or otherwise bring that text to the reader's attention.

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.

Shared worker

The SharedWorker() constructor runs a script in its own thread, which can send and receive messages with other scripts running at the same origin.

Tail call optimization (WebAssembly)

Tail call optimization discards a caller frame and replaces the call with a jump instruction.

Trusted types

Trusted types allow you to lock down insecure parts of the DOM API and prevent client-side cross-site scripting (XSS) attacks.

Typed function references (WebAssembly)

A typed function reference can be called directly.

URLPattern

The URLPattern API creates patterns that can be matched against URLs or URL components.

Unsanitized HTML parsing methods

The Document.parseHTMLUnsafe() static method parses HTML into a DOM tree, while the setHTMLUnsafe() method of Element and ShadowRoot parses and inserts HTML into an existing tree. No sanitization applies to these methods, so never call them with user-provided HTML strings.

View transitions

View transitions allow you to create animated visual transitions between different states of a document.

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.

WebTransport

The WebTransport API transmits data between a client and a server, by using the HTTP/3 protocol.

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 style display: none, but can also check for visibility: hidden.

contenteditable="plaintext-only"

The contenteditable="plaintext-only" global HTML attribute allows the user to edit the content of an element, but prevents rich-text formatting.

cookieEnabled

The navigator.cookieEnabled property is a boolean for whether the browser accepts or ignores attempts to write cookie data.

document.caretPositionFromPoint()

The document.caretPositionFromPoint() method finds an insertion point, represented by a DOM node and an offset within that node, for given coordinates in the viewport.

getHTML()

The getHTML() method of Element and ShadowRoot objects serializes an element's DOM to an HTML string.

requestVideoFrameCallback()

The requestVideoFrameCallback() method for <video> schedules a function that runs with the next video frame. It is similar to requestAnimationFrame(), but for video.

scrollend

The scrollend event fires when an element or document has finished scrolling.

willReadFrequently

The optional willReadFrequently parameter of a canvas's getContext() method permits the browser to optimize for frequent getImageData() calls by avoiding hardware acceleration. Also known as multiple readback.

::details-content

The ::details-content pseudo-element selects the expandable content of a <details> element, excluding the <summary>.

::target-text

The ::target-text pseudo-element allows you to style text highlighted by a URL text fragment such as #:~:text=snippet.

:open

The :open CSS pseudo-class matches elements that have open states, like <details>, <dialog>, or <select>, based on their state.

@scope

The @scope CSS at-rule sets the scope for a group of rules.

@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.

Alt text for generated content

The / notation in content CSS property values adds alternative text to generated content. For example, the content: url('upvote-icon.svg') / 'Upvote' declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.

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.

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.

Math font family

The font-family: math CSS declaration uses the browser default font face for displaying mathematical expressions.

Page setup

The @page CSS at-rule sets the page-specific dimensions and margins for content such as printed documents, ebooks, or slides.

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).

Spelling and grammar text decorations

The text-decoration-line: spelling-error and text-decoration-line: grammar-error CSS declarations apply the browser's marking for spelling and grammatical mistakes. This is typically a wavy underline in red or green.

Vertical form controls

The writing-mode CSS property orients form elements (such as radio buttons, progress bars, or select menus) vertically when the writing mode is vertical-lr or vertical-rl. The direction CSS property sets whether inputs flow from top to bottom or bottom to top.

abs() and sign()

The abs() and sign() CSS functions compute the absolute value or the sign of the input.

align-content in block layouts

The align-content property vertically aligns content in block layouts, like it does in flex or grid layouts.

backdrop-filter

The backdrop-filter CSS property applies graphical effects such as blurring or color shifting to the area behind an element.

baseline-shift

The baseline-shift CSS property sets the position of an element relative to its dominant baseline.

content-visibility

The content-visibility CSS property delays rendering an element, including layout and painting, until it is needed.

contrast-color()

The contrast-color() CSS function picks a color that has guaranteed contrast against a specified foreground or background color.

crisp-edges

The image-rendering: crisp-edges CSS declaration scales images to preserve lines without blurring.

field-sizing

The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content.

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.

light-dark()

The light-dark() CSS function accepts two colors and uses one depending on the current color scheme.

paint-order

The paint-order CSS property sets the z-order of strokes, fills, and (in SVG content) markers. For example, paint-order: markers stroke fill; draws the markers, then stroke on top of markers, then fill on top of both markers and stroke.

print-color-adjust

The print-color-adjust CSS property sets whether styles of printed pages should be adjusted to use less ink, in cases such as light text on a dark background.

rcap unit

The rcap CSS length unit is a font-relative length equal to the value of the cap unit on the root element. Cap-height is approximately equal to the height of a capital Latin letter.

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.

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.

round(), mod(), and rem()

The round(), mod(), and rem() CSS functions compute rounded values and the remainder after division.

ruby-align

The ruby-align CSS property sets the spacing and alignment of ruby annotation text when it does not fill its available space.

ruby-position

The ruby-position CSS property sets the position of a ruby annotation in relation to its base text. Annotations can display over, under, or interleaved with the base text.

scrollbar-color

The scrollbar-color CSS property sets the color of the scrollbar track and thumb.

scrollbar-gutter

The scrollbar-gutter CSS property reserves space for the scrollbar, preventing unwanted layout changes as the scrollbar appears and disappears.

scrollbar-width

The scrollbar-width CSS property sets the width of the scrollbar.

shape()

The shape() CSS function creates shapes with a series of commands like line, move, and curve. It can be used with clip-path and shape-outside.

sibling-count() and sibling-index()

The sibling-count() and sibling-index() CSS functions return integers that are useful to style elements based on their positions among siblings or on the number of siblings, for example as part of a calc() expression.

text-decoration-skip-ink: all

The text-decoration-skip-ink: all CSS declaration forces interruptions in underlines and overlines where the line would cross a glyph. This contrasts with auto, which does not skip for CJK glyphs.

text-indent: each-line

The text-indent: each-line CSS declaration indents text after forced breaks as well as to the first line of a block.

text-indent: hanging

The text-indent: hanging CSS declaration indents all lines except the first.

text-wrap

The text-wrap CSS property sets how lines break in text that overflows the container. It is a shorthand for text-wrap-style and text-wrap-mode.

text-wrap: balance

The text-wrap: balance CSS declaration balances the length of each line when text is broken into multiple lines. Also known as headline balancing.

transform-box

The transform-box CSS property sets the position and dimensions of the reference box relative to which an element's transformations are calculated.

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%.

view-transition-class

The view-transition-class CSS property sets a name that can be used to apply styles to multiple named view transition pseudo-elements.

white-space-collapse

The white-space-collapse CSS property sets whether new line characters are shown as line breaks, and whether multiple consecutive spaces are all displayed or combined.

zoom

The zoom CSS property scales the size of an element. Unlike the transform property, a zoomed element affects page layout.

<link rel="dns-prefetch">

The rel="dns-prefetch" attribute for the <link> HTML element is a hint to the browser that the page or user is likely to request resources from another domain, so the browser should preemptively resolve DNS for the href value's domain.

Mutually exclusive <details> elements

Multiple <details> elements which use the same name attribute are mutually exclusive. When one member of the group is opened, all other members are closed.

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.

ToggleEvent source

The source property of a ToggleEvent object is the element which triggered the toggle event to fire for a popover, <dialog>, or <details> element, if applicable.

dialog.requestClose()

The requestClose() method of a <dialog> HTML element closes the dialog, firing a cancel event first, which listeners can use to prevent the dialog from closing. This differs from the close() method, which only fires the non-cancelable close event.

HTTP/3

HTTP/3 is a major revision of the HTTP network protocol, providing improved performance and efficiency by using QUIC as the underlying transport protocol.

Zstandard compression

Zstandard or zstd is a fast lossless compression algorithm. When used as a content encoding, it is often faster and offers better compression than brotli.

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.

Atomics.pause()

The Atomics.pause() static method gives a hint to the CPU that the code calling the method is in a short-duration wait for shared memory, known as spinning or a spinlock.

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().

Float16Array

Float16Array is a typed array of 16-bit floating point numbers.

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.

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.

Intl.Segmenter

The Intl.Segmenter API creates a locale-aware text splitter that can separate a string into meaningful graphemes, words, or sentences.

Iterator methods

The Iterator object is an abstract base for objects that implement the iterator protocol. It provides methods common to built-in iterators, such as filter(), find(), map(), and reduce(). You can also use the static method Iterator.from() to convert an existing iterable into an Iterator.

Iterator.concat()

The Iterator.concat() JavaScript method returns an iterator that yields values from a sequence of iterators, exhausting each iterator before moving on to the next.

JSON import attributes

Module import … with { type: "json" } statements load JSON data. Also known as JSON module scripts.

JSON source text access

To serialize and parse JSON in a lossless way, JSON.stringify() handles rawJSON values and JSON.parse()'s reviver callback takes a source context parameter.

Map getOrInsert()

The getOrInsert() and getOrInsertComputed() methods of Map objects get a value, setting and getting a default value if needed.

Math.sumPrecise()

The Math.sumPrecise() static method returns the sum of an iterable of numbers. It avoids the precision loss of intermediate partial sums, as found using reduce() or a loop to add together an array of values.

Promise.try()

The Promise.try() static method returns a promise that takes a callback of any kind (returns or throws, synchronously or asynchronously) and wraps its result in a Promise.

Promise.withResolvers()

The Promise.withResolvers() static method is an alternative to the Promise() constructor that returns both the promise and resolution functions. You can use this to access resolve and reject outside the scope of the executor function.

RegExp.escape()

The RegExp.escape() static method takes a string and replaces any characters that are potentially special characters of a regular expression with equivalent escape sequences. For example, RegExp.escape("[abc]") returns "\\[abc\\]".

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.

Set methods

The difference(), intersection(), isDisjointFrom(), isSubsetOf(), isSupersetOf(), symmetricDifference(), and union() methods of the JavaScript Set object performs operations between two sets.

Transferable ArrayBuffer

The transfer() and transferToFixedLength() methods of ArrayBuffer move a buffer from one context to another (for example, to a worker).

Uint8Array base64 and hex conversion

The static Uint8Array.fromBase64() method and the Uint8Array instance methods toBase64() and setFromBase64() convert to and from base64 strings. Similarly, the static Uint8Array.fromHex() method and the instance methods toHex() and setFromHex() convert to and from hex strings.

2D canvas

The CanvasRenderingContext2D API is the "2d" rendering context for the <canvas> element. It represents a flat, two-dimensional space for drawing graphics and animations.

2D canvas opacity

The optional alpha parameter of a 2D canvas's getContext() method sets whether the canvas has an alpha transparency channel. If set to false, then this permits the browser to optimize compositing for an opaque canvas.

<audio>

The <audio> element plays sound such as audio effects or music, optionally with controls provided by the browser.

<button>

The <button> HTML element represents a button that triggers some action, such as submitting a form or opening a dialog, styled as a labeled rectangular box by default.

<canvas>

The <canvas> HTML element is a space to draw graphics in, using the 2D canvas API, WebGL, or WebGPU.

<datalist>

The <datalist> element sets recommended values for an <input> element. Browsers may show a dropdown menu of all values or match values as the user types.

<fencedframe>

The <fencedframe> element embeds another HTML page into the current page in a more secure and privacy-preserving way than <iframe> elements.

<fieldset> and <legend>

The <fieldset> and <legend> elements group several form control elements within a web form.

<form>

The <form> element contains interactive controls for submitting information.

<input type="checkbox">

The <input type="checkbox"> HTML element represents a tickable box with two states, checked and unchecked.

<input type="file" multiple>

The <input type="file" multiple> HTML element shows a file picker from which users can choose one or more files to upload with a form.

<input type="file">

The <input type="file"> HTML element shows a file picker from which users can choose a file to upload with the form.

<input type="image">

The <input type="image"> HTML element is an image that can be used to submit a form, like the <input type="submit"> element.

<input type="number">

The <input type="number"> HTML element represents numeric input data.

<input>

The <input type="text"> HTML element allows the user to enter information into a form. By default, an <input> element is a text input.

<install>

The <install> HTML element represents a button that, upon activation, prompts the user to choose whether to install a progressive web app.

<label>

The <label> HTML element represents a caption for a form field.

<link rel="prefetch">

The rel="prefetch" attribute for the <link> HTML element is a hint to the browser that the user is likely to navigate to a resource, so the browser should preemptively fetch and cache the resource.

<meta name="application-title">

The name="application-title" attribute for the <meta> HTML element sets an installed web application's title bar text.

<meter>

The <meter> element represents a scalar value within a known range or a fractional value, typically shown as a progress bar.

<output>

The <output> element represents the result of a calculation, user action, or form entry.

<progress>

The <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

<select>

The <select> element provides a menu of options for a user to pick from, typically rendered as a dropdown list.

<source>

The <source> element sets a media resource for the <picture>, <video>, and <audio> elements.

<template for>

The <template for="…"> HTML element replaces the content at a named range or insertion point, marked by the processing instructions <?start name="…"> and <?end> or <?marker name="…">. You can use this to stream or "patch" partial updates into the document out of order.

<textarea>

The <textarea> element represents an editing control that allows users to enter multi-line, free-form, plain text.

<video>

The <video> element plays videos or movies, optionally with controls provided by the browser.

@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.

@font-face

The @font-face CSS at-rule creates a custom font-family value. The at-rule's descriptors set the font's name, source, and various display settings.

@supports (compatibility prefix)

The @supports (-webkit-transform-3d) CSS media query is a standardized compatibility alternative to @supports (transform-style).

ANGLE_instanced_arrays WebGL extension

The ANGLE_instanced_arrays extension for WebGL 1.0 contexts draws the same object multiple times or groups of similar objects multiple times, if the group shares the same vertex data, primitive count and type.

ARIA attribute reflection

WAI-ARIA attributes have corresponding properties on Element and ElementInternals objects.

AbortController and AbortSignal

The AbortController and AbortSignal APIs allow you to cancel an ongoing operation, such as a fetch() request.

Abortable fetch

If you construct a fetch request with an AbortSignal, you can cancel the request.

Accelerometer

The Accelerometer, LinearAccelerationSensor and GravitySensor APIs read the acceleration applied to a device in three dimensions, either including the effect of gravity, without its effect, or only its effect, respectively.

Alerts

The window.alert(), window.confirm(), and window.prompt() methods open modal dialogs for notifying the user, asking for confirmation, or entering text.

Ambient light sensor

The AmbientLightSensor API returns the current light level in lux of the ambient light level around the device.

Anchor positioning

Anchor positioning places an element based on the position of another element. For example, you can place a tooltip next to the content it references.

Anchors (WebXR)

An XRAnchor object keeps track of a pose that is fixed relative to the real world. Anchors build an illusion that the placed objects are really present in the user's environment.

Animations (CSS)

The animation CSS property animates an element's style over time, using keyframes described in @keyframes rules.

Application shortcuts

The shortcuts web app manifest member registers common actions of an installed web app with the device. The device can present these actions to the user in contextually appropriate locations, such as jump lists on Windows or the app launcher on Android.

Asynchronously iterable streams

Asynchronous iteration of a stream allows you to use for await … of loops to iterate through a stream's incoming data.

Attribution reporting

The attribution reporting API measures when an ad click or view leads to a conversion, such as a purchase on an advertiser site.

Audio and video tracks

The audioTracks and videoTracks APIs for media elements switch audio and video tracks during playback.

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.

AudioListener

An AudioListener object represents the virtual position and orientation of a person relative to sound sources, to spatialize audio in a Web Audio context.

AudioListener setPosition() and setOrientation()

The setPosition() and setOrientation() methods of the AudioListener API set the virtual position and orientation of a person relative to sound sources, to spatialize audio in a Web Audio context.

AudioWorklet

The AudioWorklet API runs module code in a separate thread, specifically for non-blocking, low latency audio processing.

Augmented reality

The "immersive-ar" value for navigator.xr.requestSession() starts an augmented reality WebXR session that renders content aligned with the visible environment.

Autonomous custom elements

Autonomous custom elements are HTML elements with a hyphenated tag name (like <example-element>) that have behaviors you define.

Back/forward cache blocking reasons

The notRestoredReasons property of a PerformanceNavigationTiming object explains why the current document was blocked from using the back/forward cache (also known as the bfcache) on navigation.

Background fetch

Background fetch downloads data in the background even when the web page is closed.

Background sync

The background synchronization API registers a service worker callback to run only when the device is no longer offline. You can use this to let users continue using your app while offline and synchronize with a server after reconnecting.

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.

BarProp

The visible property of the window.locationbar, window.menubar, window.personalbar, window.scrollbars, window.statusbar, and window.toolbar APIs historically represented the visibility of a browser user interface. For privacy reasons, it now represents whether the window is a pop-up.

Barcode detector

The BarcodeDetector API recognizes various barcode formats in images.

Base64 encoding and decoding

The atob() and btoa() global functions encode and decode strings to and from base 64, respectively.

Battery status

The navigator.getBattery() API obtains information about the device's battery, including charge level and status. Also known as the Battery API.

Beacons

The navigator.sendBeacon() method asynchronously sends an HTTP POST request with a limited amount of data, typically for app state, events, and analytics data. The one-way beacon is guaranteed to be initiated before the browser unloads the page, but the sender does not get to handle the response.

BigInt to i64 conversion (WebAssembly)

Integer values pass bidirectionally between JavaScript and WebAssembly, converted to i64 values in WebAssembly or BigInt values in JavaScript.

BroadcastChannel

The BroadcastChannel API allows you to send messages between same-origin browsing contexts, such as between the same page loaded in multiple tabs.

Bulk memory operations (WebAssembly)

Bulk memory operations, such as copy and init, mirror the efficiency of native memcpy and memmove operations.

COEP violation reports

COEP violation reporting sends a report to a URL nominated by the Reporting-Endpoints header or the ReportingObserver API when a page violates its Cross-Origin-Embedder-Policy policy.

CPU compute pressure

The PressureObserver API monitors CPU load, allowing you to adjust workloads in response to available computing resources. Also known as the Compute Pressure API.

Canvas createConicGradient()

The createConicGradient() methods draw a conic gradient to a 2D canvas.

Canvas reset()

The reset() method clears a canvas to its initial state.

Canvas roundRect()

The roundRect() methods draw a rounded rectangle to a 2D canvas.

Capture Handle

The capture handle API allows you to share a custom handle (a string) from a web application being captured by getDisplayMedia() to the capturing web application.

Change event

The change event for <input>, <select>, and <textarea> elements fires when the user modifies the element's value. Unlike the input event, the change event does not necessarily fire on every alteration to an element's value.

Channel messaging

Channel messaging communicates one-to-one between browsing contexts on the same origin, such as between <iframe> elements or two documents using a shared worker.

Clipboard events

The "copy", "cut", and "paste" events fire on elements when the user starts an action with the clipboard.

CloseWatcher

The CloseWatcher API listens and responds to close requests on in-page components, such as modals, popovers, and sidebars.

Color management for 2D canvas

The optional colorSpace parameter of a 2D canvas's getContext() method chooses the color representation, such as "srgb" or "display-p3".

Composition events

The compositionstart, compositionupdate, and compositionend events fire when an input method editor adds characters that might not be commonly available on keyboards. Examples of these characters are emoji, logograms in Asian languages, or input from speech recognition processors.

Compression streams

The CompressionStream and DecompressionStream APIs compress and decompress data using the gzip or deflate formats.

Connection allowlists

The Connection-Allowlist HTTP response header limits which requests a page may initiate using fetch and other APIs.

Constraint validation API

Methods that validate form controls before submission, such as checkValidity(), reportValidity() and setCustomValidity().

Constructed stylesheets

The CSSStyleSheet constructor creates a new stylesheet which can be shared between a document and multiple shadow roots using adoptedStyleSheets.

Contact picker

The navigator.contacts API allows you to ask users to share limited details about entries in their contact list with your application.

Container queries

Container size queries with the @container at-rule apply styles to an element based on the dimensions of its container.

Content Index

The Content Index API allows developers to register their offline enabled content with the browser.

Content Security Policy (CSP)

Content Security Policy (CSP) helps to mitigate certain security threats, including cross-site scripting (XSS) and clickjacking attacks. It consists of a set of directives from a website to a browser, which instruct the browser to restrict the things that the site is allowed to do.

Cookie store

The CookieStore API is an asynchronous and promise-based API for managing cookies. It does not rely on document and so is available to service workers as well.

Cookies

The Set-Cookie HTTP header stores limited amounts of data that persist across request and response, creating shared state between the browser and server.

Crash report storage

The window.crashReport object is a key-value store to record information about your application's state. If there's a crash, then the data in the key-value store is sent to your crash reporting endpoint, to help you pinpoint the cause of the crash.

Credential management

The navigator.credentials API provides generic storage for authentication credentials. Other credential APIs represent specific kinds of credentials, such as password or public key credentials, that the credential management API stores.

Credentialless iframes

The credentialless attribute for the <iframe> HTML element loads third-party content in an ephemeral context and does not send any credentials such as cookies. When using cross-origin isolation, this allows you to embed content that does not send Cross-Origin-Embedder-Policy headers.

Cross-document view transitions

The @view-transition CSS rule sets whether a document opts-in to transitions between documents in a multi-page application. Both the old and new document must opt-in for a transition to be triggered.

Custom formats for clipboard items

The web prefix for ClipboardItem data types (also known as MIME types) allows reading and writing unsanitized custom data from the device clipboard.

Custom highlights from point

The CSS.highlights.highlightsFromPoint() method returns an array of Highlight objects at a specified point.

Custom media queries

The @custom-media CSS at-rule names a media query, which you can reuse in multiple @media rules.

Customized built-in elements

Customized built-in elements are HTML elements that extend built-in elements using the is attribute, to add new behaviors that you define.

DOM

The DOM (Document Object Model) API represents HTML and XML documents as trees of nodes. You can use the API to inspect and modify the structure and content of a document.

DOM Geometry

The DOMMatrix, DOMPoint, DOMQuad and DOMRect APIs represent points, rectangles, quadrilaterals and transformation matrices within JavaScript. They can be used in transformations in CSS, <canvas>, and SVG.

DOM overlays for WebXR

A DOM overlay shows 2D DOM content as an interactive, transparent layer on top of a WebXR application's WebGL content and camera image.

DOMParser

The DOMParser API parses XML or HTML source code from a string into a DOM Document.

Dataset

The dataset API attaches and accesses custom data on elements, using either the dataset property of HTMLElement or attributes prefixed with data-.

Date and time <input> types

The <input type="date"> and <input type="time"> HTML elements show date and time pickers.

Dedicated workers

The Worker() constructor runs a script in its own thread, which can send and receive messages with the script that created it. Also known as web workers.

Deprecation reports

Deprecation reporting sends a report to a URL nominated by the Reporting-Endpoints header or the ReportingObserver API when a page uses a deprecated API or other browser feature.

Depth sensing

An XRDepthInformation object represents a measurement of the distance from the user's device to the real-world geometry in the user's environment.

Desynchronized 2D canvas

The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a 2D canvas independently of the event loop. This can reduce drawing latency.

Desynchronized WebGL canvas

The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a WebGL canvas independently of the event loop. This can reduce drawing latency.

Desynchronized WebGL2 canvas

The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a WebGL2 canvas independently of the event loop. This can reduce drawing latency.

Device media queries

The device-aspect-ratio, device-height, and device-width media features describe physical properties of the displaying output device.

Device memory

The navigator.deviceMemory property is the approximate amount of device memory, in gigabytes.

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.

Device posture

The device posture API and the device-posture CSS media feature reflect the physical posture of a device, such as whether a foldable device is folded or unfolded.

Digital credentials

The digital credentials API issues and requests digital credentials, such as driver's licenses or ID cards, with the browser or operating system. Digital credentials extend the navigator.credentials credential management API.

Digital goods

The window.getDigitalGoodsService API connects to stores or billing services for in-app products and subscriptions.

Document colors

A document's bgColor, fgColor, alinkColor, linkColor, and vlinkColor properties get and set the background, foreground, active link, link, and visited link colors of that document.

Document picture-in-picture

The document picture-in-picture API creates an always-on-top window from arbitrary HTML content.

Drag and Drop

The Drag and Drop API lets users drag and drop elements and external files such as images onto web pages. Developers can customize which elements can become draggable, the type of feedback the draggable elements produce, and the droppable elements.

EXT_blend_minmax WebGL extension

The EXT_blend_minmax extension for WebGL 1.0 contexts adds two blend equations, the minimum and maximum color components of the source and destination colors.

EXT_color_buffer_float WebGL extension

The EXT_color_buffer_float extension for WebGL 2.0 contexts adds color-renderable floating point formats to renderbufferStorage().

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.

EXT_disjoint_timer_query WebGL extension

The EXT_disjoint_timer_query extension for WebGL 1.0 contexts measures the duration of a set of GL commands, without stalling the rendering pipeline.

EXT_float_blend WebGL extension

The EXT_float_blend extension for WebGL 1.0 and 2.0 contexts adds 32-bit floating-point components to blending and draw buffers.

EXT_frag_depth WebGL extension

The EXT_frag_depth extension for WebGL 1.0 and 2.0 contexts adds setting the depth value of a fragment from within the fragment shader.

EXT_sRGB WebGL extension

The EXT_sRGB extension for WebGL 1.0 contexts adds sRGB support to textures and framebuffer objects.

EXT_shader_texture_lod WebGL extension

The EXT_shader_texture_lod extension for WebGL 1.0 and 2.0 contexts adds texture functions to the OpenGL ES Shading Language such that the shader writer explicitly controls the level of detail (LOD).

EXT_texture_compression_bptc WebGL extension

The EXT_texture_compression_bptc extension for WebGL 1.0 and 2.0 contexts adds the BPTC compressed texture formats to compressedTexImage2D() and compressedTexSubImage2D().

EXT_texture_filter_anisotropic WebGL extension

The EXT_texture_filter_anisotropic extension for WebGL 1.0 and 2.0 contexts adds anisotropic filtering (AF). AF improves the quality of mipmapped texture access when viewing a textured primitive at an oblique angle.

EXT_texture_norm16 WebGL extension

The EXT_texture_norm16 extension to WebGL 2.0 contexts adds 16 bit signed normalized and unsigned normalized fixed-point texture, renderbuffer, and texture buffer formats.

EditContext

The EditContext API allows you to build rich text editors that support advanced text input, such as Input Method Editor (IME) composition, an emoji picker, or other platform-specific editing UI.

Element capture

The restrictTo() method on screen capture media tracks limits capture to a specific element, excluding content which might occlude the element itself, such as video conferencing controls.

Element timing

The element performance entry and the PerformanceElementTiming API measures the time to render elements that have the elementtiming attribute.

Element-scoped view transitions

The startViewTransition() method of an Element object starts a view transition that affects only that element's DOM tree. You can use this to run separate elements' transitions concurrently.

Encrypted media extensions

The mediaKeys property of HTMLMediaElement and the navigator.requestMediaKeySystemAccess() method control the playback of content subject to digital rights management. Also known as EME.

Events

The Event API and the addEventListener() method on objects that receive events (event targets) represent and handle significant things happening on a page. Many APIs fire events for a wide range of situations relating to those APIs, such as an image loading, a user clicking, or a value changing.

Exception handling (WebAssembly)

Exceptions break the normal control flow of execution to represent exceptional behavior, such as an error. You can respond to the exception in JavaScript code.

Eyedropper

The EyeDropper API opens an eyedropper tool, a color picker that allows users to select a color from their screen.

Feature policy

The Feature-Policy response header sets whether a policy-controlled feature, such as an API, may be used in a document. Not to be confused with permissions policy.

Federated credential management

The IdentityCredential API delegates authentication to a third-party identity provider, instead of using third-party cookies. Also known as FedCM.

Federated credentials

The FederatedCredential API represents the details required to authenticate a user using a third-party identity provider. Not to be confused with federated credential management (FedCM).

Fetch

The fetch() method makes asynchronous HTTP requests.

Fetch form data

The Request.formData() and Response.formData() methods read a request or response body and return a FormData promise. You can use it to access the fields of a form submission.

Fetch upload streams

The fetch() method and Request() constructor accept a ReadableStream object as the request's body option, to stream upload data to the server.

File API

The File API represents and reads from file data and metadata. Typically, you get files through other APIs, such as the <input type="file"> element or drag-and-drop events. You may also send file data to other APIs, such as creating images or drawing on canvases.

File handlers

The file_handlers web app manifest member registers an installed web app as a handler for files with specific file extensions or MIME types.

File system access

The showOpenFilePicker(), showDirectoryPicker(), and showSaveFilePicker() methods request access to files and directories on the user's device and returns a handle for reading and writing to them.

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.

Focus events

Focus events, such as focus and blur, fire when an element gets or loses focus.

Font loading

The document.fonts API dynamically loads custom fonts and tracks when fonts are loading or ready to use.

Font metric overrides

The ascent-override, descent-override, and line-gap-override descriptors adjust the display of a font declared in an @font-face statement. This can help make fallback fonts look the same size.

Form-associated WebMCP attributes

The toolname, tooldescription, and toolautosubmit HTML form element attributes register actions that can be called by in-browser AI agents or browser extensions. Also known as declarative WebMCP.

Form-associated custom elements

Custom elements may act like built-in form elements, via the attachInternals() method of HTMLElement and the ElementInternals API.

Fullscreen API

The fullscreen API makes a specific element fill the whole screen and hides most browser UI.

Gamepad

The navigator.getGamepads() API accesses and responds to signals from game controllers.

Gamepad (WebXR)

The gamepad attribute of an XRInputSource represents an XR input device, such as a motion controller, that reports data from physical inputs (such as buttons, touch pads, and triggers).

Gamepad VR hands and poses

The hand and pose properties of a Gamepad object represent the position in space and the hand that WebVR controllers are held in.

Gamepad haptic feedback

The gamepad.vibrationActuator property represents a gamepad's haptics hardware, which allows you to control the vibration motors in a gamepad.

Gamepad touch buttons

The touched property of a GamepadButton object indicates whether a button capable of detecting touch is currently touched.

Geolocation API

The navigator.geolocation API requests the user's latitude, longitude, heading, and speed.

Global privacy control

The Sec-GPC request header indicates that the user does not consent to a website or service selling or sharing their personal information with third parties.

Gyroscope

The Gyroscope API reads the angular velocity of a device in three dimensions.

HTML media capture

The capture HTML attribute for <input type="file"> elements allows the user to capture media using the device's camera or microphone.

HTML processing instructions

An HTML processing instruction is text enclosed by <? and >, which marks a target for further processing. They may appear anywhere in a document. They are ignored like comments when they're not recognized for a specific purpose.

Hand input

An XRHand object, from the hand attribute of an XRInputSource object, represents a WebXR session's fully-articulated hand tracking model.

History

The window.history API manipulates the browser session history, from navigations to state management, in the tab or frame that the current page is loaded in.

Hit test

The getHitTestResults() method of an XRFrame object helps place objects in an augmented reality session by finding where cast rays intersect with real-world geometry.

Idle detection

The IdleDetector API is used to notify a webpage of the user's idle, active, and locked state.

ImageBitmapRenderingContext

The ImageBitmapRenderingContext API is the "bitmaprenderer" rendering context for the <canvas> element. It is commonly used to transfer frames from an OffscreenCanvas to a user-visible <canvas> element.

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.

Import and export of mutable globals (WebAssembly)

Mutable global variables are importable and exportable.

IndexedDB

The IndexedDB API is a local storage transactional object database.

IndexedDB getAllRecords()

The getAllRecords() method of IDBObjectStore and IDBIndex return records and their primary keys from an IndexedDB store or index. The records can be read in batches and in reverse order. The getAllRecords() methods speed up read operations on large datasets.

Ink

The navigator.ink API uses the system compositor to draw to a <canvas> element ahead of pointer events, reducing the delay between moving a stylus or cursor and a pen stroke appearing on screen.

Insertable streams for MediaStreamTrack

The MediaStreamTrackProcessor and MediaStreamTrackGenerator APIs modify the contents of a media track for merging streams, applying real-time effects like funny hats, and content overlays.

Integrity violation reports

Subresource integrity violation reporting sends a report to a URL nominated by the Reporting-Endpoints header or the ReportingObserver API when a resource request violates an integrity check.

Interaction contentful paint

The interaction-contentful-paint performance entry, which returns an InteractionContentfulPaint instance, is emitted when an interaction causes one or more contentful paints. Use it to measure LCP for soft navigations in single page apps or to measure contentful paints due to an interaction.

Interaction media queries

The pointer, any-pointer, hover, and any-hover CSS media queries set styles based on the presence of pointing devices and their ability to hover over elements. For example, most smartphones match the (hover: none) and (pointer: coarse) media query.

Intersection observer

The IntersectionObserver API asynchronously observes changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Intervention reports

Intervention reporting sends a report to a URL nominated by the Reporting-Endpoints header when the browser has not honored an application's request, contrary to specified behavior, such as for security or privacy reasons.

JavaScript modules

JavaScript modules allow code to be organized into reusable units. Modules use import to load other modules and export to declare what is available to import from other modules. In HTML, modules are loaded with <script type="module">.

JavaScript modules in workers

The Worker() constructor accepts { type: "module" } to load scripts that use import and export. Also known as ECMAScript modules or ESM in workers.

JavaScript promise integration (WebAssembly)

The JavaScript promise integration (JSPI) suspends a WebAssembly module when it calls a JavaScript method that returns a promise. The module resumes when the promise is resolved. You can use this to call asynchronous Web APIs from synchronous WebAssembly.

KHR_parallel_shader_compile WebGL extension

The KHR_parallel_shader_compile extension for WebGL 1.0 and 2.0 contexts checks the status of shader compilation without blocking the runtime.

Keyboard events

The keydown and keyup events fire for each key press (or, with modifier keys, a combination of key presses) on a keyboard.

Keyboard lock

The navigator.keyboard.lock() API allows you to capture keys that are normally reserved by the operating system. It can be used to provide an immersive fullscreen experience such as games.

Keyboard map

The navigator.keyboard.getLayoutMap() API returns a map from key codes to human readable key names. It can be used to describe buttons to the user when using the keyboard as a set of buttons, such as in games.

Language

The navigator.language property is a string representing the preferred language of the user, usually the language of the browser UI. The navigator.languages property is an array of strings representing the user's preferred languages.

Language detector

The LanguageDetector API identifies the likely natural language that some text is written in. You can use this API to supplement machine translation when the source source language is not known.

LanguageModel

The LanguageModel API prompts an on-device language model. Also known as the Prompt API.

Launch handler

The launch_handler web app manifest member, with the client_mode property, configure how web app launches behave when an instance of the app is already open. For example, you can choose to focus the existing app instance instead of launching a new one.

Layers (WebXR)

WebXR layer types, such as XRCylinderLayer, XRCylinderLayer, XREquirectLayer, XRProjectionLayer or XRQuadLayer, are managed by the system compositor, to reduce latency or resampling.

Layout instability

The layout-shift performance entry and LayoutShift API measures the layout stability of web pages based on movements of the elements on the page. They're used to calculate Cumulative Layout Shift (CLS), a common metric for perceived stability.

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.

Lazy-loading media

The loading="lazy" attribute for <video> and <audio> elements defers loading the media resource until the element is near the viewport. This matches the lazy-loading behavior for <img> and <iframe> elements.

Lighting estimation

The XRLightProbe and XRLightEstimate objects represent real-world environmental lighting conditions during a WebXR session.

Local fonts

The window.queryLocalFonts() method returns an array of locally-installed fonts, each represented by a FontData object.

Local network access

The "local-network-access" user permission (and certain actions that imply this permission, such as a fetch() request with { targetAddressSpace: "local" }) allows a site to send requests to servers on a user's local network.

Location

The location global object represents the current page's address. You can use it to get the parts of the address (such as location.hostname or location.pathname) or navigate to another URL.

Locks

The navigator.locks API coordinates work with shared resources through mutually exclusive ownership of a resource's name. Also known as web locks.

Long animation frames

The long-animation-frame performance event type and the PerformanceLongAnimationFrameTiming API provide information about rendering updates that take longer than 50 milliseconds. Also known as LoAFs.

Long tasks

The longtask performance event type and the PerformanceLongTaskTiming API provides information about tasks that occupy the UI thread for 50 milliseconds or more, a metric for input latency, delayed animations, and other sources of "jank."

Magnetometer

The Magnetometer API reads magnetic field sensor data from the device's magnetometer.

Managed media source

The ManagedMediaSource API is a MediaSource where the browser manages the memory of source buffers and may evict data if needed.

MathML

MathML, or the Mathematical Markup Language, describes mathematical notation, such as expressions and formulas. Also known as MathML Core.

Media capabilities

The navigator.mediaCapabilities API queries the encoding and decoding abilities of the device, such as supported codecs, resolutions, and bitrates.

Media capture

The navigator.mediaDevices.getUserMedia() API requests access to devices that produce audio or video streams, such as microphones or video cameras.

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.

Media playback quality

The getVideoPlaybackQuality() method of HTMLVideoElement returns metrics that can be used to determine the playback quality of a video, such as how many frames were dropped.

Media queries

The @media CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as screen or print, and one or more mandatory media features, such as prefers-reduced-animations.

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.

Media session

The navigator.mediaSession API integrates with platform UI for media playback. It can be used to set metadata such as title and artwork, and to handle user actions like playing, pausing, or seeking.

Media source

The MediaSource API is a custom data source for media elements commonly used for adaptive streaming. Also known as Media Source Extensions (MSE).

MediaController

The playback of multiple <video> or <audio> elements can be coordinated by a MediaController instance, for example to synchronize a sign-language interpreter track with the main video track.

MediaStream recording

The MediaRecorder API captures data generated by MediaStream or HTMLMediaElement objects for analysis, processing, or saving to disk. Also known as the Media Recording API.

Memory measurement

The measureUserAgentSpecificMemory() method estimates the memory usage of a web application including all its iframes and workers.

Memory64 (WebAssembly)

Instructions accept 64-bit memory indexes.

Mouse events

Mouse events, such as click, mousedown, or mousemove, fire when users interact with an input or pointing device such as a mouse, trackpad, or touchscreen.

Multi-memory (WebAssembly)

A single module in WebAssembly can have multiple memories.

Multi-value (WebAssembly)

Instructions and blocks can produce multiple result values.

Mutation events

Mutation events like DOMSubtreeModified, DOMNodeInserted, or DOMNodeRemoved fire when DOM changes occur.

MutationObserver

The MutationObserver API watches for changes to the DOM tree and calls a callback function when DOM changes occur.

Navigation precommit handlers

The precommitHandler callback option to NavigateEvent's intercept() method returns a promise that defers navigation until the promise resolves. You can use this to change the navigation's URL, state, and history before navigation occurs.

Navigation timing

The navigation performance entry and the PerformanceNavigationTiming API measures navigation events, such as loading time or the number of redirects.

Navigation timing confidence

The confidence property of a navigation timing entry describes whether the navigation metric is likely to be representative the page's performance (high confidence) or affected by transient conditions, such as browser startup (low confidence).

Navigator

The window.navigator API is a generic global object, under which many other, more interesting APIs are located. It doesn't do anything interesting on its own.

Network Information

The navigator.connection API provides information about the network connection a device is using and fires events when the connection type changes.

Non-cookie storage access

Non-cookie storage access extends the requestStorageAccess() API to let content in cross-site iframes request access to first-party data beyond cookies.

Non-trapping float-to-int conversion (WebAssembly)

Saturating floating-point to integer conversion operators return the maximum or minimum integer value on overflow instead of trapping.

Notifications

The Notification() constructor shows a message to the user, typically using the notification system of the host operating system.

OES_draw_buffers_indexed WebGL extension

The OES_draw_buffers_indexed extension for WebGL 2.0 contexts allows you to control blending on a per-color basis when writing to multiple color buffers simultaneously.

OES_element_index_uint WebGL extension

The OES_element_index_uint extension for WebGL 1.0 contexts adds support for gl.UNSIGNED_INT types to WebGLRenderingContext.drawElements().

OES_fbo_render_mipmap WebGL extension

The OES_fbo_render_mipmap extension for WebGL 1.0 contexts attaches any level of a texture to a framebuffer object.

OES_standard_derivatives WebGL extension

The OES_standard_derivatives extension for WebGL 1.0 contexts adds the GLSL derivative functions dFdx, dFdy, and fwidth.

OES_texture_float WebGL extension

The OES_texture_float extension for WebGL 1.0 contexts adds floating-point pixel types for textures.

OES_texture_float_linear WebGL extension

The OES_texture_float_linear extension for WebGL 1.0 and 2.0 contexts adds linear filtering with floating-point pixel types for textures.

OES_texture_half_float WebGL extension

The OES_texture_half_float extension for WebGL 1.0 contexts adds texture formats with 16-bit (also known as half float) and 32-bit floating-point components.

OES_texture_half_float_linear WebGL extension

The OES_texture_half_float_linear extension for WebGL 1.0 contexts adds linear filtering with half floating-point pixel types for textures.

OES_vertex_array_object WebGL extension

The OES_vertex_array_object extension for WebGL 1.0 contexts adds vertex array objects (VAOs) which encapsulate vertex array states. These objects keep pointers to vertex data and names for different sets of vertex data.

OVR_multiview2 WebGL extension

The OVR_multiview2 extension for WebGL 2.0 contexts renders into multiple views simultaneously. This especially useful for virtual reality (VR) and WebXR.

Observable

The when() method on a event target returns an Observable object, which provides a declarative API for subscribing to and operating on events. It's an alternative to addEventListener() callbacks.

OfflineAudioContext

The OfflineAudioContext API represents an audio processing graph that writes to an AudioBuffer instead of an output device.

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.

Online status

The navigator.onLine property is a boolean for whether the browser is connected to some network (though not necessarily the internet). The online and offline events fire when the connection state changes.

Orientation Sensor

The AbsoluteOrientationSensor and RelativeOrientationSensor APIs describe the physical orientation of a device in three-dimensional space, either in relation to the Earth's coordinate system or in relation to the device's own orientation, respectively.

Origin

An Origin object represents an origin, as in a scheme, hostname, and port. You can use it to make same-site and same-origin comparisons.

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.

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.

Page lifecycle

The page lifecycle API helps you safely handle page suspensions or discards from memory. The freeze and resume events fire when the browser suspends or resumes a page from memory while the document.wasDiscarded property reports whether the page was reloaded after being dropped.

Page transition events

The pageshow and pagehide transition events fire when a document loads or unloads due to a navigation, such as clicking on a link on a page or the back button in a browser.

Page visibility

The document.visibilityState and document.hidden properties tell you whether the page is visible to the user (for example, it's not minimized or in a background tab).

Page visibility state

The visibility-state performance entry and the VisibilityStateEntry API measure the timing of page visibility state changes, such as when a tab is no longer visible or the user has switched to another app.

Paint timing

The paint performance entry and the PerformancePaintTiming API measures the duration of "paint" (also called "render") operations as a page loads. The API measures the time to First Paint (FP) and First Contentful Paint (FCP), common metrics for perceived loading times.

Partitioned cookies

Partitioned cookies allow you to opt a cookie into partitioned storage, with a separate cookie jar per top-level site. Also known as Cookies Having Independent Partitioned State or CHIPS.

Password credentials

The PasswordCredential API represents a username and password.

Payment handler

The payment handler API registers a web application as a payment handler and responds to payment requests in the browser's user interface, rather than redirecting users to a separate site to complete a payment.

Payment request

The PaymentRequest API prompts the user to make a payment through the browser's user interface.

Performance

The performance global object and the PerformanceObserver API provide access to performance-related information for the current execution context.

PerformanceTiming and PerformanceNavigation

The window.performance.timing and window.performance.navigation APIs report performance timing information for events that occur during the loading and use of the current page.

Periodic background sync

The periodic background synchronization API fires a recurring periodicsync event in a service worker. You can use this to update data in the background at regular intervals.

Permissions

The navigator.permissions API checks whether a permission, such as access to geolocation data, has been granted.

Permissions policy

The Permissions-Policy response header and the allow attribute for <iframe> elements sets whether a policy-controlled feature, such as an API, may be used in a document.

Permissions policy violation reporting

Permissions policy violation reporting sends a report to a URL nominated by the Reporting-Endpoints header or the ReportingObserver API when a page violates a policy. You can also use the Permissions-Policy-Report-Only header to receive reports of what might break under a given policy.

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.

Pointer Events

Pointer events, such as pointerdown, and the PointerEvent API, represent general pointing inputs, from a wide range of devices, such as a mouse, pen or stylus, or touch with one or more fingers. Not to be confused with the pointer-events CSS property.

Pointer lock

Provides access to raw mouse movement by locking the target of mouse events to a single element and hiding the mouse cursor.

Preloading responsive images

The imagesrcset and imagesizes attributes with the rel="preload" attribute for the <link> HTML element starts fetching responsive images before they're found in the body of the document.

Presentation API

The Presentation API shows or controls content on another display, such as a network-connected TV or projector.

Print events

An alternative to @media print queries, the beforeprint and afterprint events allow you to change the page for printing and restore the page after printing.

Private click measurement

The attributionsourceid and attributiondestination attributes for <a> elements measure clicks across websites without associating a click to a specific session. Not to be confused with attribution reporting. Also known as PCM.

Profiler

The Profiler API records data about the execution of a page, which you can send to a server for later analysis. Also known as self-profiling.

Protected audience

The protected audience API facilitates advertisement sales by allowing sites to register users as part of an interest group or to choose which ads appear based on those interest groups, while minimizing the ability of advertisers to track specific members of the interest group. Also known as FLEDGE.

Protocol handlers

The protocol_handlers web app manifest member registers an installed web app as a handler for a specific protocol. When a user follows a link with the specified protocol, the installed app opens the link.

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.

Raw camera access for WebXR

The XRView.camera property provides direct access to pose-synchronized camera images within a WebXR session.

Read unsanitized clipboard data

The optional formats.unsanitized parameter of the navigator.clipboard.read() method reads unsanitized text/html data from the system clipboard.

ReadableStream.from()

The ReadableStream.from() static method converts an iterable or async iterable object, such as an array or async generator function, into a readable stream.

Reference target

The referenceTarget property of a ShadowRoot object forwards attributes such as for and aria-labelledby to elements inside a shadow DOM. You can use this to, for example, link a <label> to its <input> even if the <input> is in the shadow DOM of a web component.

Reference types (WebAssembly)

The externref type can be both a value type and a table element type, while funcref can be a value type.

Referrer policy

The Referrer-Policy HTTP header and referrerpolicy HTML attributes control whether requests have the Referer header and what information the header contains.

Region capture

When using navigator.mediaDevices.getDisplayMedia() to capture a browser tab as a video stream, the region capture API allows you to crop the video to the bounding box of a given element. In contrast to the element capture API, any content that overlays that element is also captured.

Related apps

The related_applications web app manifest member lists operating system-specific applications that are related to the current web app, such as an Android app that provides similar functionality. The getInstalledRelatedApps() method lists which of those are installed on the current device.

Related website sets

Related website sets declares relationships between sites so the browser allows cookie and storage access between them through methods such as document.requestStorageAccessFor().

Relaxed-width SIMD (WebAssembly)

Relaxed SIMD (Single Instruction Multiple Data) introduces local non-determinism, where the results of the instructions may vary based on hardware support.

Remote playback

The Remote Playback API initiates and controls playback of media on connected remote devices, such as smart TVs with AirPlay or Chromecast capabilities.

Resize observer

The ResizeObserver API observes and reacts to changes in the size of DOM elements.

Resource size

The decodedBodySize, encodedBodySize, and transferSize properties of the PerformanceResourceTiming API reports the size of resources loaded.

Resource timing

PerformanceResourceTiming entries report when network events happen while loading a resource, such as when connections start and end. You can use this information to measure loading times.

Responsive iframes

The frame-sizing CSS property sets the size of an <iframe> element to that of it contents, to avoid scrolling in the iframe. Embedded documents allow this with the <meta name="responsive-embedded-sizing"> element and request resizing in the embedding page by calling window.requestResize().

SMIL SVG animations

The <animate>, <animateMotion>, and <animateTransform> SVG elements declaratively animate SVG elements. Also known as SMIL.

SVG

The SVG image format, represented by the <svg> element, creates two-dimensional vector graphics with declarative or scripted interaction and animation.

SVG 1.1

The SVG 1.1 image format has several components that were excluded from SVG 2, such as fonts, alternate glyphs, and the xlink namespace.

SVG clipboard items

The image/svg+xml data type (also known as the MIME type) for ClipboardItem objects represents SVG data written to or read from the clipboard.

SVG filters

The <filter> SVG element applies custom effects such as color manipulation, blurring, or morphing to SVG elements.

Sandboxed iframes

The sandbox attribute for the <iframe> HTML element sets many security restrictions on the iframe, such as preventing form submissions or opening modal dialogs. Optional allow- values relax specific restrictions.

Sanitizer API

The Document.parseHTML() static method and the setHTML() method of Element and ShadowRoot objects parse and insert HTML into the DOM in a way that can prevent cross-site scripting attacks. The Sanitizer API can customize the sanitization process.

Save-Data

Browsers send the Save-Data HTTP request header when the user turns on a data-saving mode. It is a hint to reduce data sent to the browser. Servers should respond with alternative content, such as smaller images and videos, or different markup and styling.

Scheduler API

The scheduler API provides a way to prioritize all tasks belonging to an application.

Scoped custom element registries

The CustomElementRegistry() constructor creates a new custom element registry that's separate from the global window.customElements registry. Creating more than one registry is useful for multiple custom elements that have the same tag name to coexist.

Screen

The window.screen property contains information about the screen of the output device that the referenced window is being rendered on.

Screen capture

The navigator.mediaDevices.getDisplayMedia() method asks the user to choose a screen or portion of a screen (such as a window) to capture as a media stream.

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.

Screen orientation lock

The screen.orientation.lock() method prevents changes to the screen orientation, typically in fullscreen applications such as games. For example, while locked, rotating a phone to the side won't change the screen orientation from landscape to portrait.

Scroll method promises

The scroll(), scrollBy(), scrollTo(), and scrollIntoView() methods on the Element and Window interfaces return Promises that resolve when scrolling completes.

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().

Scroll snap events

The scrollsnapchanging and scrollsnapchange events fire when a scroll gesture changes the selected scroll snap target.

Scroll-driven animations

The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.

Secure payment confirmation

The payment extension of a web authentication credential allows a relying party (such as a bank) to create a credential that can be queried by any merchant origin as part of an online checkout that uses the Payment Request API's secure-payment-confirmation payment method. Also known as SPC.

Selection

The Selection API controls and modifies user text selections within the page.

Serializable errors

The DOMException, Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, and URIError objects are serializable. You can call structuredClone() on an error object or pass it to a worker using postMessage().

Server timing

The serverTiming property of the PerformanceResourceTiming API contains server timing information about network requests.

Server-sent events

The EventSource API creates a connection to a server and listens to a stream of events sent by the server.

Service workers

The service worker of a website is a script that runs in its own thread and which acts as local proxy that intercepts network requests from the website. Use a service worker to implement advanced caching strategies, offline support, background tasks, or push notification support on your website.

Service workers static routing

The service worker install event's addRoutes method declares resource paths that should either be fetched from the network or the cache, to bypass the service worker and improve performance.

Shadow DOM

Shadow DOM allows you to attach encapsulated "shadow" DOM trees to elements. A shadow DOM tree is a separate component, isolated from the scripts and styles in other parts of the document. This is a part of Web Components.

Shadow parts

The part and exportparts HTML attributes expose elements of a shadow DOM as named parts, which can be selected by the ::part() CSS pseudo-element for styling.

Share targets

The share_target web app manifest member registers an installed web app as a handler for shared content. When a user shares content by using the device share dialog, the installed app can be listed as an option for handling the shared content.

Shared storage

The sharedStorage API stores data to a shared space where the data can then be processed without the ability to track users across the different sites they visit. A common use case is measuring the reach of third-party ads without using user-tracking cookies.

Shared storage locks

The withLock option to set(), append(), delete(), clear(), and batchUpdate() methods of the sharedStorage API prevents duplicate reporting from cross-site race conditions.

SharedArrayBuffer in WebGL

SharedArrayBuffer objects can be used in WebGL APIs that previously only worked with ArrayBuffer objects.

Sign extension operators (WebAssembly)

Sign-extension operator instructions extend the width of 8-bit, 16-bit, and 32-bit values to 32-bit and 64-bit values.

Soft navigation performance entries

The soft-navigation performance entry, which returns a PerformanceSoftNavigation instance, is emitted when soft navigation occurs in a single page app. This is defined as when a trusted user interaction causes a URL update and a visible contentful paint to the screen.

Speculation rules

Speculation rules are hints to the browser to proactively download pages in the background so they appear instantly when the user navigates to them.

Speech recognition

The SpeechRecognition API converts audio into text using the device's speech recognition service.

Speech recognition grammar

The SpeechRecognition.grammars property of the Web Speech API represents a set of words or patterns of words that the recognition service should recognize, used for when the recognition service's accuracy is low.

Speech synthesis

The SpeechSynthesis API converts text to speech with artificial voices.

Storage access

The document.requestStorageAccess() method allows content in iframes to request storing and reading cookies and other site data, while the document.hasStorageAccess() method checks if such access is granted.

Storage buckets

The navigator.storageBuckets API allows you to organize locally stored data into groups called storage buckets. Each bucket can have different settings, allowing the browser to manage and delete buckets independently rather than applying the same treatment to all.

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.

Streams

The streams API creates, composes, and consumes continuously generated data.

String builtins (WebAssembly)

The WebAssembly builtin string functions mirror a subset of the JavaScript String API and adapt it to be efficiently callable without JavaScript glue code.

Subresource integrity

Subresource integrity verifies that a resource, such as script served from a content delivery network, matches a known cryptographic hash. Also known as SRI.

Summarizer

The Summarizer API uses an on-device language model to summarize text.

Text encoding and decoding

The TextEncoder API transforms a stream of code points into a byte stream with UTF-8 encoding, and TextDecoder does the reverse.

Text tracks

The <track> element is used as a child of the media elements that lets you specify a timed text track to be displayed in parallel with the media element.

Threads and atomics (WebAssembly)

Threads in WebAssembly run code in parallel, while atomic memory instructions can guarantee that no two threads can read or write to shared memory at the same time.

Topics

The topics API reports a user's likely subject-matter interests (as determined by the browser, known as topics) to iframes. This allows for interest-based advertising that does not rely on user's exact browsing history, third-party cookies, or fingerprinting.

Touch events

Touch events touchstart, touchmove, touchend, and touchcancel fire when users interact with a touch-sensitive surface, such as a screen or drawing tablet. These events are similar to mouse events.

Transferable streams

Streams are transferable objects, which can be moved between contexts such as windows and workers.

TransformStream transformer cancel() method

The cancel() method of a TransformStream transformer cleans up resources when the readable side cancels or the writable side aborts.

Transitions (CSS)

The transition shorthand CSS property sets how changes to an element's styles may occur over time. Transitions can be applied to specific CSS properties, all properties, or none.

Translator

The Translator API translates some text from one natural language to another, using machine translation.

URL

A URL object represents a web address, like https://example.com/, and parts of the address, such as the domain, path, and query string (as URLSearchParams).

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.

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.

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.

User agent client hints

The Sec-CH-UA HTTP request header and the navigator.userAgentData API expose browser and platform information used to vary responses and application logic. User agent client hints are similar to user agent strings but more privacy-preserving and safer to parse.

User agent sniffing

The navigator.userAgent property and several others loosely identify a browser. Selectively showing content based on the user agent string, also known as user agent sniffing, is unreliable. Consider using feature detection or user agent client hints instead.

Vibration

The navigator.vibrate() method makes a tactile alert, if the device is equipped with a haptic motor.

Viewport segments

The viewport segment CSS environment variables and media features, and the viewport.segments API, allow you to adapt your layout to devices where the display is split, such as on foldable devices.

Virtual keyboard

The navigator.virtualKeyboard API inspects and controls on-screen virtual keyboards. You can use it to programmatically hide or show a virtual keyboard or respond to the keyboard disappearing or appearing.

Visual viewport API

The visualViewport API provides a way to query and modify the user-visible viewport of a web page.

WEBGL_color_buffer_float WebGL extension

The WEBGL_color_buffer_float extension for WebGL 1.0 contexts adds the 32-bit floating-point type RGBA32F as a color-renderable format.

WEBGL_compressed_texture_astc WebGL extension

The WEBGL_compressed_texture_astc extension for WebGL 1.0 and 2.0 contexts adds the Adaptive Scalable Texture Compression format to compressedTexImage2D() and compressedTexSubImage2D().

WEBGL_compressed_texture_etc WebGL extension

The WEBGL_compressed_texture_etc extension for WebGL 1.0 and 2.0 contexts adds many ETC2 and EAC compressed texture formats to compressedTexImage2D() and compressedTexSubImage2D().

WEBGL_compressed_texture_etc1 WebGL extension

The WEBGL_compressed_texture_etc1 extension for WebGL 1.0 and 2.0 contexts adds the ETC1 compressed texture format to compressedTexImage2D() and compressedTexSubImage2D().

WEBGL_compressed_texture_pvrtc WebGL extension

The WEBGL_compressed_texture_pvrtc extension for WebGL 1.0 and 2.0 contexts adds PVRTC compressed texture formats to compressedTexImage2D() and compressedTexSubImage2D().

WEBGL_compressed_texture_s3tc WebGL extension

The WEBGL_compressed_texture_s3tc extension for WebGL 1.0 and 2.0 contexts adds S3TC compressed texture formats to compressedTexImage2D() and compressedTexSubImage2D().

WEBGL_compressed_texture_s3tc_srgb WebGL extension

The WEBGL_compressed_texture_s3tc_srgb extension for WebGL 1.0 and 2.0 contexts adds S3TC compressed texture formats for the sRGB colorspace to compressedTexImage2D() and compressedTexSubImage2D().

WEBGL_debug_renderer_info WebGL extension

The WEBGL_debug_renderer_info extension for WebGL 1.0 and 2.0 contexts exposes information about the graphics driver for debugging purposes.

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.

WEBGL_depth_texture WebGL extension

The WEBGL_depth_texture extension for WebGL 1.0 contexts defines 2D depth and depth-stencil textures.

WEBGL_draw_buffers WebGL extension

The WEBGL_draw_buffers extension for WebGL 1.0 contexts enables a fragment shader to write to several textures, which is useful for deferred shading, for example.

WEBGL_lose_context WebGL extension

The WEBGL_lose_context extension for WebGL 1.0 and 2.0 contexts simulates losing and restoring a WebGLRenderingContext or WebGL2RenderingContext.

WEBGL_multi_draw WebGL extension

The WEBGL_multi_draw extension for WebGL 1.0 and 2.0 contexts renders more than one primitive with a single function call.

Web Audio

The Web Audio API creates graphs of audio nodes that handle sound inputs, synthesize sounds, apply effects, create visualizations, and output to audio devices.

Web Bluetooth

The Web Bluetooth API enables selecting and communicating with nearby Bluetooth devices.

Web Cryptography

The Web Cryptography API performs low-level cryptographic operations, such as encryption, decryption, and signature verification. Also known as the Web Crypto API.

Web MIDI

The Web MIDI API enables selecting MIDI input and output devices and sending and receiving MIDI messages.

Web NFC

The NDEFReader API reads and writes messages to near-field communication (NFC) tags.

Web animations

The web animation API programmatically creates, inspects, and controls element animations, to change and synchronize appearance over time.

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.

Web app manifest localization

The _localized suffixed members of the web app manifest set translated names, descriptions, icons, and shortcuts. The browser automatically selects resources based on the user's language and region settings.

Web app origin migration

The migrate_to and migrate_from web app manifest members move an installed app from one origin to another, within the same site. They preserve the user's installation settings on the device, like shortcuts.

Web authentication

The web authentication API allows you to create public key-based credentials and use them for authentication, such as when signing in. Also known as WebAuthn.

Web authentication easy public key access

The getAuthenticatorData(), getPublicKey(), and getPublicKeyAlgorithm() methods of AuthenticatorAttestationResponse access credential data inside attestationObject without the need to parse it.

Web authentication signal methods

The signalUnknownCredential(), signalAllAcceptedCredentials(), and signalCurrentUserDetails() methods of PublicKeyCredential inform authenticators of the state of public key credentials, so that incorrect or revoked credentials may be updated, removed, or hidden.

Web serial

The navigator.serial API communicates with devices over serial ports, such as microcontrollers.

WebAssembly

The WebAssembly.instantiate() and WebAssembly.instantiateStreaming() global static methods load WebAssembly code (also known as Wasm), a portable binary instruction format.

WebCodecs

The WebCodecs API provides low-level access to individual video frames and chunks of audio samples, for full control over the way media is processed.

WebDriver

The WebDriver protocol allows out-of-process programs to inspect and control browsers to, for example, run tests of web applications. Also known as WebDriver classic.

WebDriver BiDi

WebDriver BiDi is a bidirectional protocol that allows a WebDriver client and a browser to communicate with each other.

WebGL

The WebGLRenderingContext API is the "webgl" rendering context for the <canvas> element. It represents a space for drawing two- and three-dimensional graphics and animations.

WebGL2

The WebGL2RenderingContext API is the "webgl2" rendering context for the <canvas> element. It represents a space for drawing two- and three-dimensional graphics and animations. It corresponds to OpenGL ES 3.0.

WebGPU

The navigator.gpu API performs operations such as rendering and computation on dedicated graphics hardware (also known as a Graphics Processing Unit).

WebGPU subgroups

The subgroups extension for the WebGPU Shading Language (WGSL) enables SIMD parallelism. Using subgroups, threads in a workgroup can efficiently communicate and perform collective operations.

WebHID

The WebHID API provides access to Human Interface Devices (HID) that are connected to the user's device.

WebNN

The WebNN API constructs and executes computational graphs of neural networks by making use of the various machine learning capabilities and hardware accelerators available on the device. Also known as Web Neural Network API.

WebOTP

The OTPCredential API represents a one-time-password (OTP).

WebRTC

The WebRTC API establishes real-time communication channels directly between browsers. It is commonly used in video conferencing applications.

WebRTC SCTP information

The sctp object on RTCPeerConnection represents the negotiated SCTP transport. SCTP (Stream Control Transmission Protocol) is the protocol that RTCDataChannel uses.

WebRTC statistics

The RTCPeerConnection.getStats(), RTCRtpSender.getStats(), and RTCRtpReceiver.getStats() methods return detailed information about the status, performance, network, and media for a given WebRTC connection.

WebSockets

The WebSocket API opens a two-way communication channel between the user's browser and a server.

WebUSB

The WebUSB API exposes USB compatible devices to web pages.

WebVR

The navigator.getVRDisplays() API represents virtual reality (VR) devices, including sensors and head-mounted displays.

WebVTT

WebVTT is a captions and subtitles format. WebVTT files are loaded using the <track> element, and the VTTCue API can be used to create or update cues dynamically.

WebVTT cue alignment

The WebVTT cue alignment settings control which part of the cue is aligned with the given line and position. Cue alignment is set using line and position settings in WebVTT files or the lineAlign and positionAlign properties of VTTCue using JavaScript.

WebVTT cue settings

The VTTCue API updates various aspects of cues dynamically, such as alignment, size and position.

WebVTT regions

WebVTT regions set the areas of the video where captions or subtitles should be rendered, such as placing roll-up captions used for live captions.

WebXR

The navigator.xr API represents the browser's virtual reality or augmented reality system. You can use to request a WebXR session.

Wheel events

The wheel event fires when the user moves a mouse wheel or similar spatially rotating input device.

Window

The window global object represents a browser tab or iframe and its relationship to the document and other tabs. It's also a generic global object, under which many other APIs are located.

Window Controls Overlay

The display_override: ["window-controls-overlay"] web application manifest member shows content in the title bar area of a progressive web app that is installed on a desktop device.

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().

XMLHttpRequest

The XMLHttpRequest API makes HTTP requests. It's the predecessor to fetch(). Also known as XHR.

XMLSerializer

The XMLSerializer API provides the serializeToString() method to construct an XML string representing a DOM tree.

XPath

The document.evaluate() method selects elements in an HTML or XML document based on an expression of XPath, a domain specific language for querying XML documents. Also known as XML Path Language.

XSLT

The XSLTProcessor API transforms XML documents into new XML or HTML documents, using XSLT stylesheets. You can use XSLT to convert data between different XML schemas or to convert XML data into web pages or PDF documents. Also known as Extensible Stylesheet Language Transformations.

accesskey

The accesskey global HTML attribute gives a hint for generating a keyboard shortcut for the current element. The attribute value must consist of a single printable character.

alpha and colorspace attributes for <input type=color>

The ability to control the opacity of a color picked using <input type="color"> and determine the colorspace of the selected color.

ariaNotify()

The ariaNotify() method of Element and Document requests assistive technology software, if activated, to announce a message to the user. This can help make dynamic content changes more accessible to users.

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.

autocorrect

The autocorrect global HTML attribute controls whether to automatically correct spelling or punctuation errors for user input.

autofocus

The autofocus HTML attribute gives focus to an element on page load.

beforeinstallprompt

The beforeinstallprompt event fires when a Progressive Web App (PWA) is installable. You can cancel the event and later call event.prompt() to control when the installation prompt is shown. The appinstalled event fires when the PWA is successfully installed.

beforeunload

The beforeunload event is fired when the current window is about to be unloaded. Typically this is used to display a dialog to confirm if users really want to leave the page when there is unsaved data that would be lost.

captureStream() for <audio> and <video>

The captureStream() method for <audio> and <video> elements returns a MediaStream for the media element's content. You can use this to record media or send it elsewhere, such as a canvas or WebRTC connection.

captureStream() for <canvas>

The captureStream() method for <canvas> elements returns a MediaStream which includes a CanvasCaptureMediaStreamTrack representing real-time video of the canvas image. You can use this to record the canvas, or send it elsewhere, such as another canvas or WebRTC connection.

clip-path

The clip-path CSS property and SVG attribute set the visible area of an element. Everything outside the area will be hidden.

clipboardchange

The clipboardchange event for navigator.clipboard fires when the user modifies the clipboard's contents.

color-gamut media query

The color-gamut media query sets styles based on the colors a device can display.

contenteditable

The contenteditable global HTML attribute allows the user to edit the content of an element, such as inserting or deleting text.

contextlost and contextrestored

The contextlost event for <canvas> fires when the canvas backing storage is lost, while the contextrestored event fires when it is recreated.

controlslist

The controlslist attribute for <audio> or <video> hides parts of the browser's built-in controls. For example, controlslist="nofullscreen" removes the button to play the video in fullscreen.

createImageBitmap

The createImageBitmap() global method creates an ImageBitmap object from a source such as an image, SVG, blob, or canvas. An ImageBitmap object represents pixel data that can be drawn to a canvas with lower latency than other types, such as ImageData.

devicePixelRatio

The window.devicePixelRatio property is the ratio of the size of one CSS pixel to the vertical size of one physical pixel on the current display device.

dirname

The dirname attribute of <textarea> and <input> HTML elements includes the field's writing direction as form data on submission.

display-mode media query

The display-mode CSS media query sets styles based on whether the web page is in an ordinary browser tab mode or another mode, such as fullscreen, standalone, or minimal-ui.

document.elementFromPoint() and document.elementsFromPoint()

The document.elementFromPoint() and document.elementsFromPoint() methods find the top-most element at a given point in the viewport, or all elements at a given point in the viewport, respectively.

document.modelContext

The document.modelContext API registers page actions that can be called by in-browser AI agents or browser extensions. Also known as WebMCP.

document.write()

The document.open(), document.write(), document.writeln(), and document.close() methods write content to a document, possibly while that document is still loading.

download

The download attribute for <a> elements loads the target URL as a file to be saved, instead of navigating to it. An optional attribute value sets a default file name.

dynamic-range media query

The dynamic-range CSS media query sets styles based on whether a device can display at least standard range colors or at least high range colors. Non-visual devices will match neither.

enterkeyhint

The enterkeyhint global HTML attribute sets the label for a virtual keyboard's Enter key. For example, enterkeyhint="search" may label the key with a magnifying glass icon.

execCommand()

The execCommand() method reads and writes from the clipboard and performs editing commands on editable text, such as changing the font name or style. Related methods check whether commands are supported, enabled, or applied.

fastSeek()

The fastSeek() method seeks an <audio> or <video> element as fast as possible, by seeking to a keyframe instead of exactly the requested time.

fetchLater

The fetchLater() method requests a deferred fetch sent at an unknown time. The browser chooses a reliable time to send the request, ideally when the document is unloaded, and ignores the response. This API is useful for sending beacons to a server without expecting a particular response.

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.

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.

font-width

The font-width CSS property selects a font face from a font family based on width, either by a keyword such as condensed or a percentage.

getBoxQuads()

The getBoxQuads() method, when called on a document, element, pseudo-element, or text node, returns the list of DOMQuad objects that represent the CSS boxes used to render the node.

hardwareConcurrency

The navigator.hardwareConcurrency property is the number of logical processors available to run threads on the user's computer.

hashchange

The hashchange event fires when the URL fragment identifier (the part of the URL starting with #) of the current page has changed.

input (event)

The input event fires when a form control changes or an element with the contenteditable attribute changes.

inputmode

The inputmode global HTML attribute gives a hint about what type of data is to be entered into an <input> element, such as text, numeric, or email, so the browser may help the user enter data using an adapted input mechanism, such as an on-screen virtual keyboard.

inverted-colors media query

The inverted-colors CSS media query sets styles based on whether the user has inverted all colors, such as with mobile accessibility settings.

isInputPending()

The navigator.scheduling.isInputPending() method checks if there are pending input events, such as touch or mouse events. This allows you to yield from long-running scripts that might be blocking user interaction.

isSecureContext

The isSecureContext global property is a boolean for whether the current browsing context is secure. This is primarily a check that the page has been served over an HTTPS URL.

iterationComposite

The iterationComposite property of a KeyframeEffect object sets whether an animation's iterations are calculated independently ("replace") or are accumulated with the value of the previous iteration ("accumulate").

lang

The lang global HTML attribute defines the language of an element. It's used by assistive technology to correctly read the content, translation tools to select the origin language, and other applications.

localStorage and sessionStorage

The localStorage and sessionStorage APIs store data as key-value pairs. While localStorage persists across sessions, sessionStorage data is discarded when the page is closed.

matchMedia

The window.matchMedia() method checks whether a media query applies to the document.

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.

moveBefore()

The moveBefore() DOM method relocates a node while preserving its state. For example, you can move the active element without losing focus, move an animated element without resetting the animation, or move an iframe without reloading its content.

navigator.install()

The navigator.install() method triggers a request to install a progressive web app.

navigator.share()

The navigator.share() method invokes the device's native sharing mechanism and passes text, links, files, and other content to share targets. Also known as the Web Share API.

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.

ping

The ping attribute for <a> elements sets a URL to send a POST request to when the <a> is clicked. This is typically used for outbound link reporting.

postMessage

The postMessage() global method sends cross-origin messages to windows and workers, including popups and iframes. Also known as cross-document messaging.

prefers-color-scheme media query

The prefers-color-scheme CSS media query sets styles based on the requested color scheme, light or dark.

prefers-contrast media query

The prefers-contrast CSS media query sets styles based on whether the user prefers more or less contrast, the difference between foreground and background colors.

prefers-reduced-data media query

The prefers-reduced-data CSS media query detects whether the user has a preference for using less network traffic. For example, you can use this media query to avoid loading large font files and use a system font instead.

prefers-reduced-motion media query

The prefers-reduced-motion CSS media query sets styles based on whether the user prefers to minimize the amount of non-essential animations on the device, such as scrolling, panning, zooming, and strobing.

prefers-reduced-transparency media query

The prefers-reduced-transparency CSS media query sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and legibility.

preservesPitch

The preservesPitch property for <audio> or <video> adjusts the pitch of audio to sound more natural when the playback rate is faster or slower than the default.

queueMicrotask()

The queueMicrotask() method schedules a function to run after the currently running synchronous JavaScript finishes but before returning to the event loop.

registerProtocolHandler

The navigator.registerProtocolHandler() method declares a site's ability to handle an address scheme (also known as a protocol). For example, an email site can register to open mailto: URLs or a VoIP site to open tel: URLs.

requestAnimationFrame()

The requestAnimationFrame() method schedules a function that runs before the next repaint. You can use it to animate content with JavaScript.

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.

requestIdleCallback()

The requestIdleCallback() API queues a function that runs in idle browser time, either at the end of a frame or when the user is inactive. Also known as the background tasks API.

resolution media query

The resolution CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel.

resolution media query (compatibility prefixes)

The -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, and -webkit-max-device-pixel-ratio CSS media queries are standardized compatibility alternatives to resolution media queries.

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.

scrollIntoView()

The scrollIntoView() method scrolls an element's ancestor containers such that the element is visible to the user.

scrollIntoView() container

The container option of the scrollIntoView() method sets which ancestor scroll container to scroll. The "nearest" value scrolls only the nearest ancestor, instead of the default "all".

setInterval

The setInterval() global function repeatedly executes provided code on a given delay, and the accompanying clearInterval() cancels the interval.

setTimeout()

The setTimeout() global function executes provided code after a given duration of time, and the accompanying clearTimeout() cancels the timer.

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.

showPicker() for <select>

The showPicker() method for <select> elements shows the dropdown menu or other user interface for picking one of the options.

spellcheck

The spellcheck global HTML attribute sets whether the browser may check an element for spelling errors.

srcdoc

The srcdoc attribute for the <iframe> HTML element sets a string of HTML to embed in the document. The value of srcdoc overrides loading a document from the src attribute.

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.

title (attribute)

The title global HTML attribute sets information about an element, such as a name or description. The value is typically shown as a tooltip that appears on mouse over. Since it's not often available to touch-only, keyboard-only, or assistive technology users, it's not a substitute for other text.

translate

The translate HTML attribute marks whether an element's text should be translated.

video-dynamic-range media query

The video-dynamic-range CSS media query sets styles based on whether a device can display video with at least standard range colors or at least high range colors. Non-visual devices will match neither.

window.external

The window.external.AddSearchProvider() and window.external.IsSearchProviderInstalled() do nothing. Historically, they added external search providers to the browser.

window.print()

The window.print() method opens the browser's print dialog.

writingsuggestions

The writingsuggestions HTML attribute turns on or off a browser's writing suggestions. Writing suggestions vary by browser. For example, if turned on then a browser might show inline text completions accepted by pressing Tab.

2D transforms

The transform CSS property and its 2D transform functions allow rotating, scaling, skewing, and translating an element. Arbitrary 2D transforms are also possible using a transformation matrix.

3D transforms

The transform CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms.

::backdrop

The ::backdrop CSS pseudo-element is a box underneath an element in the top layer, such as a <dialog>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.

::before and ::after

The ::before and ::after CSS pseudo-elements select inline boxes preceding and following an element. They are often used with the content property to generate cosmetic content.

::column

The ::column CSS pseudo-element represents the individual columns of a multi-column layout container. Columns can only be styled with scroll snap CSS properties and can also have a ::scroll-marker pseudo-element, which scrolls to the column when activated.

::file-selector-button

The ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.

::first-letter

The ::first-letter CSS pseudo-element selects the first letter in an element for styling.

::first-line

The ::first-line CSS pseudo-element selects the first line of text in an element for styling.

::marker

The ::marker CSS pseudo-element selects list item markers for styling numbers or bullets.

::placeholder

The ::placeholder CSS pseudo-element selects help text in <input> and <textarea> elements when no value is set.

::scroll-button

The ::scroll-button(<dir>) CSS pseudo-element is a focusable button which scrolls its originating scroll container element in the specified direction.

::selection

The ::selection CSS pseudo-element selects text a user has highlighted.

::spelling-error and ::grammar-error

The ::spelling-error and ::grammar-error CSS pseudo-elements match text that is highlighted as misspelled and grammatically incorrect, respectively.

:autofill

The :autofill pseudo-class matches <input> elements that have been filled in automatically by the browser.

:default

The :default CSS pseudo-class matches the default element in a group of related form controls, such as checkboxes and radio buttons with the checked attribute.

:dir()

The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).

:empty

The :empty CSS pseudo-class matches elements without child elements.

: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.

:focus-within

The :focus-within CSS pseudo-class matches an element if the element or any of its children are focused.

:has()

The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.

:has-slotted

The :has-slotted CSS pseudo-class matches <slot> elements where the fallback content is not shown. The pseudo-class matches any slotted content, including white space, text nodes, or elements.

:host-context()

The :host-context() CSS pseudo-class selects the containing element of the shadow tree in which it is used if that element or an ancestor matches the provided selector.

:indeterminate

The :indeterminate CSS pseudo-class selects any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, or radio buttons which are members of a group in which all radio buttons are unchecked.

:is()

The :is() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list.

:lang()

The :lang() CSS functional pseudo-class matches elements based on their content language.

: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 with showModal().

:not()

The :not() functional pseudo-class matches elements that do not match the selectors in its argument.

:nth-child()

The :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements based on their index within a list of elements. The :first-child and :last-child pseudo-classes match the first and last element in a list, and the :only-child pseudo-class matches an element with no siblings.

: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.

:nth-of-type() pseudo-classes

The :nth-of-type() and :nth-last-of-type() CSS functional pseudo-classes match elements based on their position among siblings of the same type. The :first-of-type, :last-of-type, and :only-of-type pseudo-classes match the first, last, and only elements of its type.

:placeholder-shown

The :placeholder-shown CSS pseudo-element selects <input> and <textarea> elements when no value is set and the element's placeholder attribute is not empty. Not to be confused with ::placeholder, which selects the placeholder text itself.

:read-only and :read-write

The :read-only and :read-write CSS pseudo-classes match elements that are read-only or read-write, respectively. For example, :read-only matches <input> and <textarea> elements with the readonly attribute.

:root

The :root pseudo-class matches the root element of the document, usually the <html> element.

:scope (pseudo-class)

The :scope CSS pseudo-class matches the scoping root, for instance the element that querySelector() is called on, or the root of a DOM subtree specified with @scope.

:target

The :target CSS pseudo-class matches the element with an ID matching the URL fragment.

:user-valid and :user-invalid

The :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.

:where()

The :where() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list. It is functionally equivalent to the selectors in the list, but doesn't affect the CSS rule specificity.

@charset

The @charset CSS at-rule specifies the character encoding of an external style sheet.

@function

The @function CSS at-rule defines a custom function that takes CSS values or custom properties as arguments, and returns a CSS value. It can be based on conditional logic such as by using the @media at-rule.

@import

The @import CSS at-rule loads styles from another stylesheet.

@mixin

The @mixin and @apply CSS at-rules define reusable style declaration fragments and apply them inside rules, optionally passing arguments.

@namespace

The @namespace CSS rule sets a default namespace or namespace prefix. Namespace prefixes allow CSS selectors to distinguish elements with the same name but different document types, such as the HTML <a> element and the SVG <a> element.

@supports

The @supports at-rule applies styles based on a browser's support for CSS features, such as a CSS property and value. Also known as feature queries.

Absolute positioning

The position: absolute CSS declaration removes an element from the normal flow and positions it relative to its containing block, which is often the root element, or closest positioned ancestor.

Alternative style sheets

The rel="alternate stylesheet" attribute for the <link> HTML element offers an alternative style option to users.

Anchor position container queries

Anchor position container queries with the @container anchored(fallback: …) at-rule apply styles to an element based on the element's anchor position.

Anchor positioning animations and transitions

The anchor() and anchor-size() CSS functions animate or transition on changes such as the anchor box moving or the anchor element changing.

Anchor positioning transforms

Anchor positioned elements take CSS transforms on their anchor elements into account.

Animatable clipping paths

The clip-path property can be animated using CSS transitions and animations.

Border images

The border-image CSS property draws an image around an element.

Borders

The border CSS property sets the color, style, and width of the line around an element.

COLRv0

COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors.

COLRv1

COLRv1 is a font format that supports multi-color glyphs. COLRv1 extends COLRv0 to support gradients, transforms, and blending modes.

CSS object model

The CSS object model API reads, creates, and modifies CSS stylesheets and inline styles. Also known as CSSOM.

CSS object model (DOM level 2)

The DOM level 2 style specification defined interfaces to access and modify CSS styles, such as CSSValue and CSSPrimitiveValue, that were later excluded from the CSS object model.

CSS typed object model

The CSSStyleValue and its subclasses represent CSS values as distinct types instead of only strings. Also known as typed OM.

CSS.escape()

The CSS.escape() static method escapes a string so that it can be used in a valid CSS selector.

CSS.supports()

The CSS.supports() static method returns whether the browser supports a CSS declaration (given by two arguments, a property and value) or an @supports at-rule condition string.

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.

Case-insensitive attribute selector

The i identifier in a CSS attribute selector matches attribute values case-insensitively in document languages like XML where attribute values are case-sensitive.

Case-sensitive attribute selector

The s identifier in a CSS attribute selector matches attribute values case-sensitively in document languages like HTML where attribute values are case-insensitive.

Clip path boxes

The fill-box, stroke-box, and view-box values for clip-path set an edge of the element's box to use as the clipping shape.

Color

The color CSS property sets the primary foreground color of an element, which is used for text, the default border color, and text decorations.

Column breaks

In columnar layouts (created by the columns or column-count CSS properties), the break-after, break-before, break-inside properties control where columns start or end.

Conic gradients

The conic-gradient() and repeating-conic-gradient() CSS functions create backgrounds that progress between two or more colors around a center point.

Container scroll-state queries

Container scroll-state queries with the @container scroll-state(...) at-rule apply styles to an element based on the sticky positioning, snapped, and scrollable state of the container.

Content

The content CSS property sets the content inside of an element or pseudo-element, replacing the current value. It's often used with the ::before and ::after pseudo-elements to generate cosmetic content.

Counters (CSS)

The counter-reset and counter-increment CSS properties and the counter() and counters() functions automatically number headings or ordered list items.

Cursor styles

The cursor CSS property styles the pointer, allowing you to provide hints to the user on how to interact with the hovered element.

Custom ellipses

The text-overflow CSS property with a string value sets the string representing clipped text.

Custom properties

Custom properties are CSS properties prefixed with -- that set values you can reuse with the var() function. For example, you can set a --key-color property to reuse as border-color: var(--key-color). Also known as CSS variables.

Customizable <select>

The <select> element's appearance, including the button, selected option, picker dropdown, and options, can be customized using CSS.

Display

The display CSS property sets the display behavior of an element's box within its layout and sets the layout behavior for its child elements.

Exponential functions (CSS)

The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions.

Fixed positioning

The position: fixed CSS declaration removes an element from the normal flow and positions it relative to the viewport or page.

Flexbox

Flexbox is a one-dimensional layout system, which places content either horizontally or vertically, with optional wrapping.

Flexbox gap

The gap CSS property in a flexbox layout sets the size of the space between items.

Font shorthand

The font CSS property shorthand sets multiple font properties, including style, weight, size, and font family.

Forced colors

The forced-colors CSS @media rule detects when a user has chosen to use a forced colors mode, also known as high-contrast mode, and the forced-color-adjust CSS property sets whether forced colors apply to an element.

Form validity pseudo-classes

The form validity CSS pseudo-classes match <form> elements based on the constraints of a form field, such as validity (:valid, :invalid, :in-range, :out-of-range) and necessity (:optional or :required).

Gap decorations

The column-rule and row-rule CSS properties display decorative lines between columns and rows of a flex, grid, or multi-column layout. The rule-break, rule-outset, and rule-paint-order properties control the appearance of these lines.

Gradients

The linear-gradient() and radial-gradient() CSS functions and their repeating counterparts create backgrounds that progress smoothly between multiple colors.

Grid

CSS grid is a two-dimensional layout system, which lays content out in rows and columns.

Grid animation

Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.

HSL

The hsl() and hsla() CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels.

HWB

The hwb() CSS function picks colors using hue, whiteness, and blackness channels.

Hanging punctuation

The hanging-punctuation CSS property puts punctuation characters outside of the box to align the text with the rest of the document.

Heading pseudo-classes

The :heading and :heading() CSS pseudo-classes match headings of varying levels. The :heading pseudo-class matches any heading (<h1> through <h6>). The :heading() selector matches any of the given levels. For example, :heading(1, 2) matches headings level 1 and 2.

Host

The :host CSS pseudo-class selects the containing element of the shadow tree in which it is used. The :host() CSS pseudo-class selects the that element only if it matches the provided selector.

Hyphenate character

The hyphenate-character CSS property sets the character or string to use at the end of a line before a line break.

Hyphenate limit chars

The hyphenate-limit-chars CSS property sets the number of characters in a word before it is hyphenated and the minimum number of characters on either side of the hyphen.

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.

Individual transform properties

The translate, rotate, and scale CSS properties apply single transformations independently, as opposed to applying multiple transformations with the transform CSS property.

Inline-size containment

The contain: inline-size CSS declaration prevents the element's inline dimension from being set by the element's contents. This permits the browser to avoid slower layout calculations.

Input selectors

The :checked, :disabled, and :enabled CSS pseudo-classes match form elements based on their state.

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.

Layout containment

The contain: layout CSS declaration isolates the inside of an element such that it cannot affect the layout of the rest of the page or be affected by the rest of the page. This permits the browser to avoid slower layout calculations.

Layout direction override

The unicode-bidi and direction CSS properties override the Unicode layout algorithm. They are intended for Document Type Definition (DTD) designers. For HTML documents, you should use the dir global HTML attribute and <bdo> HTML element instead.

Link selectors

The :link CSS pseudo-class matches unvisited links, :visited matches visited links, and :any-link matches both.

List style

The list-style shorthand CSS property and the list-style-image, list-style-position, and list-style-type longhand properties set the position and appearance of a list item's marker.

Logical properties

CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, block-end refers to the bottom. Also known as flow relative.

Masks

The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.

Min and max width and height

The min-width, min-height, max-width, and max-height CSS properties set the minimum and maximum size of an element.

Motion path

The offset CSS property animates an element along a defined motion path.

Multi-column layout

Multi-column layout flows an element's content across one or more columns in a single row, without affecting the display property of its children.

Named colors

Some CSS color values can be referenced by name, such as red or limegreen. They stand in for specific RGB color values.

Nesting

CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others.

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).

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 oklab() and oklch() functions.

Opacity (SVG)

The fill-opacity, and stroke-opacity SVG attributes and CSS properties control the transparency of a stroke or fill of an SVG element.

Outlines

The outline-color, outline-style, and outline-width and outline-offset CSS properties style a line around an element, outside of the border.

Page break aliases

The page-break-before, page-break-inside, and page-break-after CSS properties are aliases to the break-before, break-inside, and break-after properties.

Page breaks

In printed page layouts, the break-after, break-before, break-inside CSS properties control where printed pages start and end. Also known as pagination or page breaking.

Page selectors

The :first, :left, and :right pseudo-classes select pages based on their position in sequence after pagination.

Paint containment

The contain: paint CSS declaration prevents an element's descendants from being drawn outside the boundaries of the containing element, with any overflow clipped. This permits the browser to avoid slower painting calculations.

Physical properties

The physical CSS properties, top, right, bottom, and left, set the inset position of an element relative to the corresponding side of a container determined by the element's position property.

Position

The position CSS property sets the origin position of an element to an element, the element's scrollport, or the viewport.

Q unit

The Q CSS length unit is an absolute length anchored to the physical measurement of quarter-millimeters. 1Q is equivalent to 1/40 of 1 centimeter.

Quotes

The quotes CSS property sets the quotation marks inserted via the content CSS property or <q> element.

RGB

The rgb(), rgba(), and hexadecimal (as in #004488ff) notations pick colors using red, green, blue, and alpha (transparency) channels.

Range syntax for style queries

The @container style() CSS at-rule and if(style()) CSS function queries accept a range syntax, such as >, <, >=, <=, to query for inexact values.

Relative positioning

The position: relative CSS declaration offsets the position of an element relative to its position in the normal flow.

Reversed counter-reset

The reversed() CSS function for counter-reset creates a counter that counts down.

Safe area inset environment variables

The safe-area-inset- CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, top:\ env(safe-area-inset-top); positions the top of an element below the notch on an iPhone.

Scroll marker target pseudo-classes

The :target-current CSS pseudo-class selects the active scroll marker (as in ::scroll-marker), while the :target-after and :target-before pseudo-classes select the inactive markers preceding and following the active scroll marker.

Scroll markers

A scroll marker scrolls a container to a scroll target. The ::scroll-marker CSS pseudo-element selects a scroll marker in a ::scroll-marker-group pseudo-element, generated before or after the scroll container. You can use them to navigate and style tables of contents, tab panels, and carousels.

Scroll snap

CSS scroll snap controls the panning and scrolling behavior within a scroll container.

Selectors (core)

CSS selectors match elements based on their type, attributes, and relationship to other elements. They define the specific elements to which a block of styles will be applied. This feature represents the oldest selectors of CSS.

Size containment

The contain: size CSS declaration sets an element's dimensions exclusively by its height and width properties, ignoring its contents and descendants. This permits the browser to avoid slower layout calculations.

Small, large, and dynamic viewport units

The sv*, lv*, and dv* 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.

Static positioning

The position: static CSS declaration positions an element in the normal flow. A statically positioned element ignores physical and logical properties such as top or inset-block-start.

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.

Style containment

The contain: style CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (counter-increment and counter-set) and quotation styles (content property quote values) beyond the element's descendants.

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.

System colors

The system color CSS keywords, such as ButtonBorder or LinkText, allow you to match default colors from the user agent.

System font

The font-family: system-ui CSS declaration uses the operating system default font for text.

Text overflow

The text-overflow CSS property sets how hidden overflow content appears to users. The property can clip content, truncate content with an ellipsis (…), or truncate with a custom string.

Text stroke and fill (compatibility prefixes)

The -webkit-text-stroke-width and -webkit-text-stroke-color CSS properties set the thickness and color of text outlines. The -webkit-text-fill-color sets the color within text character outlines. Both default to the text color.

Time-relative pseudo-selectors

The :past and :future CSS pseudo-classes match prior or upcoming text track cues during media playback.

Trigonometric functions (CSS)

The sin(), cos(), tan(), asin(), acos(), atan(), and atan2() CSS functions compute various trigonometric functions.

Two-value display property

The display CSS property accepts multiple keyword values, such as inline flex or block flow, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.

UI fonts

The ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for the font-family CSS property use device-default user interface fonts for text.

User action pseudo-classes

The :active, :focus, and :hover CSS pseudo-classes match elements based on how users are interacting with them.

Viewport units

The vw, vh, vmin, and vmax CSS viewport units are relative to the size of the viewport, and are used to size elements in relation to the viewport's dimensions.

Widows and orphans

The widows and orphans CSS properties set the minimum lines included in a text fragment created by page, column, or region breaks.

Width and height

The width and height CSS properties set the preferred physical size of an element.

accent-color

The accent-color CSS property sets a color for checkboxes, radio buttons, and other form controls.

alignment-baseline

The alignment-baseline CSS property sets which baseline of an element is aligned with the corresponding baseline of its parent.

all

The all CSS property is a shorthand for all CSS properties, except for direction and unicode-bidi. It accepts only the keywords for explicit defaulting (such as initial and inherit), since they are the only values supported on all CSS properties.

alpha()

The alpha() CSS function computes a relative color value by adjusting the opacity of an origin color.

anchors-valid and anchors-visible

The position-visibility: anchors-valid and position-visibility: anchors-visible CSS declarations are aliases for anchor-valid and anchor-visible.

animation-composition

The animation-composition CSS property chooses how to combine animations that affect the same property.

appearance

The appearance CSS property controls the appearance of form controls. Using appearance: none disables any default native appearance and allows the elements to be styled with CSS.

aspect-ratio

The aspect-ratio CSS property controls the width-to-height ratio of elements. For <img> and <video> elements, the width and height attributes used together with height: auto control the aspect ratio while the image/video is loading.

at-rule()

The at-rule() function, when used with @supports, checks if a CSS at-rule is supported. For example @supports at-rule(@starting-style) checks if the @starting-style at-rule is supported.

attr()

The attr() CSS function, in the context of any property, returns the value of an attribute of an HTML element, with the option to return it as a specific type or unit. You can set a default value for missing or invalid attributes.

attr() (content only)

The attr() CSS function, in content property declarations, sets a ::before or ::after pseudo-element's content to the value of the specified HTML attribute.

background

The background CSS property is a shorthand that sets several background properties at once.

background-attachment

The background-attachment CSS property sets whether an element's background image or gradient moves as the element scrolls.

background-blend-mode

The background-blend-mode CSS property blends an element's background image and background color using blend modes like multiply, difference, or color.

background-clip

The background-clip CSS property sets the extent of the background: the padding box, the content box, or the default border box.

background-clip: border-area

The background-clip: border-area CSS declaration draws the background underneath only the border of an element.

background-clip: text

The background-clip: text CSS declaration draws the background underneath only the text in the element.

background-color

The background-color CSS property sets the fill color of an element, behind any content and background images or gradients.

background-image

The background-image CSS property sets the graphics to display behind the content of an element and in front of the background color. Graphics may be any combination of images or gradients.

background-origin

The background-origin CSS property sets the background starting position relative to the border and padding of an element.

background-position

The background-position CSS property offsets the initial position of background images relative to the background origin.

background-repeat

The background-repeat CSS property sets how a background image is tiled.

background-size

The background-size CSS property scales or stretches a background based on the size of the element (with the contain and cover keywords), a length, or percentage.

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.

border-radius

The border-radius CSS property rounds the corners of the border drawn around an element.

border-shape

The border-shape CSS property sets the geometry of the border box, changing the shape of any applicable border, border image, focus outline, or shadow.

box-decoration-break

The box-decoration-break CSS property sets whether box decorations, such as borders or backgrounds, of an element divided across a page, column, or region wraps each fragment or splits across the break.

box-shadow

The box-shadow CSS property applies shadow effects around an element's frame. This can create drop shadow and inner shadow effects.

box-sizing

The box-sizing CSS property sets whether an element's width and height are calculated based on the content-box, which does not count the size of borders or padding, or border-box, which does count them.

calc()

The calc() CSS function computes mathematical expressions such a calc(100%/3 - 1em).

calc() keywords

The e, pi, infinity, and NaN keywords represent well-defined constants accepted in CSS math functions such as calc().

calc-size()

The calc-size() CSS function computes mathematical expressions that include height and width keyword values, for example calc-size(fit-content, size / 2). Not to be confused with the calc() CSS function, which cannot use keyword values.

cap unit

The cap CSS length unit corresponds to the height of Latin capital letters.

caret-color

The caret-color CSS property sets the color of the text insertion pointer in a text input.

caret-shape

The caret-shape CSS property sets the shape of the insertion caret, the symbol that shows where the next character is to be inserted or deleted.

ch unit

The ch CSS length unit is a font-relative length based on the width of the zero (0) character.

clip

The clip CSS property sets the visible area of an absolutely positioned element.

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-adjust

The color-adjust shorthand CSS property allows multiple performance related color adjustments to be set at once. Setting the print-color-adjust CSS property directly is preferred, as it is the only such adjustment so far defined.

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.

color-mix() with three or more colors

The color-mix() CSS function accepts three or more colors.

color-scheme

The color-scheme CSS property sets which color schemes (light or dark) an element uses and may prevent automatic dark mode adjustments by the browser.

column-fill

The column-fill CSS property sets the distribution of content across columns in a multi-column layout.

column-span

The column-span CSS property controls whether a child element extends across all columns of a multi-column parent.

contain

The contain CSS property sets limits to the scope of styles, layout, and paint rendering for speed and efficiency. The none keyword value disables containment, strict is equivalent to contain: size layout style paint, and content is equivalent to contain: layout style paint.

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.

corner-shape

The corner-shape CSS property sets the shape of an element's corners when using border-radius, allowing for shapes other than rounded corners. For example, corner-shape: squircle is a shape in between a square and rounded corner.

counter-set

The counter-set CSS property creates (and optionally sets a value for) a counter, the numbers for a series of headings or ordered list items.

cross-fade()

The cross-fade() CSS function generates an image by mixing two images.

cross-origin() for url()

The url() CSS function accepts a cross-origin() modifier to control cross-origin resource sharing (CORS) when requesting the URL. For example, url("https://example.com" cross-origin(anonymous))) does not send credentials to the URL.

cubic-bezier() easing

The cubic-bezier() CSS easing function interpolates along a smooth curve, creating animations and transitions with continuous changes in speed. The ease, ease-in, ease-out, and ease-in-out keyword values are presets for common Bézier curves.

currentColor

The currentColor CSS value allows you to reuse an element's computed text color for other properties.

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.

display: contents

The display: contents CSS declaration sets an element to display only its contents, not itself.

display: flow-root

The display: flow-root CSS declaration sets an element as the root element of a new flow layout for its children, preventing margin collapse with sibling elements.

display: list-item

The display: list-item CSS declaration renders an element with the box layout of a <li> HTML element.

display: ruby

The display: ruby CSS declaration renders an element with the box layout of a <ruby> HTML element. Child elements may use equivalents to <ruby> internal elements such as display: ruby-base for <rb>.

display: table

The display: table CSS declaration renders an element with the box layout of a <table> HTML element. Child elements may use equivalents to <table> internal elements such as display: table-row for <tr>.

dominant-baseline

The dominant-baseline CSS property sets the specific baseline used to align an elements's text and inline-level contents.

dynamic-range-limit

The dynamic-range-limit CSS property controls the peak luminance of high dynamic range content. You can use this to coordinate the apparent brightness of HDR and SDR content.

element()

The element() CSS function creates a live-updating image from an HTML element that can be used as an image or background image.

em unit

The em CSS length unit is a font-relative length equal to the specified font size. In an element with a 2 inch font, 1em equals 2 inches.

ex unit

The ex CSS length unit is a font-relative length equal to the used x-height of the first available font. X-height is often equal to the height of the lowercase x.

filter

The filter CSS property applies one or more graphic effects to an element. You can use filter functions, such as blur() and drop-shadow(), alone or combined to produce different effects. For instance, filter: blur(2px).

filter()

The filter() CSS function applies one or more graphic effects to a CSS image, such as a background image. You can use functions, such as blur() and drop-shadow(), alone or combined to produce different effects. For instance, background: filter(url(image.png), blur(2px)).

fit-content

The fit-content CSS keyword expands a box as needed to fit its contents until the maximum size is reached, preserving the content's preferred aspect ratio.

fit-content()

The fit-content() CSS function, used outside of a grid layout property, clamps a length between min-content and max-content.

flex-wrap: balance

The flex-wrap: balance CSS declaration distributes items in a multi-line flex container such that each line has about the same number of items.

float and clear

The float CSS property aligns an element to either side of its container, allowing text and inline elements to flow around it. The clear CSS property sets whether an element is moved below floating elements that proceed it.

font-display

The font-display CSS descriptor sets whether to show a substitute font or nothing while a font face loads. The property manages what's known as a flash of unstyled text or flash of invisible text.

font-family

The font-family CSS property sets the desired font face for text, along with optional fallback font faces.

font-feature-settings

The font-feature-settings CSS property sets low-level OpenType feature tags for a font. When possible, use font-variant instead.

font-kerning

The font-kerning CSS property sets whether kerning data from a font is used to adjust the space between letters.

font-language-override

The font-language-override CSS property sets which language-specific glyphs are displayed.

font-optical-sizing

The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.

font-palette animation

You can animate color fonts between two font-palette values.

font-size

The font-size CSS property sets the text height.

font-stretch

The font-stretch CSS property selects a font face from a font family based on width, either by a keyword such as condensed or a percentage.

font-style

The font-style CSS property sets the text style, with normal, italic, and oblique options.

font-synthesis

The font-synthesis CSS shorthand property disables all font synthesis except the given kinds. To disable a specific kind of font synthesis, instead use the longhand properties such as font-synthesis-style and font-synthesis-weight.

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.

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

The font-variant CSS property is a shorthand for font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-emoji, font-variant-ligatures, font-variant-numeric, and font-variant-position.

font-variant-caps

The font-variant-caps CSS property sets whether text should be displayed in small caps, petite caps, or with capital letters designed for titles.

font-variant-east-asian

The font-variant-east-asian CSS property controls glyph substitution and sizing in East Asian text.

font-variant-emoji

The font-variant-emoji CSS property sets the default presentation for emoji characters.

font-variant-ligatures

The font-variant-ligatures CSS property sets how characters can be visually combined for readability or stylistic reasons.

font-variant-numeric

The font-variant-numeric CSS property sets how numeric characters are displayed. For example, you can align columns of numbers or use zeroes that have a slash.

font-variant-position

The font-variant-position CSS property sets whether to use alternate glyphs for subscript and superscript text.

font-variation-settings

The font-variation-settings CSS property sets an "axis of variability" on a variable font, such as weight, optical size, or a custom axis defined by the typeface designer. When possible, use other CSS font properties, such as font-weight: bold. Also known as variable fonts.

font-weight

The font-weight CSS property controls the thickness of a font. It is set explicitly with the keyword bold or a number, or relative to the inherited thickness with the keywords bolder or lighter.

getComputedStyle()

The getComputedStyle() global method returns an CSSStyleDeclaration object that represents all CSS declarations applied to a given element.

glyph-orientation-vertical

The glyph-orientation-vertical CSS property sets the orientation of glyphs in text rendered in a vertical writing mode.

ic unit

The ic CSS length unit corresponds to the width of CJK ideographic characters.

if()

The if() CSS function is an inline conditional value that returns a value based on a set of conditions.

image-orientation

The image-orientation CSS property corrects the rotation of an image using the image's metadata, such as EXIF.

image-rendering

The image-rendering CSS property sets how images are scaled, retaining smoothness for photos, or hard edges for pixel art and QR codes.

image-rendering: smooth

The image-rendering: smooth CSS declaration scales images while retaining a gradual color blending that is useful for photos.

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.

ime-mode

The ime-mode CSS property sets the state of the input method editor for text fields.

inherit

The inherit keyword resets any CSS property to the computed value of that property from the parent element.

initial

The initial keyword resets any CSS property to its initial value as defined by the specification. For example, the initial value of the display property is inline, regardless of the element being styled. Not to be confused with revert, which resets to the user or browser default style.

initial-letter

The initial-letter CSS property sets the number of lines the first letter of an element occupies. You can use the property to make a raised capital or drop cap.

integrity() for url()

The url() CSS function accepts an integrity() modifier to use subresource integrity to verify the response from the requested URL.

interactivity

The interactivity: inert CSS declaration makes an element and its descendants inert, like when using the inert HTML attribute. Inert elements can't be focused or clicked, their text can't be selected or found using the browser's find-in-page feature.

interpolate-size

The interpolate-size CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to auto or fit-content.

isolation

The isolation CSS property creates a new stacking context, which impacts z-index ordering and blend modes.

justify-self in block layouts

The justify-self CSS property aligns an item along a container's inline axis in block layouts, like it does in grid layouts. Likewise, the justify-items property sets a default justify-self value for all items in a container in a block layout.

letter-spacing

The letter-spacing CSS property controls the amount of space between each letter in an element or block of text.

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.

light-dark() image values

The light-dark() CSS function accepts, in addition to colors, two <image> values, such as a gradient or URL, and uses one depending on the current color scheme.

line-break

The line-break CSS property sets how strictly to apply rules for wrapping text to new lines, especially for symbols and punctuation.

line-clamp

The line-clamp CSS property limits the text in a block container to a certain number of lines. The prefixed -webkit-line-clamp is widely supported but only works with -webkit-box-orient: vertical in combination with display: -webkit-box or display: -webkit-inline-box.

line-height

The line-height CSS property sets the spacing between text baselines, oriented to the horizontal or vertical writing mode.

linear() easing

The linear() easing function for animations and transitions interpolates linearly between the control points, and can be used to approximate complex easing functions, such as a bounce effect.

margin

The margin CSS property sets space around an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.

margin-trim

The margin-trim CSS property removes the margins of child elements when they meet the edges of the container.

mask-border

The mask-border CSS property sets how the edges of an element are masked. It is a shorthand for mask-border-outset, mask-border-repeat, mask-border-slice, mask-border-source, and mask-border-width.

mask-type

The mask-type CSS property on an SVG <mask> element sets whether the mask is a luminance or alpha mask.

min(), max(), and clamp()

The min() and max() CSS functions return the minimum or maximum of the arguments, while clamp() clamps a value to a given range.

min-content and max-content

The min-content and max-content CSS keywords represent the smallest and largest intrinsic sizes of an element.

mix-blend-mode

The mix-blend-mode CSS property blends an element's content with its background or parent elements using blend modes like multiply, difference, or color.

object-fit

The object-fit CSS property sets how images, videos, and other replaced elements are scaled within their container.

object-position

The object-position CSS property places images, videos, and other replaced elements within their boxes.

object-view-box

The object-view-box CSS property crops and zooms to an inset area of an image.

opacity

The opacity CSS property sets the transparency of an element.

outline

The outline CSS shorthand sets the color, style, and width of a line around an element, outside of the border.

overflow

The overflow CSS property sets the behavior for when content doesn't fit in an element.

overflow-anchor

The overflow-anchor CSS property sets an element as a possible scroll anchor, reducing unintended scrolling when document changes occur above the current scrollport. This is enabled by default where supported.

overflow-clip-margin

The overflow-clip-margin CSS property sets how far overflow content may appear outside the bounds of an element before it's clipped by effects such as overflow: clip.

overflow-wrap

The overflow-wrap CSS property breaks a line of text onto multiple lines inside the targeted element in an otherwise unbreakable place to prevent overflow. The legacy property is word-wrap.

overflow: clip

The overflow: clip CSS declaration clips an element's overflowing content to the box that's defined by the overflow-clip-margin property. Unlike overflow: hidden, it allows you to hide overflow on one axis while keeping overflow on the other axis visible.

overflow: overlay

The overflow: overlay CSS declaration is an alias to overflow: auto. Historically, it caused non-standard behavior, allowing scrollbars to overlay content without taking up layout space.

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.

overscroll-behavior

The overscroll-behavior CSS property disables default scrolling behaviors when the edges of a scrolling area are reached.

padding

The padding CSS property sets space between an element's edge and its contents. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.

page-orientation

The page-orientation CSS property sets the rotation of a page after pagination. This allows pages with the same size declaration to display with different orientations.

paint()

The paint() CSS function creates a custom image, drawn using a paint worklet, for an element's background or border.

path()

The path() CSS shape function creates a shape for clip-path, shape-outside, and the SVG attribute d.

pointer-events

The pointer-events CSS property sets whether a user can interact with an element using a mouse, touch, or other pointing input device.

progress()

The progress() CSS function returns a ratio for the relative position of one value between two other values, clamped between 0 and 1. You can use it to interpolate a value for other calculations.

random()

The random() CSS function chooses a random numeric value within a specified range. This allows for dynamic, randomized styling using CSS.

reading-flow

The reading-flow CSS property sets the order in which flex or grid elements are rendered to speech or reached via focus navigation. The reading-order property overrides this order.

rect() and xywh()

The rect() CSS function creates a rectangle shape with insets from the edges of an element. The xywh() CSS function creates a rectangle shifted by an x and y distance. They can be used with clip-path and shape-outside.

referrer-policy() for url()

The url() CSS function accepts a referrer-policy() modifier to choose which referrer to send when requesting the URL. For example, `url("https://example.com" referrer-policy(no-referrer)) does not send a referrer to the URL.

rem

The rem CSS length unit is a font-relative length that is equal to the font size of the root HTML element which for most browsers is 16px.

resize (CSS property)

The resize CSS property sets whether an element can be resized by the user, and on which axes.

revert

The revert CSS keyword resets any property to its previous default, provided by either the user or browser stylesheets. For example, setting display: revert on a <div> will likely result in display: block, the browser default style. This is often confused with initial.

rlh unit

The rlh CSS length unit is a font-relative length relative to the line height of root element.

ruby-overhang

The ruby-overhang CSS property sets whether ruby annotations may overlap adjacent text.

scroll-behavior

The scroll-behavior CSS property controls whether scrolling is smooth or snaps, for scroll actions not performed by the user such as those triggered by navigation.

scroll-initial-target

The scroll-initial-target: nearest CSS declaration sets the initial scroll position of its scroll container to the top of the element, much like scrolling to a URL fragment.

scroll-target-group

The scroll-target-group CSS property sets the container where anchor links act as scroll markers. Using selectors such as :target-current, you can style elements when a target has scrolled into view. It's an alternative to the ::scroll-marker-group pseudo-element, which generates scroll markers.

shape-outside

The shape-outside CSS property, along with shape-margin and shape-image-threshold, sets the shape around which adjacent content will wrap.

shapes

The circle(), ellipse(), inset(), and polygon() CSS shape functions create shapes for use with clip-path and shape-outside.

speak

The speak CSS property sets whether or not text should be spoken.

speak-as

The speak-as CSS property sets how any element's content is spoken. Not to be confused with the speak-as descriptor of @counter-style at-rules.

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.

stretch

The stretch CSS keyword expands a box as needed to fit its contents until the maximum size is reached, without preserving the content's preferred aspect ratio.

style (attribute)

The style global HTML attribute applies inline CSS styling declarations to individual elements.

tab-size

The tab-size CSS property sets the width of the tab character.

text-align

The text-align CSS property sets the horizontal placement of the inner content of a block element.

text-align-last

The text-align-last CSS property sets the alignment of the last line of text before a forced line break.

text-autospace

The text-autospace CSS property sets whether and how to insert spaces in inter-script text (such as when mixing Latin and Chinese characters) and around punctuation.

text-box

The text-box CSS property sets the spacing above and below text based on a font's typographic features. For example, text-box: trim-both ex alphabetic trims the top to the top of the letter x and the bottom to the bottom of most letters, without descenders.

text-combine-upright

The text-combine-upright CSS property displays multiple characters in the space of a single character in vertical text. This is used in East Asian documents to display Latin-based strings such as components of a date or letters of an initialism.

text-decoration

The text-decoration CSS property sets the style and color of decorative lines including underline, overline, line-through, or a combination of lines.

text-decoration in ::selection

The text-decoration CSS property in a ::selection rule sets the underline and other text decoration styles on the text a user has highlighted.

text-decoration-line: blink

The text-decoration: blink CSS declaration flashes text between visible and invisible.

text-decoration-skip-ink

The text-decoration-skip-ink CSS property sets whether underlines and overlines may be interrupted where the line would cross a glyph.

text-emphasis

The text-emphasis CSS property sets position and style for text emphasis marks, especially for East Asian languages.

text-fit

The text-fit CSS property scales text to fill the inline size of its container. You can use this to grow or shrink headlines, captions, or pull quotes to fit a container.

text-indent

The text-indent CSS property sets the size of the empty space (indentation) at the beginning of lines in a text.

text-justify

The text-justify CSS property sets the justification method of text when text-align: justify is set.

text-orientation

The text-orientation CSS property sets the how text is typeset within a line when the writing mode is vertical.

text-shadow

The text-shadow CSS property sets the position and styles of shadow on text.

text-size-adjust

The text-size-adjust CSS property disables or modifies the browser's default text size adjustment for small screen sizes.

text-spacing-trim

The text-spacing-trim CSS property controls spacing around CJK characters, avoiding excessive whitespace when using full-width punctuation characters.

text-transform

The text-transform CSS property sets text case and capitalization.

text-underline-offset

The text-underline-offset CSS property shifts underlines on text from the initial position by a given distance. The initial position is affected by the text-underline-position property.

text-underline-position

The text-underline-position CSS property sets the position of underlines on text. For example, text-underline-position: under places the underline below the text, avoiding crossing descenders. The underline may be further adjusted by the text-underline-offset property.

text-wrap: pretty

The text-wrap: pretty CSS declaration prioritizes better layout over speed when text is broken into multiple lines.

touch-action

The touch-action CSS property sets whether an element on a touch screen can be panned or pinched to zoom.

unset

The unset keyword resets any CSS property, removing any values previously set by the author, user, or browser. Inherited properties (like color) reset to the parent element's computed value. Non-inherited properties (like display) reset to the specified initial value (inline).

user-select

The user-select CSS property controls which elements can be selected by the user.

vertical-align

The vertical-align CSS property sets the vertical alignment of inline, inline-block, and table cell elements. It has no effect on block-level elements.

visibility

The visibility CSS property sets whether an element is shown. Invisible elements still affect the document layout.

white-space

The white-space CSS property sets how white space is collapsed and how lines wrap. It is a shorthand for white-space-collapse and text-wrap-mode.

will-change

The will-change CSS property gives hints to the browser about expected changes to an element's scroll position, contents, or style. These hints allow browsers to optimize for upcoming style changes.

window-drag

The window-drag: move CSS declaration sets an element as a window drag handle, like a device's app title bar. You can use this to add click-and-drag areas to an installed progressive web app, often alongside window controls overlay.

word-break

The word-break CSS property sets how lines break within words.

word-break: auto-phrase

The word-break: auto-phrase CSS declaration specifies that wrapping should occur at natural phrase boundaries, especially in CJK languages.

word-break: break-word

The word-break: break-word CSS declaration sets word breaks to occur according to their customary rules.

word-spacing

The word-spacing CSS property sets the amount of white space between words.

writing-mode

The writing-mode CSS property sets whether text is laid out horizontally or vertically, and left to right, or right to left.

writing-mode SVG 1.1 values

The lr, lr-tb, rl, rl-tb, tb, and tb-rl keyword values for the writing-mode CSS property set the text direction for elements in SVG 1.1 documents.

z-index

The z-index CSS property orders overlapping elements, with higher values appearing in front of or on top of lower values.

<a>

The <a> element creates a hyperlink to any resource that's accessible via a URL, such as web pages, files, email addresses, or locations within the same page.

<abbr>

The <abbr> HTML element represents an abbreviation or acronym.

<address>

The <address> element represents contact information for a person or people, or for an organization.

<article>

The <article> element represents self-contained content, which is intended to be independently distributable or reusable, such as a comment, a blog post, or news article.

<aside>

The <aside> element represents a portion of a document whose content is only indirectly related to the document's main content.

<b>

The <b> HTML element draws reader's attention to text, styling text as bold by default.

<base>

The <base> element sets the base URL (the URL that relative URLs are relative to) for all relative URLs in the document.

<bdi>

The <bdi> element isolates text that may have a different text direction from its surrounding text. This prevents the browser's bidirectional text algorithm from affecting or being affected by the direction of the surrounding text.

<bdo>

The <bdo> element overrides the directionality of text, so that the text within is rendered in a different direction than the surrounding text.

<blockquote>

The <blockquote> element represents an extended quotation, styling contents as an indented block by default.

<body>

The <body> element represents the content of an HTML document.

<br>

The <br> element produces line breaks in text.

<cite>

The <cite> element represents the title of a quoted, referenced, or mentioned creative work, such as a film or book.

<code>

The <code> element displays its contents as a fragment of computer code.

<data>

The <data> element links a given piece of content with a machine-readable translation.

<del>

The <del> element represents a range of text that has been deleted from a document, styling text as strikethrough by default.

<details>

The <details> element is a disclosure widget which can be expanded to reveal additional content. When closed, only the nested <summary> element is visible.

<dfn>

The <dfn> element marks a term to be defined, styling text as italic by default.

<dialog closedby>

The closedby HTML attribute for <dialog> sets which user actions close a dialog. For example, closedby="any" allows the dialog to be closed by clicking outside of it.

<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.

<div>

The <div> HTML element is the generic container for content.

<em>

The <em> HTML element emphasizes or stresses the content, styling text as italic by default.

<embed>

The <embed> element represents an external resource such as a PDF or SVG document. It was historically used for plugins such as Shockwave Flash.

<figure> and <figcaption>

The <figure> and <figcaption> HTML elements represent an illustration, diagram, text, or other self-contained reference content, with an optional caption.

<geolocation>

The <geolocation> HTML element represents a button that, upon activation, prompts the user to choose whether to grant the page access to geolocation data.

<h1> through <h6>

The <h1> through <h6> HTML elements represent six levels of section headings, in order of decreasing importance.

<head>

The <head> element contains machine-readable information (metadata) about the document, such as the title, <script> and <style> elements, and <meta> elements.

<header> and <footer>

The <header> and <footer> HTML elements represent content that precedes and follows the main page content, respectively.

<hgroup>

The <hgroup> element represents a heading and related content.

<hr>

The <hr> element represents a thematic break between paragraphs, often shown as a horizontal rule.

<html>

The <html> element represents the top-level of an HTML document and is referred to as the root element.

<i>

The <i> HTML element identifies idiomatic content, styling text as italic by default.

<iframe>

The <iframe> element embeds another HTML page into the current page.

<img sizes="auto" loading="lazy">

The sizes="auto" attribute for the <img> HTML element sets the layout size for the image based on the computed layout size when choosing a source from the srcset. This attribute only applies to images with the loading="lazy" attribute.

<img>

The <img> element adds an image into the document.

<input type="button">

The <input type="button"> HTML element represents a button that triggers some action, such as submitting a form or opening a dialog, styled as a labeled rectangular box by default. Not to be confused with the <button> element, which contains HTML content.

<input type="checkbox" switch>

The switch attribute, when present on an <input type="checkbox"> HTML element, renders a switch control with an on and off state instead of a checkbox control.

<input type="color">

The <input type="color"> HTML element shows a color picker from which users can choose a color value.

<input type="hidden">

The <input type="hidden"> HTML element represents a form field that is not shown visually but is still included in the form submission.

<input type="password">

The <input type="password"> HTML element represents a field for users to enter a password. The password is hidden from view, typically replaced by dots or asterisks.

<input type="radio">

The <input type="radio"> HTML element represents one button in a group such that only one can be chosen at a time.

<input type="range">

The <input type="range"> element represents a slider for choosing an inexact value between a minimum and maximum value.

<input type="reset">

The <input type="reset"> HTML element represents a button that sets all form fields to their initial values.

<input type="search">

The <input type="search"> HTML element represents a text field for search queries.

<input type="submit">

The <input type="submit"> HTML element represents a button that triggers an action on its associated <form>, such as sending the form data to a server.

<ins>

The <ins> element represents a range of text that has been inserted into a document, styling text as underlined by default.

<kbd>

The <kbd> element represents textual user input, such as keyboard or voice input, styling text in monospaced type by default.

<link rel="expect">

The rel="expect" attribute for the <link> HTML element is a hint to the browser to block rendering until the element that the href value references is connected to the document and fully parsed.

<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.

<link rel="preconnect">

The rel="preconnect" attribute for the <link> HTML element is a hint to the browser that the page or user is likely to request resources from another origin, so the browser should preemptively start a connection to the href value's origin.

<link rel="preload">

The rel="preload" attribute for the <link> HTML element requests resources, such as images or style sheets, that the page needs soon, so the browser may prioritize them for loading before rendering begins.

<link>

The <link> element creates a relationship between the current document and an external resource, such as a stylesheet or favicon.

<main>

The <main> element represents the dominant content of a document. It is commonly used together with <header> and <footer>.

<mark>

The <mark> element represents text which is marked or highlighted for reference or notation purposes.

<menu>

The <menu> element represents an unordered list of action items (<li>), such as a toolbar. It is a semantic alternative to the <ul> element.

<meta name="text-scale">

The <meta name="text-scale" content="scale" /> HTML element allows the browser's initial font size to be affected by the operating system text scale settings. The <meta name="text-scale" content="legacy" /> element is the default behavior that respects only browser font-size settings.

<meta name="theme-color">

The name="theme-color" attribute for the <meta> HTML element suggests a color that the browser can use to customize the display of the page or the browser user interface.

<meta>

The <meta> element represents metadata about the page used by the browser or search engines, including description, keywords, and character sets.

<nav>

The <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.

<object>

The <object> element represents an external resource such as a PDF or SVG document. It was historically used for plugins such as Shockwave Flash.

<ol>, <ul>, and <li>

The <ol>, <ul>, and <li> HTML elements represent ordered and unordered lists.

<p>

The <p> element represents a paragraph of text.

<picture>

The <picture> element is used for art direction in responsive images, where a different image is displayed based on the <source> element.

<pre>

The <pre> element represents a block element of preformatted text that is presented exactly as written, including all white space.

<q>

The <q> element represents a short inline quotation.

<ruby>

The <ruby> element produces small annotations that are rendered with its base text.

<s>

The <s> HTML element indicates text that is no longer relevant or accurate, styling text as strikethrough by default.

<samp>

The <samp> element represents a sample or quoted output from a computer program. Styled in a monospace font by default.

<script> and <noscript>

The <script> element contains or loads data or executable code. This is typically used to load JavaScript code. The <noscript> element represents alternative content to show when scripting is not allowed.

<search>

The <search> HTML element is a container that represents the parts of the web page with search functionality.

<section>

The <section> element is a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.

<slot>

The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.

<small>

The <small> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. Styled in a reduced font size by default.

<span>

The <span> HTML element is the generic inline container for content.

<strong>

The <strong> HTML element brings attention to the content, styling text as bold by default.

<style>

The <style> element embeds an inline CSS stylesheet in a document.

<sub> and <sup>

The <sub> and <sup> elements sets inline text to be displayed as subscript or superscript for solely typographical reasons.

<template>

The <template> HTML element holds HTML fragments which you can clone and insert into the document using JavaScript.

<time>

The <time> HTML element represents a time, such as a calendar date, clock time, or duration. It may include the datetime attribute to translate dates into machine-readable format.

<title>

The <title> element sets the title of the document and exposes it to users via the UI of the browser or app they're using and through assistive technology.

<u>

The <u> HTML element makes non-textual annotations, styling text as underlined by default.

<var>

The <var> element represents the name of a variable in a mathematical expression or a programming context.

<wbr>

The <wbr> HTML element represents a word break opportunity, to explicitly mark a place within a word where a line might be broken.

Compression Dictionary Transport

Compression Dictionary Transport is a mechanism for using designated HTTP responses as an external dictionary for future HTTP responses for compression schemes that support using external dictionaries (e.g., Brotli and Zstandard)

Console

The console API logs debugging messages to the browser development tools' console.

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.

Description list

The <dl>, <dt>, and <dd> HTML elements represent a list of terms and their associated descriptions. Use a description list to create glossaries or similar list of key-value pairs.

Email, telephone, and URL <input> types

The <input type="email">, <input type="tel">, and <input type="url"> HTML elements represent email address, telephone number, and URL fields in a form.

HTML in canvas

A <canvas> HTML element with the layoutsubtree attribute can draw descendant elements in its rendering context. You can use it to style and layout text in a canvas, expose canvas content to browser features (like accessibility, translate, or find-in-page), and apply 2D and 3D effects to HTML.

Heading offset

The headingoffset HTML attribute offsets the heading level of descendant <h1>–<h6> elements. The headingreset HTML attribute prevents heading offset computation from traversing beyond the element.

Image maps

The <area> and <map> elements define a clickable area on an image.

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.

Interest invokers

Interest invokers, registered by the interestfor HTML attribute, trigger events and actions on a target element when a user shows interest in the element, through behaviors such as hover, focus, or long-press. Pseudo-elements apply styles to sources and targets of interest.

Meta refresh

The <meta http-equiv="refresh"> HTML element and the equivalent Refresh HTTP header trigger a page reload or redirect. They apply only when the page is fully loaded, after other HTTP redirects or scripted redirects that might execute before the page is fully loaded.

Signature-based resource integrity

Signature-based resource integrity verifies a script's provenance by checking that the resource has been signed with a trusted key given by the <script> element's integrity attribute.

Table styling

Attributes and properties of table elements, such as align, vAlign, noWrap, bgcolor, or char set various visual presentation properties of the table and its sections and cells.

Tables

The <table> HTML element, with several related elements, represents tabular data in rows and columns of cells.

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.

focusgroup

The focusgroup global HTML attribute combines descendant elements into a single tab stop, with arrow-key navigation between them, for toolbars, tabs, menus, radio groups, and other composite controls. It's an alternative to the sequential navigation of tabindex.

hidden="until-found"

The hidden="until-found" attribute hides an element until it is found using the browser's find-in-page search or it is directly navigated to by following a URL fragment.

inert

The inert HTML attribute marks an element and its descendants as non-interactive. Inert elements don't get focus or fire click events.

popover="hint"

The popover="hint" global HTML attribute creates a popover that is subordinate to popovers with a popover="auto" attribute. You can use this to create tooltips that don't dismiss auto popovers.

srcset and sizes

The srcset and sizes attributes for <img> elements set a list of possible sources for the image and a corresponding list of size conditions for choosing a source, to show a responsive image that fits the size of the display.

tabindex

The tabindex HTML attribute make an element focusable, and sets the element's relative ordering for sequential focus navigation.

Brotli compression

Brotli is a lossless data compression algorithm. When used as a content encoding, it often provides better compression than gzip.

CORS

Cross-Origin Resource Sharing is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. Also known as CORS.

Clearing site data

The Clear-Site-Data header deletes browsing data (such as cookies, storage, or cache) associated with the requesting website.

Crash reporting

Crash reporting sends a report to a URL nominated by the Reporting-Endpoints header when a user is unable to continue using the page because the browser or tab crashed.

Data URLs

Data URLs are URLs that start with the data: scheme and which directly contain data rather than point to remote resources.

Device-bound session credentials

Device-bound session credentials is a protocol to request proof of possession of a private key. Regularly confirming key possession can help protect against cookie theft.

Early data

TLS 1.3 sessions may be resumed more quickly by sending so-called early data to servers before the TLS handshake has finished. Also known as zero round-trip time resumption or 0-RTT.

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.

HTTP Strict Transport Security

The Strict-Transport-Security HTTP response header informs browsers that the site should only be accessed using HTTPS, and that any future attempts to access it using HTTP should automatically be converted to HTTPS. Also known as HSTS.

HTTP authentication

The Authorization and WWW-Authenticate headers authenticate a user with a server.

HTTP/1.1

HTTP/1.1 is a network protocol used by browsers and servers. It has been superseded by HTTP/2 and HTTP/3.

HTTP/2

The HTTP/2 protocol is a major revision of the HTTP network protocol, providing improved performance and efficiency by using a single TCP connection to send multiple streams of data at once.

Mixed content handling

When a document is loaded over HTTPS, browsers ensure that none of the document's resources are loaded over an insecure protocol. Instead, resources that the document attempts to load over an insecure protocol are either loaded over HTTPS or are blocked.

Private network access

The Access-Control-Request-Private-Network: true and Access-Control-Allow-Private-Network: true HTTP request and response headers establish permission for websites to make requests to internal networks, such as to routers.

Sourcemap header

The Sourcemap HTTP response header links generated code to a source map, so the browser shows the original source in a debugger. This makes it easier to work with minified or transpiled code.

Upgrade insecure requests

The Upgrade-Insecure-Requests HTTP request header tells the server that the response should redirect to a secure (HTTPS) resource.

Accessor methods

The __defineGetter__() and __defineSetter__() methods of objects bind a function to a property, which is called on setting or reading the property.

Array (initial support)

Arrays are ordered lists of JavaScript values.

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.

Array by copy

The toReversed(), toSorted(), toSpliced(), and with() methods of arrays and typed arrays return changed copies of arrays. They stand in contrast to methods such as sort() or reverse() that change arrays in place.

Array copyWithin()

The copyWithin() method of arrays and typed arrays shifts or copies items of an array to another index of the array without changing its length.

Array fill()

The fill() method of arrays and typed arrays sets all or some items of an array to a given a value.

Array find() and findIndex()

The find() and findIndex() methods of arrays and typed arrays search an array for the first item that satisfies a test function.

Array findLast() and findLastIndex()

The findLast() and findLastIndex() methods of arrays and typed arrays search an array in reverse order for the first item that satisfies a test function.

Array flat() and flatMap()

The flat() and flatMap() methods for arrays creates a new array such that each nested array item is concatenated into it.

Array includes()

The includes() method of arrays and typed arrays returns whether a given value appears in the array.

Array iteration methods

Array iteration methods

Array iterators

Arrays are iterable with the for … of statement and enumerable with the methods entries(), keys(), and values().

Array splice()

The array splice() method changes an array in-place. You can use it to delete items, overwrite items, or insert items, starting from an index.

Array.from()

The Array.from() and typed array .from() static methods copy items from an iterable or array-like object to make a new array.

Array.fromAsync()

The Array.fromAsync() static method copies items from an async iterable object to make a new array.

Array.isArray()

The Array.isArray() static method checks whether a value is an array.

Array.of()

The Array.of() and typed array .of() static methods create new arrays from the values of any number of arguments.

Async functions

The async and await keywords allow you to use the asynchronous, promise-based behavior of a function without using promise chains.

Async generators

Async generator functions (async function*) create iterators that return multiple promises, one after another, on-demand.

Async iterators and the for await..of loop

Asynchronous iterator objects, such as those returned by promises or generator functions, are iterable with the for await .. of loop.

BigInt

The BigInt JavaScript type represents integers of any size, including integers too large for the primitive Number type.

BigInt64Array

The BigInt64Array and BigUint64Array typed arrays represent 64-bit integers, signed and unsigned respectively.

CSS import attributes

Module import … with { type: "css" } statements load CSS modules as constructable stylesheets. Also known as CSS module scripts.

Classes

Classes are an object-oriented syntax for JavaScript prototypes.

Date

The Date object represents a single moment in time.

Destructuring

The destructuring assignment syntax is a JavaScript expression that unpacks values from arrays, or properties from objects, into distinct variables.

Error cause

The cause property of errors records the specific original cause of the error, particularly for errors that have been re-thrown.

Error.isError()

The Error.isError() static method checks whether a value is an Error object.

Explicit resource management

The using and await using declarations and the dispose and asyncDispose symbols manage the lifecycle of resources such as file handles and streams. The DisposableStack and AsyncDisposableStack objects can group, dispose, and coordinate dependencies between multiple disposable resources.

Exponentiation operator

The exponentiation (**) operator returns the result of raising the first operand to the power of the second operand.

Function caller and arguments

The caller and arguments properties of a non-strict mode Function object are the function that called it and the arguments it was called with. Not to be confused with the arguments variable in a function body's local scope.

Functions

Functions are series of statements that can be called and return a value. The function keyword (as in function () { }) and arrow (=>) expression create functions. The JavaScript functions protocol includes default and rest parameters and binding to this.

Generators

Generator functions (function*) create iterators that return multiple values, one after another, on-demand.

HTML wrapper methods

JavaScript built-in methods such as, String.bold() and String.italics(), wrap strings in (often historic) HTML.

Hashbang comments

The #! comment at the absolute start of a script or module is treated as a normal comment and is ignored by the JavaScript engine.

Import assertions

Module import … assert { type: "json" } and import … assert { type: "css" } JavaScript statements load JSON and CSS data.

Intl

The Intl API provides language sensitive string comparison, number formatting, date and time formatting, and more.

Intl.DisplayNames

The Intl.DisplayNames API provides localized names of language, region, script, and currency codes.

Intl.ListFormat

The Intl.ListFormat API creates a locale-aware formatter that turns iterable objects into localized strings.

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.PluralRules

The Intl.PluralRules API creates a locale-aware object that tells you which of the language's pluralization rules apply based on a given number.

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.

Iterators and the for...of loop

The for...of loop operates on a sequence of values sourced from an iterable object, such as arrays, array-like objects, DOM collections, iterators, generators, and user-defined iterables. All built-in iterators inherit from the Iterator class.

JSON

The JSON API provides static methods for parsing values from and converting values to JavaScript Object Notation (JSON), a serialization format for objects, arrays, numbers, strings, Boolean values, and null.

JavaScript (initial core language support)

JavaScript is a programming language that runs in browsers, usually through the <script> element. JavaScript has changed over many years. This feature represents the oldest language features, such as built-in objects, statements, and operators. Also known as ECMAScript.

Let and const

The let and const declarations define block-scoped variables.

Logical assignments

The logical AND assignment (&&=) and the logical OR assignment (||=) operators short-circuit the respective binary logical operators.

Map (initial support)

Map objects hold key-value pairs and remember the original insertion order of the keys.

Math and numbers

The number type (and Number object) represents floating-point numbers, such as 42 or -4.201, while the Math API contains mathematical functions and constants. JavaScript can also represent boundless negative and positive values as Infinity or not-a-number as NaN (as in 0 * Infinity).

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.

Numeric separators

To improve readability for numeric literals, underscores (_) can be used as separators. For example, 1_050.95 is equivalent to 1050.95.

Object

Objects in JavaScript are collections of key-value pairs.

Object.hasOwn()

The Object.hasOwn() static method checks whether an object has a given property. It's a more robust alternative to the Object.prototype.hasOwnProperty() method.

Optional catch binding

Omit the binding parameter of a catch clause when you don't need information about the exception in a try ... catch statement.

Promise (initial support)

A promise represents an asynchronous operation which eventually succeeds or fails.

Promise finally()

The promise finally() method executes a function when the promise settles (resolves or rejects).

Promise.allSettled()

The Promise.allSettled() static method waits for an array of promises to settle (resolve or reject).

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.

Proxy and Reflect

The Proxy and Reflect JavaScript built-ins intercept and define custom behavior for fundamental language operations (such as property lookup, assignment, enumeration, or function invocation).

RegExp compile()

The compile() method of RegExp objects recompiles an existing regular expression object using a new pattern and flags.

RegExp static properties

The RegExp object has several static properties to access the input and results of the most-recent regular expression match.

Regular expressions

The RegExp object represents a regular expression, a notation for matching text patterns.

Set (initial support)

Set objects store unique values of any type.

SharedArrayBuffer and Atomics

The SharedArrayBuffer object represents bytes shared between multiple workers and the main thread. The Atomics object safely accesses SharedArrayBuffer data to make sure predictable values are read and written and that operations are not interrupted.

Spread syntax

The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected.

Stable array sort

Stable array sort() function

String (initial support)

The string type (and String object) represents a sequence of characters.

String at()

The at() method of strings returns the character (one UTF-16 code unit) at an index, including negative indices for getting the character relative to the end of the string. Also known as the relative indexing method.

String codePointAt() and fromCodePoint()

The codePointAt() method returns the numeric value of the UTF-16 code point at an index of the string. The fromCodePoint() method returns a string created from one or more code points.

String includes()

The includes() method of strings returns whether a search string appears within the string.

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.

String matchAll()

The matchAll() method of strings matches a string against a regular expression and returns an iterator of all results, including capturing groups.

String normalize()

The normalize() method of strings returns a Unicode normal form of a string as a new string. More than one code point sequence can represent the same characters. You can use the normalize() method to find canonically or compatibly equivalent strings.

String padStart() and padEnd()

The padStart() and padEnd() methods of strings return a string lengthened to a minimum number of characters by adding characters to the start or end of the string.

String raw()

The String.raw() static method interpolates template literal substitutions, but ignores escape sequences. It is the tag function for template literals.

String repeat()

The repeat() method of strings returns the original string repeated a number of times.

String replaceAll()

The replaceAll() method of strings returns a new string where all matches of a pattern (a string or regular expression) have been substituted with a replacement string.

String startsWith() and endsWith()

The startsWith() and endsWith() methods of strings returns whether a search string appears at the beginning or end of the provided string.

String trimStart() and trimEnd()

The trimStart() and trimEnd() methods of strings return a new string with whitespace removed from the beginning or end of the string.

Symbol

A Symbol value is a unique, non-enumerable primitive value used for encapsulation or information hiding. For example, a symbol can be a key of an object that can never collide with any other key.

Template literals

Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.

Temporal

The Temporal API allows you to work with dates, times, time zones, and durations. It is more powerful than the Date API.

Text import attributes

Module import … with { type: "text" } statements load text data as a string value.

Top-level await

The await keyword, when used at the top level of a module (outside of an async function), delays parent module execution until after a promise fulfills.

Typed array iteration methods

Typed array iteration methods

Typed array iterators

Typed arrays are iterable with the for … of statement and enumerable with the methods entries(), keys(), and values().

Typed arrays (initial support)

Typed arrays are ordered lists of JavaScript values, where all values are of the same numerical type, such as 8-bit integers or 32-bit floating point numbers.

Unicode point escapes

Unicode point escapes (\\u{}) represent Unicode characters within strings.

Weak references

The WeakRef and FinalizationRegistry objects hold references to garbage-collectable objects without creating strong references that prevent their garbage collection.

WeakMap

A WeakMap object holds key-value pairs that do not create strong references to its keys, such that value data can be associated with a key without preventing garbage collection of the key.

WeakSet

A WeakSet object stores unique values of any type without creating strong references to the values, such that membership in the set does not prevent garbage collection of the value.

__proto__

The __proto__ property of objects partially exposes the prototype of an object.

arguments.callee

The callee property of the arguments variable in a non-strict function body's local scope is the function that arguments belongs to.

escape() and unescape()

The escape() and unescape() built-in Javascript methods encode and unencode strings using percent encoding, where certain characters are replaced by hexadecimal escape sequences.

getYear() and setYear()

The getYear() and setYear() methods of Date objects get and set the year as an offset to 1900.

globalThis

The globalThis property accesses the global this value (and hence the global object itself) across environments.

toGMTString()

The toGMTString() method of Date objects is an alias to the toUTCString() method.

with

The with JavaScript statement adds a given object to the chain of scopes used to evaluate names.

:target-within

The :target-within CSS pseudo-class matches the element with an ID matching the URL fragment and its ancestors.

<usermedia>

The <usermedia> HTML element represents a button that, upon activation, toggles camera or microphone streams. If needed, it may prompt the user to choose whether to grant the page access to the camera and microphone.

AVIF

AVIF (AV1 Image File Format) is an image format based on the AV1 video format.

Ad selection

The Ad Selection API facilitates advertisement sales by allowing sites to register users as part of an interest group or to choose which ads appear based on those interest groups, while minimizing the ability of advertisers to track specific members of the interest group.

BMP

The BMP image format is an uncompressed raster graphics file format. Also known as a bitmap.

GIF

The GIF (Graphics Interchange Format) image format is a raster graphics file format with animation and lossless compression.

Intersection observer visibility tracking

The trackVisibility parameter for the IntersectionObserver constructor enables tracking the visibility of an element, to detect if it may be obscured by other content or visual effects. Also known as IntersectionObserver v2.

JPEG

The JPEG image format is a raster graphics file format with lossy compression.

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.

Masonry

The display: grid-lanes or display: inline-grid-lanes CSS declaration creates a layout where items are tightly packed, like brickwork, in parallel lanes. Items are placed one by one in the lane that has the most available space.

MathML Full

MathML specifies several elements and attributes that are not included in MathML Core. Math applications outside of browsers may implement these features, but they are discouraged for web use.

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.

OpaqueRange

The createValueRange() for form elements, such as <textarea> or <input type="text">, gets an OpaqueRange object that represents a live span of text. You can use this for range-based operations on the input text, such as setting custom highlights or placing autocomplete popovers.

PNG

The PNG (Portable Network Graphics) image format is a raster graphics file format with animation, alpha transparency, and lossless compression.

Portals

The <portal> HTML element embeds another page into the current page as a non-interactive preview.

Rhythmic sizing

The line-height-step CSS property creates consistent vertical rhythm by setting the spacing between body text baselines. It rounds taller lines like headings up to the next multiple of the body text spacing.

Virtual pressure sources

The CreateVirtualPressureSource WebDriver command creates artificial sources of compute pressure for testing without the need real device sources of compute pressure.

Virtual sensors

The CreateVirtualSensor WebDriver command creates a virtual sensor for testing applications that use sensor APIs, without the need for real device sensors.

WebP

The WebP image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression.

color-contrast()

The color-contrast() CSS function picks a color from a list that has the most contrast with another color.

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.

image()

The image() CSS function creates an image similar to url() but with additional functionality. It can create a solid color as an image, provide a fallback from an image URL to a solid color, or clip a sprite image using media fragments. Not to be confused with the Image() constructor.

'pageswap' event

The `pageswap` event is fired on a Document's window object when a navigation will replace this Document with a new Document. The event provides activation info about the navigation (type, NavigationHistoryEntry for the new Document). If the navigation has a cross-document ViewTransition, the event is dispatched before capturing state for the old Document. This allows the page-author to configure the old state captured for the transition based on the navigation's activation info and the current visual state of the old Document. This feature is split out from the larger ViewTransition-on-Naviga

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

@page margin boxes

Add support for page margin boxes, when printing a web document, or exporting it as PDF. @page margin boxes allows an author to define the contents in the margin area of a page, for instance to provide custom headers and footers, rather than using the built-in headers and footers generated by the browser. A margin box is defined via an at-rule inside a CSS @page rule. There are 16 rules defined, one for each page margin box. There's one margin box for each of the 4 corners on the page, and three (start, middle, end) for each of the 4 sides. The appearance and the contents of a margin box are s

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

@scroll-timeline & animation-timeline

The @scroll-timeline rule and animation-timeline property allow authors to define ScrollTimelines declaratively.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

ARIA Notify API

ariaNotify provides a JavaScript API that enables content authors to directly tell a screen reader what to read. ariaNotify improves reliability and developer control compared to ARIA live regions, allowing for announcing changes not tied to DOM updates. This enables more consistent and ergonomic accessibility experiences across dynamic web applications. Iframe usage of this feature can be controlled via a permission policy "aria-notify".

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Add MediaStreamTrack support to the Web Speech API

Add MediaStreamTrack support to the Web Speech API. The Web Speech API is a web standard API that allows developers to incorporate speech recognition and synthesis into their web pages. Currently, the Web Speech API uses the user's default microphone as the audio input. MediaStreamTrack support allows websites to use the Web Speech API to caption other sources of audio including remote audio tracks.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Add bugfix version number to User-Agent string on Bling

UA strings in Chromium have been moving towards reducing or freezing information - but until WebKit allows us to implement UA client hints, we propose adding the bugfix number to the UA, for compatibility purposes.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Add frozen or active lifecycleState to ServiceWorker Client

Exposes the client's PageLifecycle state on the ServiceWorker Client API.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Add support for video frame orientation metadata to WebCodecs

Introduces "rotation: int" and "flip: bool" values to various video related interfaces in WebCodecs so that developers can work with frame sources that have orientation (E.g., Android cameras, certain media). The VideoFrame interface grows the ability to create VideoFrames with arbitrary rotation and flip as well as accessors for this information on the VideoFrame object. The VideoDecoderConfig object gains rotation and flip fields that are emitted on decoded VideoFrame objects automatically. The VideoEncoder class gains mechanisms for passing rotation and flip information from encode() to the

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Add timezonechange event to Window and WorkerGlobalScope

Adds a timezonechange event and ontimezonechange event handler to Window and WorkerGlobalScope.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Add value argument to URLSearchParams's has() and delete()

This feature adds the ability to pass a `value` argument to URLSearchParams's has() and delete() methods which allow for deleting tuples stored in URLSearchParams either by the `name` parameter or by the combination of `name` and `value`

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Additional Windowing Controls

Enable web applications to maximize, minimize, and restore their windows, control whether the window can be resized, and introspect the corresponding window state. The Window Management permission is required for new JS API controls (window.maximize()/minimize()/restore()/setResizable(bool)). The new CSS media features display-state and resizable are not gated behind a permission as they can follow the non-AWC API toggled states as well. This feature is an enhancement of the Window Management API: https://chromestatus.com/feature/5252960583942144

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Align Timers (including DOM timers) at 125 Hz

Run all timers (with a few exceptions) with a non-zero delay on a regular 8ms aligned wake up (125 Hz), instead of as soon as their delay has passed. This affect DOM timers; On foreground pages, run DOM timers with a non-zero delay on a regular 8ms aligned wake up, instead of as soon as their delay has passed. On background pages, DOM timers already run on a regular 1s aligned wake up (1 Hz), or even less frequently after 5 minutes.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Align error type thrown for 'payment' WebAuthn credential creation: SecurityError => NotAllowedError

Correct the error type thrown during WebAuthn credential creation for 'payment' credentials. Due to a historic specification mismatch, creating a 'payment' credential in a cross-origin iframe without a user activation would throw a SecurityError instead of a NotAllowedError, which is what is thrown for non-payment credentials. This is a breaking change, albeit a niche one. Code that previously detected the type of error thrown (e.g., `e instanceof SecurityError`) would be affected. Code that just generally handles errors during credential creation (e.g. `catch (e)`) will continue to function c

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Align performance API timer resolution to cross-origin isolated capability

Currently `performance.now()` and related timestamps are coarsened based on site isolation status. This change will align their coarsening based on cross-origin isolation capability, regardless of platform. That would decrease their resolution on desktop from 5 microseconds to 100 microseconds in non-isolated contexts. It would also increase their resolution on Android from 100 microseconds to 5 microseconds in cross-origin isolated contexts, where it's safe to do so.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Allow first-party SameSite=None cookies in sandboxed contexts

Enable a frame to signal the browser to include SameSite=None cookies in first-party requests if third-party cookie (3PC) restrictions are active using the sandbox 'allow-same-site-none-cookies' value.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Ambient Light Sensor API

Provides illuminance data to web pages via the AmbientLightSensor object and the "reading" event.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Android on-screen keyboard doesn't resize layout

The Android keyboard will resize only the visual viewport - not the layout viewport. This means it'll have no effect on the page layout of location of position: fixed elements.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Animation Worklet

Animation Worklet is a Houdini primitive that provides extensibility point for Web Animations and enables rich high-performance scripted animations which can (potentially) run off main rendering thread. It allows you to write rich imperative animations that run at the device's native frame rate for jank-free smoothness, make your animations more resilient to main thread jank. Future enhancement will enable such animations to also respond to user input (such as touch and scroll).

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Async Clipboard API: Allow empty ClipboardItem during read

When the system clipboard is either empty or has unsupported formats, paste event returns an empty DataTransfer object, but the promise for `navigator.clipboard.read()`API is rejected. This creates interop differences and confusion among web developers as they aren’t sure why read failed. Currently in Chrome, we throw a DataError. The proposal here is to return an empty ClipboardItem when the system clipboard is either empty or there aren’t any supported formats.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Async Clipboard API: Read unsanitized HTML.

This proposal provides an `unsanitized` option in read() method to get unsanitized HTML format.. Unless sites choose to adopt the new API, reading from the clipboard will be sanitized. Currently, when we read text/html MIME types using the async API, the sanitizer is invoked to strip out contents from the HTML markup due to security concerns, and styles are inlined in the HTML, which leads to a bloated HTML payload and loss of fidelity of HTML content when read by web authors or native apps. Currently, Firefox provides access to unsanitized HTML via DataTransfer APIs, which matches Chromium's

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Async Clipboard API: Read unsanitized HTML.

This proposal provides an `unsanitized` option in read() method to get unsanitized HTML format.. Unless sites choose to adopt the new API, reading from the clipboard will be sanitized. Currently, when we read text/html MIME types using the async API, the sanitizer is invoked to strip out contents from the HTML markup due to security concerns, and styles are inlined in the HTML, which leads to a bloated HTML payload and loss of fidelity of HTML content when read by web authors or native apps. Currently, Firefox provides access to unsanitized HTML via DataTransfer APIs, which matches Chromium's

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Async Clipboard API: Write well-formed HTML document.

Using DataTransfer object’s setData and async clipboard write method, there are interop differences in how the HTML content is sanitized and written to the clipboard. The Async clipboard writer API uses sanitizers to strip out content such as `<head>`, `<meta>`, `<style>`, `<script>` tags from the HTML and inline styles into the markup. In this proposal, writing to the clipboard for `text/html` MIME type using the navigator.clipboard.write() API will write a higher fidelity sanitized, well-formed HTML markup instead of a more strictly sanitized HTML fragment. It will also preserve the tags suc

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Async Clipboard: SVG support

Adds `image/svg+xml` standard type support to the Async Clipboard API. The current implementation of the Async Clipboard API only supports text/plain, image/png, and text/html standard types. SVG images are popular due to their ability to encode images in a space efficiently and their ability to maintain image quality even when zooming in. Note that `image/svg+xml` as a standard type is not supported in DataTransfer APIs.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Async Stack Tagging

Web developers want to be able to see breadcrumbs in the call stack in order to figure out the causal connection between events leading to an issue. However, stack traces might be sparse or incomplete because of the implementation details of third-party schedulers. To address this, with the current version of the Async Stack Tagging API, framework developers are able to provide information about the framework’s scheduling, which will be used by DevTools to enrich the UI during debugging, such as the call stack in the Sources panel, or the output for `console.trace` in the Console panel.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Audio Output Devices API: setPreferredSinkId()

Adds setPreferredSinkId() to MediaDevices, which enables a top-level frame to override the default audio output device for all audio renderers in the top-level frame and its child frames, including cross-origin child frames. Audio renderers include HTML <media> elements and web audio contexts.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Audio and video tracks

This adds the ability to get information about multiple audio and video tracks, and switch between them using the AudioTrack.enabled and VideoTrack.selected attributes.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Auto Picture-in-Picture

Video in installed Progressive Web Apps (PWAs) will enter and exit picture-in-picture automatically when a document's visibility changes. Web apps for video meetings will benefit by allowing picture-in-picture when users switch back and forth between web apps and other applications or tabs. This is currently not possible because a user gesture is required to enter picture-in-picture.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Autoplay Policy for Web Audio

Web Audio will follow the rules of the autoplay policy already followed by other parts of Chrome able to produce sound. When an AudioContext is created, it will start as suspended if it wasn’t allowed to play. Calling resume() will only start the AudioContext if it is allowed to play. Furthermore, a previously blocked AudioContext will automatically be resumed if start() is called on a connected node after the document is user activated.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Back/forward cache NotRestoredReason API

NotRestoredReason API reports the list of reasons why a page is not served from BFcache in a frame tree structure, via PerformanceNavigationTiming API.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Battery status API gated by feature policy

Battery status API gated by feature policy provides developers with a way to control the availability of this API.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Battery status API gated by permissions policy

The Battery Status API provides a way to check host device battery status. This might be important e.g. for applications which need to ensure enough power is available for completing a task. Unfortunately this kind of API can be misused for fingerprinting, profiling etc. By gating the Battery Status API using a permissions policy, developers will be able to disable this API within their applications, and in third-party components.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Budget API

This specification describes an API that can be used to retrieve the amount of budget an origin has available for resource consuming background operations, as well as the cost associated with doing such an operation.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CORS non-wildcard request-header

A CORS non-wildcard request header[1] is an HTTP request header which is not covered by the wildcard symbol ("*") in the access-control-allow-headers header. "authorization" is the only member of CORS non-wildcard request-header. Currently we treat the header as a usual header, which is problematic for security reasons. Implement it, and change the current behavior. 1: https://fetch.spec.whatwg.org/#cors-non-wildcard-request-header-name

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSP 'manifest-src' rule for Web App Manifest

Allows setting a CSP policy for fetching the Web App Manifest

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSP's `prefetch-src` directive.

CSP allows developers to control the set of resources which can be preloaded by specifying a `prefetch-src` directive. The directive has the same format as other fetch directives; developers write an allowlist which defines the set of hosts from which resources can be preloaded. If `prefetch-src` is not specified, `default-src` will apply.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS 'stretch' sizing keyword

A keyword for CSS sizing properties (e.g. 'width', 'height') that allows elements to grow to exactly fill their containing block's available space. It is similar to '100%', except the resulting size is applied to the element's margin box instead of the box indicated by 'box-sizing'. Using this keyword allows the element to keep its margins while still being as large as possible. An unprefixed version of '-webkit-fill-available'.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS @supports : Always non-forgiving parsing

Some functional selectors are parsed forgivingly. (e.g. :is(), :where()) If an argument of the functional selectors is unknown or invalid, the argument is dropped but the selector itself is not invalidated. To provide a way of detecting the unknown or invalid arguments in those functional selectors, this feature applies the CSS Working Group issue resolution: - @supports uses non-forgiving parsing for all selectors (https://github.com/w3c/csswg-drafts/issues/7280#issuecomment-1143852187)

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS Anchor Positioning

CSS anchor positioning allows authors to "tether" an absolutely positioned element to one or more other elements on the page (the "anchors"), in a declarative way, without the use of Javascript. Anchor positioning works performantly when the anchors are scrollable. A common use case is to position a popover such as a tooltip next to the element that invoked it, or a select menu and its popover options list. Before the anchor positioning feature, these use cases required Javascript to dynamically position the popover, and keep it anchored as the invoking element was scrolled, which is a perform

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS Box Alignment

CSS properties for aligning boxes within their container. Allows for true vertical centering among other features.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS Device Adaptation

The @viewport rule, in combination with media queries, enabled web developers to optimize the layout of sites and apps for different devices with minimal effort. It generalizes the viewport meta tag to CSS, while being much simpler to understand and without the quirks that exists with the meta tag.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS Gap Decorations

CSS Gap Decorations enables styling of gaps in container layouts like Grid and Flexbox, similar to ‘column-rule’ in multicol layout. This feature is highly requested by web authors who must use hacks to style the gaps in Grid and Flexbox layouts today.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS Layout API (Houdini)

The CSS Layout API defines a new callback which is designed to allow developers to create additional layouts algorithms in the layout phase of the rendering engine.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS Values Level 4 Calc Simplification and Serialization

CSS math functions are simplified and serialized per spec. CSS calc simplification is a kind of constant folding which evaluates the css calculation tree to the extent possible at parse time so that evaluation at computed/used-value time can be reduced. The simplified result is serialized according to spec.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS anchor positioning remembered scroll offset

Add support for the concept of "remembered scroll offset" - see https://drafts.csswg.org/css-anchor-position-1/#scroll When a positioned element has a default anchor, and is tethered to this anchor at one edge, and against the original containing block at the other edge, the scroll offset will be taken into account when it comes to sizing the element. This way a developer can use all visible space (using `position-area`) for the anchored element when the document is scrolled at a given scroll offset. In order to avoid layout (resizing the element) every time the document is scrolled (which is

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS font-synthesis property

The font-synthesis CSS property controls whether user agents are allowed to synthesize oblique, bold and small-caps font faces when a font family lacks oblique, bold and small-caps faces, respectively.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS font-variant-position property

The font-variant-position CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS line-clamp property

Allows clamping a block element to have at most a specific number of text lines, or to have as many lines as will fit in a certain height, showing an ellipsis at the end of the last line. This allows showing a small preview of a longer text, purely in CSS, in a simpler way than was previously possible.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS line-height-step property

The CSS line-height-step property provides an ability to round the heights of line boxes to the multiple of the specified length. This property allows authors to control vertical rhythm.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS position: sticky scroll initial position into view

For the purposes of any operation targetting the scroll position of a sticky positioned element (or one of its descendants), the sticky positioned element must be considered to be positioned at its initial (non-offsetted) position. This was discussed in https://github.com/w3c/csswg-drafts/issues/1459.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CSS pseudo-class ":picture-in-picture"

Adds a CSS pseudo-class to help web developers customize the media player when videos enter and exit Picture-in-Picture.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CacheStorage Code Cache Hint

This experiment will allow participating sites to provide hints to cache_storage that full code cache should not be generated in a service worker install event. The hint will be communicated as a header on the Response being stored. This is a change to an unspecified optimization in chrome. Full code cache generation during the install event was added in M64. It is only observable indirectly through changes in timing and disk quota usage.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Canvas focus ring

Adds APIs to the canvas 2D context that make it possible to draw a focus ring around a canvas path and notify the operating system of the bounding box of the focused object for accessibility.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CanvasRenderingContext2D.getContextAttributes()

This method allows web developers to read back the ContextAttributes consumed by the platform and compare them to what were requested. Shipping this method will allow lining up with WebGL's homonymous method. [1] https://cs.chromium.org/chromium/src/third_party/blink/renderer/modules/canvas/canvas2d/canvas_rendering_context_2d.idl?l=142

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Capture all screens

Capture all the screens currently connected to the device using getAllScreensMedia(). Calling getDisplayMedia() multiple times requires multiple user gestures, burdens the user with choosing the next screen each time, and does not guarantee to the app that all the screens were selected. getAllScreensMedia() improves on all of these fronts. (As this feature has extreme privacy ramifications, it is only exposed behind the MultiScreenCaptureAllowedForUrls enterprise policy, and users are warned before recording even starts, that recording *could* start at some point. The API will only work for or

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Captured Surface Control

A Web API that allows Web applications to: 1. Forward wheel events to a captured tab. 2. Read and change the zoom level of a captured tab.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

CapturedSurfaceResolution

Expose pixel ratio of the captured surface while screensharing. This feature will help applications to conserve their system resources or adapt the quality/bandwidth trade-off according to the physical and logical resolutions of the captured surface.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Clients.get(id)

A method that gets a service worker's Client object matching a given id and returns a promise that resolves with it.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Clipboardchange event

The "clipboardchange" event fires whenever the system clipboard contents are changed either by a web app or any other system application. This allows web-apps like remote desktop clients to keep their clipboards synchronized with the system clipboard. It provides an efficient alternative to polling the clipboard(using Javascript) for changes.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Coalesce selectionchange events

This feature is not to fire selectionchange event when there is already one pending. For web developers, selectionchange event listeners will be called less often with this feature. Before this feature, every time the mutation of the selection on one target(input/textarea/document) would make the listener to be called once. Now with this feature, before the selectionchange event listner is finally called, multiple mutations of the selection on one target would make the listener to be called only once.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Color Management in Canvas

A set of new interfaces provides color management for canvas. This allows both developers and users to benefit from color gamuts beyond SRGB provided that the display is a high dynamic range display with a wide gamut.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Column wrapping for multicol

Add support for the `column-wrap` and `column-height` CSS properties, from multicol Level 2. https://drafts.csswg.org/css-multicol-2/#cwr https://drafts.csswg.org/css-multicol-2/#ch This allows for vertical column layout, or even 2D column layout. Columns can have an explicit constrained height, apart from being derived from the content-box height of the multicol container, and wrap to a new row of columns when all columns have been filled for one row, rather than creating overflowing columns in the inline direction.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Compute Pressure

The Compute Pressure API offers high-level states that represent the pressure on the system. It allows the implementation to use the right underlying hardware metrics to ensure that users can take advantage of all the processing power available to them as long as the system is not under unmanageable stress. “Pressure” is a generic term by design – at the moment it is calculated based on CPU load, but future plans include using signals from temperature and battery status, for example.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Consolidate standard and non-standard constraints under standard syntax

Chromium currently supports two different syntaxes for specifying video and audio constraints for the getUserMedia() function. The old syntax has support for one set of constraints, including several nonstandard ones, and the new syntax has support for a different set of constraints, all of which are standardized. The plan with the current nonstandard constraints is to encourage users to migrate to the new syntax and remove them once usage is very low.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Contacts API Addresses/Icons

Extends the Contacts API (https://www.chromestatus.com/feature/6511327140904960) to support requesting addresses/icons as well.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Container Timing

The Container Timing API enables monitoring when annotated sections of the DOM are displayed on screen and have finished their initial paint. A developer will have the ability to mark subsections of the DOM with the containertiming attribute (similar to elementtiming for the Element Timing API) and receive performance entries when that section has been painted for the first time. This API will allow developers to measure the timing of various components in their pages.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Content type in Resource Timing

Adds the contentType field to PerformanceResourceTiming to hold a string corresponding to the content type of the fetched resource as returned by the server.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

ContentVisibilityAutoStateChanged event

This proposal is to add an event that would fire on a content-visibility: auto element when the rendering state of the element changes due to any of the attributes that make the element relevant to the user (https://www.w3.org/TR/css-contain-2/#relevant-to-the-user)

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Controlled Frame API (available only to IWAs)

Adds a Controlled Frame API available only to Isolated Web Apps (IWAs). This work adds a new Controlled Frame API which is only available to Isolated Web Apps (IWAs). Like similarly-named APIs on other platforms, Controlled Frame allows embedding all content, even third party content that can't be embedded in <iframe>. Controlled Frame also allows controlling embedded content with a collection of API methods and events. For more info on Isolated Web Apps, see the IWA explainer: https://github.com/WICG/isolated-web-apps/blob/main/README.md

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Conversion to RGB in VideoFrame: copyTo() method

VideoFrame.copyTo() can convert pixel data to RGB pixel format Converting YUV video frames to RGB is often required for processing them in libraries like TensorFlow.js and OpenCV.js. Previously the only possible way to achieve this was rendering the frame on a canvas. Specifying VideoFrameCopyToOptions.format and VideoFrameCopyToOptions.colorSpace make it possible to convert frames to RGB pixel format by calling VideoFrame.copyTo() without having to use an extra canvas.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Creative scanning via BYOS/V1 trusted scoring signals

When a seller considers an ad for which a buyer is bidding, they verify that the ad meets the publisher's restrictions. Determining the subject of an ad - a process called creative scanning - can be slow. Sellers have historically relied on populating a creative scanning pipeline through a combination of pre-registration and by discovering ads through the bid stream. This process proves to be challenging in Protected Audience API because the auction runs in isolation, and so it can't send ads out to have them evaluated, since doing so would potentially leak information about the user's identit

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Cross App and Web Attribution Measurement

Extends the Attribution Reporting API to allow attributing conversions that happen on the web to events that happen off the browser, within other applications. The proposal here takes advantage of OS-level support for attribution. In particular, it gives the developer an option to allow events on the mobile web to be joinable with events in Android’s Privacy Sandbox, although support for other platforms could also be implemented.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Cross-frame performance timeline

This feature enables a standard way for a page which embeds content in frames to request performance timeline entries from those frames, and for the embedded site to opt-in to permitting sharing of its performance timeline entries with its embedders. This enables developers to gather whole-page performance information, and attribute performance issues to the frames in which they occur. A document-policy-based opt-in for embedded content enables embedded content to choose to share performance data without needing to explicitly coordinate JavaScript with every potential embedder.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Custom data origin in sharedStorage.createWorklet

We add support for a creating a worklet with an arbitrary data origin for accessing shared storage data, as long as that data origin has opted in for its data to be processed by the worklet script's origin and invoking context.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

DTLS ClientHello extension permutation (WebRTC)

Randomize the order of DTLS ClientHello extensions, to reduce potential ecosystem brittleness. This is a WebRTC specific follow-up to https://groups.google.com/a/chromium.org/g/blink-dev/c/bYZK81WxYBo/m/lKLrZ_P2BwAJ which launched successfully a while back. WebRTC uses DTLS (datagram TLS over UDP) multiplexed with STUN and RTP and also uses a SRTP specific extension (use_srtp defined in RFC 5764) to negotiate encryption keys. Middleboxes might expect the use_srtp flag in a certain position which changes with this feature.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Deprecate and Remove WebSQL

The Web SQL Database standard was first proposed in April 2009 and abandoned in November 2010. Gecko never implemented this feature and WebKit deprecated this feature in 2019. The W3C encouraged those needing web databases to adopt Web Storage or Indexed Database. Ever since its release, it has made it incredibly difficult to keep our users secure. SQLite was not initially designed to run malicious SQL statements, and yet with WebsQL we have to do exactly this. Having to react to a flow of stability and security issues is an unpredictable cost to the storage team. With SQLite over WASM as its

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Deprecate and remove Theora support.

Chrome will deprecate and remove support for the Theora video codec in desktop Chrome due to emerging security risks. Theora's low (and now often incorrect) usage no longer justifies support for most users. Notes: - Zero day attacks against media codecs have spiked. - Usage has fallen below measurable levels in UKM. - The sites we manually inspected before levels dropped off were incorrectly preferring Theora over more modern codecs like VP9. - It's never been supported by Safari or Chrome on Android. - An ogv.js polyfill exists for the sites that still need Theora support. - We are not removi

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Deprecate download in ad frames without user gesture

We plan to prevent downloads initiated from ad frames that lack a user gesture ('drive-by downloads'). Removal is expected in Chrome 76.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Deprecate the `document.domain` setter.

The `document.domain` setter allows developers to relax the same-origin policy, complicating the fundamental security boundary we aim to maintain, and putting roadblocks in the way of post-Spectre changes to Chromium's process model. We should deprecate it, by making it opt-in via `Origin-keyed agent clusters` (https://chromestatus.com/features/5683766104162304) The setter will remain, but the origin remains unchanged. In that case the compatibility risk is low.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Deprecate unload event

A Permission-Policy for creating unload event listeners will be added. Initially the default policy will be to allow but Chrome will gradually migrate the default policy to deny creating unload event listeners until it is fully opt-in. The eventual goal is to remove support for unload event.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Deprecation of GCM-based Web Push Subscriptions

Chrome introduced Web Push Notifications in M42, based on proprietary GCM authentication that requires people to create a Google Cloud Project ID. A year later, in M52, we improved this by launching support for VAPID, a mechanism that continues to striclty associate messages with a particular sender, but no longer relies on proprietary mechanisms for obtaining that identifier. We intent to only support VAPID going forward.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Device Bound Session Credentials

To enhance user security and combat session cookie theft, Chrome is introducing [Device Bound Session Credentials (DBSC)](https://developer.chrome.com/docs/web-platform/device-bound-session-credentials). This feature allows websites to bind a user's session to their specific device, which makes it significantly more difficult for stolen session cookies to be used on other machines.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

DeviceOrientation Events permission request API

Allows web developers to call Device{Motion,Orientation}Event.requestPermission() to ask the user agent for device orientation and motion data to be shared with the page. Those two static methods return a promise that resolves to either "granted" or "denied" based on whether the user has allowed the user agent to share sensor data with pages.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Digital Credentials API (presentation support)

Websites can and do get credentials from mobile wallet apps through a variety of mechanisms today (custom URL handlers, QR code scanning, etc.). This Web Platform feature would allow sites to request identity information from wallets via Android's IdentityCredential CredMan system. It is extensible to support multiple credential formats (eg. ISO mDoc and W3C verifiable credential) and allows multiple wallet apps to be used. Mechanisms are being added to help reduce the risk of ecosystem-scale abuse of real-world identity (see https://docs.google.com/document/u/1/d/1L68tmNXCQXucsCV8eS8CBd_F9FZ6

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Dispatch selectionchange event per element

Dispatches selectionchange event per element when this element(input/textarea) provides a text selection or its selection changes. This is to match the latest specification of selectionchange event. This also matches Safari behavior.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Dispatching click events to captured pointer

If a pointer is captured while the `pointerup` event is being dispatched, the `click` event will be dispatched to the captured target instead of the nearest common ancestor of `pointerdown` and `pointerup` events as per the UI Event spec. For uncaptured pointers, the `click` target remains unchanged.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Display and content-visibility animations

Support specifying display and content-visibility in animations. This support allows for developers to create exit animations after which the element automatically becomes display: none or content-visibility: hidden without needing to write any javascript to handle that switch after the animation is finished. This allows exit animations for elements to be added purely in CSS.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Display-Capture Capability Delegation

This feature is based on the general delegation mechanism (https://chromestatus.com/feature/5708770829139968) shipped on M100. Display-Capture Capability Delegation allows a Window to transfer the ability to call navigator.mediaDevices.getDisplayMedia() to another Window it trusts after relinquishing the transient user activation at the sender Window.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Document Policy

Document Policy is a mechanism to allow documents to configure the web platform on which they operate: restricting certain behaviors or APIs, configuring defaults, or enabling new platform features. It also includes a way for documents to require such restrictions on sub-documents embedded in iframes. (The actual capabilities are intentionally vague here; this is a framework for individual features to be defined in, rather than being a set of concrete features itself)

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Document picture-in-picture: copy document mode

This makes the document picture-in-picture Document's mode (quirks mode vs no-quirks-mode) match the mode of the opener Document. Currently, the empty document is quirks mode by default, so this allows websites that rely on non-quirks mode to still function properly within a document picture-in-picture window.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Document-Isolation-Policy

Document-Isolation-Policy allows a document to enable crossOriginIsolation for itself, without having to deploy COOP or COEP, and regardless of the crossOriginIsolation status of the page. The policy is backed by process isolation. Additionally, the document non-CORS cross-origin subresources will either be loaded without credentials or will need to have a CORP header.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

EXT_disjoint_timer_query WebGL extension

This WebGL extension, exposing the underlying OpenGL ES functionality, allows developers to measure the duration of the commands they submit to the graphics processor. This will allow the development of additional tools to help developers make their WebGL code run faster.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Ed25519 in Web Cryptography

This feature adds support for Curve25519 algorithms in the Web Cryptography API, namely the signature algorithm Ed25519

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Element Capture

API for capturing a subtree of the DOM. Given a video MediaStreamTrack obtained through pre-existing means to initiate tab-capture, Element Capture allows mutating the track to only capture a subtree of the DOM starting at a given Element. The API bears some resemblance to the Region Capture API, but affords greater flexibility for applications, because occluding and occluded content are both excluded from the capture.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Element.computedRole and Element.computedName

Retrieve the computed accessible role and name for the element, if any.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Enable clipboard access via Async Clipboard API in event handlers

This change removes the requirement for the "clipboard-read" permission when using the Async Clipboard API from within a "paste" event handler. It also applies to writing to the clipboard inside a "copy" or "cut" event, although writing plain text to the clipboard was already permitted on ANY user gesture, so this is a less notable change. Browser vendors differ in the details of how they permit access to the Async Clipboard API, but this change brings Chromium into alignment with other vendors and the specification [1] which states that read access is to be permitted when > the current script

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Enabling Web Applications to understand bimodal performance timings

Web applications may suffer from bimodal distribution in page load performance due to factors outside of the application’s control. For example, when a user agent first launches in a "cold start" scenario, it must perform many expensive initialization tasks that compete for system resources. Browser extensions can also affect performance, since some extensions run additional code on every page you visit, increasing CPU usage and slowing response times. Likewise, when a machine is already busy with intensive tasks, web pages may load more slowly as a result. In these scenarios, content the web

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Expose AudioBuffer to DedicatedWorker

This feature expands the exposure of the WebAudio AudioBuffer interface to include DedicatedWorker. Previously, this interface was only exposed to Window. The immediate use case is to enable use of WebCodecs AudioEncoder from DedicatedWorker. WebCodecs will use AudoBuffer to represent raw (uncompressed) audio. The buffer may be wrapped in an AudioFrame and fed as input to an AudioEncoder, all within a DedicatedWorker.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Expose PaymentManager on workers

Though Web IDL specification removed [PrimaryGlobal] and made [Exposed] required, many blink's IDL files have not followed it yet. In payment_manager.idl case, the spec has added [Exposed=Window,Worker] as well. So, this will make PaymentManager visible on workers according to the updated specification.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Expose coarsened cross-origin renderTime in elment timing/LCP (regardless of TAO)

All element-timing and LCP performance entries would have a non-zero renderTime, even if they are cross-origin without Timing-Allow-Origin. All presentation timestamps (renderTime, paint timing start time, event timing end time) will be coarsened to a 4ms multiple to mitigate the risk of reading cross-origin image information.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Face Detection API

The Face Detection API is a subset of the Shape Detection API which provides the ability to detect human faces and facial landmarks in an image provided by script. The image may come from any type of image buffer source such as an <image>, <video> or <canvas> tag.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Face-Framing

Some platforms or User Agents may provide built-in support for automatic continuous framing based on the position of human faces within the field of view, in particular for camera video streams. Web applications may either want to control or at least be aware that automatic continuous human face framing is applied at the source level. This may for instance allow the web application to update its UI or to not apply human face framing on its own.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status

Feature Policy violation reporting

Enable reporting of feature policy violations through the Reporting API.

Baseline 미도달 · 실험/예정 단계 · 출처 Chrome Status