July 2022 web platform update

Now widely available on the web platform

Widely available

• 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. Learn more.

• 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. Learn more.

• Async generators: Async generator functions (async function*) create iterators that return multiple promises, one after another, on-demand. Learn more.

• 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. Learn more.

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

• 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. Learn more.

• <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. Learn more.

• 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. Learn more.

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

• 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. Learn more.

• COLRv0: COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors. Learn more.

• 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. Learn more.

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

• 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. Learn more.

• :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. Learn more.

• <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. Learn more.

• 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. Learn more.

• 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. Learn more.

• <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. Learn more.

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

• 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. Learn more.

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

• Font loading: The document.fonts API dynamically loads custom fonts and tracks when fonts are loading or ready to use. Learn more.

• 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. Learn more.

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

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

• 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. Learn more.

• 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. Learn more.

• HSL: The hsl() and hsla() CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels. Learn more.

• 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. Learn more.

• :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. Learn more.

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

• 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. Learn more.

• Link selectors: The :link CSS pseudo-class matches unvisited links, :visited matches visited links, and :any-link matches both. Learn more.

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

• min-content and max-content: The min-content and max-content CSS keywords represent the smallest and largest intrinsic sizes of an element. Learn more.

• 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. Learn more.

• object-fit: The object-fit CSS property sets how images, videos, and other replaced elements are scaled within their container. Learn more.

• object-position: The object-position CSS property places images, videos, and other replaced elements within their boxes. Learn more.

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

• :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. Learn more.

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

• 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. Learn more.

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

• 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. Learn more.

• :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. Learn more.

• Scroll snap: CSS scroll snap controls the panning and scrolling behavior within a scroll container. Learn more.

• Server-sent events: The EventSource API creates a connection to a server and listens to a stream of events sent by the server. Learn more.

• 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. Learn more.

• shape-outside: The shape-outside CSS property, along with shape-margin and shape-image-threshold, sets the shape around which adjacent content will wrap. Learn more.

• shapes: The circle(), ellipse(), inset(), polygon(), rect(), and xywh() CSS shape functions create shapes for use with clip-path and shape-outside. Learn more.

• <slot>: The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup. Learn more.

• SMIL SVG animations: The <animate>, <animateMotion>, and <animateTransform> SVG elements declaratively animate SVG elements. Also known as SMIL. Learn more.

• 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. Learn more.

• Stable array sort: Stable array sort() function Learn more.

• String matchAll(): The matchAll() method of strings matches a string against a regular expression and returns an iterator of all results, including capturing groups. Learn more.

• 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. Learn more.

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

• 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(). Learn more.

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

• 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. Learn more.

Newly available on the web platform

Newly available

• 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. Learn more.