'Google Chrome 105' stable release, convenient functions for web UI development are installed one after another

directly out of the element containing */
div: has(> img) {
background-color: black;
}
[/code]

:modal is enabled for elements that are in a state that precludes all interaction with external elements during their existence (ie dialogic elements).
[code]
:modal {
border: 5px solid red;
background-color: yellow;
box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}
[/code]

Add onbeforeinput global content attribute
The beforeinput event is an event that occurs when the value of an element such as <input>, <select>, or <textarea> is about to change, and can be detected by using the addEventListener() method. new this time
[code]
element.onbeforeinput = ...
[/code]

It can be said that the difficulty of use has decreased. by the way,
[code]
document.documentElement.onbeforeinput === null
[/code]

It is also possible to test whether the browser supports 'beforeinput' by checking

◆@container query
Added @container query to allow styling according to the size of container elements. Similar to this is the @media query , except that the @media query evaluates the size of the viewport, while the @container query evaluates the size of the container as mentioned above.

◆ 'blocking=rendering' attribute
You can now specify rendering blocking by placing 'blocking=render' as an attribute and value on <script>, <style>, and <link> tags. This makes it possible for developers to explicitly prevent Flash of Unstyled Contents (FOUC) .

fetch() upload streaming
By using fetch() upload streaming, byte array upload can be implemented without complex coding with WebSockets.

◆ Sanitizer API MVP
An easy-to-use and secure HTML Sanitizer API is now provided by default. Developers can use this API to remove user input that could run scripts from arbitrary HTML content. The implementation of the HTML Sanitizer API is divided into the 'Sanitizer API MVP' provided this time and the 'Sanitizer API' that will be provided in the future, and only the most basic Element.setHTML() is implemented in MVP. .

◆Improved navigateEvent
Two methods have been added to replace the existing methods of navigateEvent, which had practical problems. Intercept() gives developers control over the post-navigation state, and works very similarly to the existing transitionWhile() method, but instead of receiving a required Promise, it accepts an optional handler function , which improves usability and eliminates navigation end delays. scroll() scrolls to the anchor specified in the URL and works very much like the existing restoreScroll() but can be called when the navigation is not traversal. You can also perform manual scrolling even if you are not in manual scrolling mode. Note that transitionWhile() and restoreScroll(), which were replaced, are deprecated from this release and will be removed in Chrome 108.

Overlay window controls over desktop web apps
When window control overlays are enabled for an installed desktop web app, the app's client area extends to cover the entire window, including the title bar area, and the window control buttons (close/maximize/ restore/minimize) are overlaid. Developers can use this feature to make installed desktop web apps look like native apps.

◆Others
・DisplayMediaStreamConstraints.systemAudio hint
・Publish the TransformStreamDefaultController class
・Add import.meta.resolve() method
・Media Source Extensions (MSE) API can be used from worker context
More accurate screen label strings provided by the Multi-Screen Window Placement API
・Prevent overscrolling of fixed elements
・Addition of Response.json() method
Changed syntax for delegating markup-based client hints
・Viewport-height client hint
Changed so that a single call to the file system access API can return a directory with both read and write permissions.


In addition, 'Google Chrome 105' includes 24 security bug fixes .

The next stable version of 'Google Chrome 106' is scheduled to be released on September 27, 2022, local time.