Other developer features in this release include:
ARIA Annotations: New ARIA annotations support screen reader accessibility for comments, suggestions, and text highlights with semantic meanings (similar to <mark>). Additionally, related information can now be tied semantically to an element allowing descriptions, definitions, footnotes, and comments to be tied to another element.
‘auto’ keyword for ‘-webkit-appearance’ CSS property: The -webkit-appearance CSS property has a new auto keyword, which indicates the default appearance of the target element. This is a step on the way to replacing the nonstandard -webkit-appearance property with a future fully standardized appearance property.
Barcode Detection API: Chrome now supports the Barcode Detection API, a subset of the Shape Detection API which provides the ability to detect and decode barcodes in an image provided by a script. The image may come from any type of image buffer source such as an <image>, <video>, or <canvas>tag. Previously, supporting barcode detection on a web page required inclusion of a large third-party library. This API is only available on devices with Google Play Services installed and is not available on uncertified devices.
CSS contain-intrinsic-size: The contain-intrinsic-size property allows developers to specify a placeholder size which would be used while contain: size is applied. With contain-intrinsic-size specified, elements lay out as if they had a single child with fixed size, the one specified by this property, unless they have an explicit width/height. The motivation for the property is to provide a placeholder sizing for subtree content which is either not yet available or not rendered. There was previously no way to provide this other than sizing the element itself which may not be desirable as it affects how the element lays out in its container. Examples are available from the WICG.
CSS Color Adjust: Many operating systems now have a “dark mode” preference. Some browsers already offer an option to transform web pages into a dark theme. The prefers-color-scheme media query lets authors support their own dark theme so they have full control over experiences they build. The meta tag lets a site explicitly opt-in to fully supporting a dark theme so that the browser loads a different user agent sheet and not ever apply transformations.
display:inline-grid/grid/inline-flex/flex for <button>: The display keywords inline-grid, grid, inline-flex, and flex now function with the <button>element when the align property is applied. (Demo)
Improvements to font-display: A few changes have been made to the way font-display works on Chrome. Setting font-display to optional no longer causes relayout. Web font preloading is allowed to slightly block rendering (for all font-display values), so that if the font loads fast enough, Chrome doesn’t need to render with fallback.
IndexedDB relaxed durability transactions: IDBDatabase.transaction() now accepts an optional durability argument to control flushing of data to storage. This allows developers to explicitly trade off durability for performance. Previously after writing an IndexedDB transaction, Firefox did not flush to disk but Chrome did. This provided increased durability by guaranteeing that data is written to the device’s disk rather than merely to an intermediate OS cache. Unfortunately, this comes with a significant performance cost. Valid options are "default", "strict", and "relaxed". The "default" option uses whatever behavior is provided by the user agent and is currently the default. An example is shown below. The current value may be read using IDBTransaction.durability.
Out-Of-Renderer Cross-Origin Resource Sharing: Out-Of-Renderer Cross-Origin Resource Sharing (OOR-CORS) is a new CORS implementation that inspects network accesses. Chrome’s previous CORS implementation was only available to Blink core parts, XHR, and Fetch APIs, while a simplified implementation was used in other parts of the application. HTTP requests made by some internal modules could not be inspected for CORS at all. The new implementation addresses these shortcomings.
Reversed range for <input type=time>: Chrome now supports reversed ranges for <input> elements whose type is time, allowing developers to express time inputs that cross midnight. A reversed range is one where the maximum is less than the minimum. In this state, the input allows values that are less than the minimum or greater than the maximum, but not between them. This functionality has been in the specification for many years, but has not yet been implemented in Chrome.
Support “JIS-B5” and “JIS-B4” @page: Chrome now supports two page sizes for the @page rule, both listed in the CSS Paged Media Module Level 3 spec.
@supports selector() feature query function: The new @supports function provides feature detection for CSS selectors. Web authors can use this feature to query whether the UA supports the selector before they actually try to apply the specified style rules matching the selector.
RTCPeerConnection.canTrickleIceCandidates: The canTrickleIceCandidatesboolean property indicates whether a remote peer is capable of handling trickle candidates. It exposes information from the SDP session description.
RTCRtpEncodingParameters.maxFramerate: This encoding parameter allows developers to limit the framerate on a video layer before sending. Use RTCRtpSender.setParameters() to set the new framerate, which takes effect after the current picture is complete. Read it back using RTCRtpEncodingParameters.maxFramerate. Setting maxFramerate to 0 freezes the video on the next frame.
RTCRtpSendParameters.degradationPreference: A new attribute for RTCRtpSendParameters called degradationPreference allows developers to control how quality degrades when constraints such as bandwidth or CPU prevent encoding at the configured frame rate and resolution. For example, on a screen share app, users will probably prefer screen legibility over animations. On a video conference users likely prefer a smooth frame rate over a higher resolution. Valid values for degradationPreference are "maintain-framerate", "maintain-resolution", and "balanced".
WebXR DOM Overlay: DOM overlay is a feature for immersive AR on handheld devices that lets two-dimensional page content be shown as an interactive transparent layer on top of the WebXR content and camera image. With this feature, developers can use the DOM to create user interfaces for WebXR experiences. For VR, inline sessions are by definition within the DOM. For AR, though, there is no inline mode, making this particularly important for certain use cases. To try the feature, use one of the two samples in Chrome 83. This feature is currently only available on ARCore-based handheld devices.
For a full rundown of what’s new, check out the Chrome 83 milestone hotlist.