📃 July 2022 release notes

Widely available

The following features are now 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.
• 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.
• 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.
• Autonomous custom elements: Autonomous custom elements are HTML elements with a hyphenated tag name (like <example-element>) that have behaviors you define.
• 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.
• <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.
• 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.
• caret-color: The caret-color CSS property sets the color of the text insertion pointer in a text input.
• 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.
• COLRv0: COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors.
• 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.
• 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.
• :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.
• Destructuring: The destructuring assignment syntax is a JavaScript expression that unpacks values from arrays, or properties from objects, into distinct variables.
• <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.
• 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.
• DOM Geometry: The DOMMatrix, DOMPoint, DOMQuad and DOMRect interfaces offer a way to represent points, rectangles, quadrilaterals and transformation matrices within JavaScript. They can be used in transformations in CSS, <canvas>, and SVG.
• 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.
• <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.
• 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.
• :focus-within: The :focus-within CSS pseudo-class matches an element if the element or any of its children are focused.
• 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-kerning: The font-kerning CSS property sets whether kerning data from a font is used to adjust the space between letters.
• Font loading: The document.fonts API dynamically loads custom fonts and tracks when fonts are loading or ready to use.
• 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-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.
• globalThis: The globalThis property accesses the global this value (and hence the global object itself) across environments.
• 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.
• HSL: The hsl() and hsla() CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels.
• 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.
• :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.
• Input events: The input event fires when a form control changes or an element with the contenteditable attribute changes.
• isolation: The isolation CSS property creates a new stacking context, which impacts z-index ordering and blend modes.
• 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 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.
• <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 selectors: The :link CSS pseudo-class matches unvisited links, :visited matches visited links, and :any-link matches both.
• mask-type: The mask-type CSS property on an SVG <mask> element sets whether the mask is a luminance or alpha mask.
• 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.
• 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.
• 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.
• Optional catch binding: Omit the the binding parameter of a catch clause when you don't need information about the exception in a try ... catch statement.
• ::placeholder: The ::placeholder CSS pseudo-element selects help text in <input> and <textarea> elements when no value is set.
• :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.
• prefers-color-scheme media query: The prefers-color-scheme CSS media query sets styles based on the requested color scheme, light or dark.
• 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.
• RGB: The rgb(), rgba(), and hexadecimal (as in #004488ff`) notations pick colors using red, green, blue, and alpha (transparency) channels.
• 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.
• :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.
• Scroll snap: CSS scroll snap controls the panning and scrolling behavior within a scroll container.
• Server-sent events: The EventSource API creates a connection to a server and listens to a stream of events sent by the server.
• 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.
• 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(), polygon(), rect(), and xywh() CSS shape functions create shapes for use with clip-path and shape-outside.
• <slot>: The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.
• SMIL SVG animations: The <animate>, <animateMotion>, and <animateTransform> SVG elements declaratively animate SVG elements. Also known as SMIL.
• 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.
• 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 matchAll(): The matchAll() method of strings matches a string against a regular expression and returns an iterator of all results, including capturing groups.
• 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.
• SVG: The SVG image format, represented by the <svg> element, creates two-dimensional vector graphics with declarative or scripted interaction and animation.
• 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.
• 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.
• 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().
• WebRTC: The WebRTC API establishes real-time communication channels directly between browsers. It is commonly used in video conferencing applications.
• 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.
• WebVTT cue settings: The VTTCue API updates various aspects of cues dynamically, such as alignment, size and position.
• 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.