Chrome 105 is released, bringing :modal and :has() pseudo-classes

Produced | OSC Open Source Community (ID: oschina2013)

Chrome 105 is out. This version brings 25 new features and 24 known security fixes. The new features are as follows:

“blocking=rendering” attribute on scripts and style sheets

Allows putting ‘blocking=render’ as a property and value in a <script>, <style> or stylesheet <link> to make it explicitly render blocking. The main use is to avoid unstyled content due to eg inserted scripts/stylesheets, client-side A/B testing, etc., or user interaction with immature pages.

:has() pseudo-class

The :has() pseudo-class is a selector that specifies an element that has at least one element that matches the relative selector passed as an argument. The :has pseudo-class provides a way to apply style rules to the preceding elements (preceding siblings/ancestors/preceding siblings of ancestors) of a particular element.

Add onbeforeinput global event handler content property

The ‘beforeinput’ event fires when the value of an <input>, <textarea> or contenteditable element is about to be modified. Add an ‘onbeforeinput’ global content property to make it easier for developers to use.

Align timers at 125 Hz (including DOM timers)

On a regular 8ms aligned wakeup (125 Hz), run all timers with a non-zero delay (with a few exceptions), rather than immediately after the delay has elapsed. This affects the DOM timer;

• On foreground pages, run a DOM timer with a non-zero delay on the regular 8ms alignment wakeup, rather than immediately after the delay has elapsed.

• On background pages, the DOM timer already runs on the regular 1 second alignment wakeup (1 Hz), or more frequently after 5 minutes.

CSS :modal pseudo-class

Pseudo-class selector for styling dialog elements. The :modal pseudo-class represents an element that is in a state that excludes all interaction with elements other than it until it is dismissed.

CSS default keywords are not allowed in custom identifiers

The CSS keyword “default” is not allowed in CSS custom identifiers, which are used for many types of user-defined names in CSS (for example, names created by @keyframes rules, counters, @container names, custom layouts, or drawing name).

This adds “default” to the list of names reserved for custom identifiers, which are already reserved: “inherit”, “initial”, “unset”, “revert”, and “revert-layer”.

Container query

Container queries allow authors to style elements based on the size of the container element. It is similar to the @media query, except that it is evaluated against the size of the container instead of the size of the viewport.

NavigationEvent.scroll()

scroll() works much like the existing restoreScroll() except that it can be called when navigating instead of traversing. It allows manual scrolling even when not in manual scrolling mode.

fetch() upload stream

Getting the upload stream allows web developers to get it using the ReadableStream body. Fetch provides generic definitions for Request and Response objects (and other things related to network requests).

Gesture scroll DOM events

Gesture Scroll DOM events, namely “gesturescrollstart”, “gesturescrollupdate” and “gesturescrollend”, which are non-standard APIs, were added to Blink for use with plugins. Currently, this API does not work in all situations. It only works when there are non-synthetic scroll bars.

In addition, there are functional changes such as deprecating WebSQL and removing it from non-secure contexts. Other new features can be viewed on the features page: https://ift.tt/I7yvUAL

Security fixes can be viewed in the Chrome release blog:

The text and pictures in this article are from the OSC open source community