Limited Availability
30 featuresAnchor positioning places an element based on the position of another element. For example, you can place a tooltip next to the content it references.
The <select> element's appearance, including the button, selected option, picker dropdown, and options, can be customized using CSS.
The ReadableStream.from() static method converts an iterable or async iterable object, such as an array or async generator function, into a readable stream.
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.
The OTPCredential API represents a one-time-password (OTP).
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.
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.
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.
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.
The Connection-Allowlist HTTP response header limits which requests a page may initiate using fetch and other APIs.
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.
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.
An interaction-contentful-paint performance entry measures the duration of an interaction that causes one or more contentful paints. You can use it to measure LCP for soft navigations in single page apps.
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.
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.
The picture-in-picture API allow websites to create a floating, always-on-top video window. Also known as PiP or pop-out video.
Module import … with { type: "text" } statements load text data as a string value.
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.
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.
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.
The scroll(), scrollBy(), scrollTo(), and scrollIntoView() methods on the Element and Window interfaces return Promises that resolve when scrolling completes.
The background-clip: border-area CSS declaration draws the background underneath only the border of an element.
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.
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.
The url() CSS function accepts an integrity() modifier to use subresource integrity to verify the response from the requested 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.
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.
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.
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.