Chrome 105 New Features: Blocking Rendering, :has() Selector, onbeforeinput Event, 125 Hz Timer Alignment, CSS :modal, Identifier Restrictions, Container Queries, Scroll & Fetch Enhancements, Gesture‑Scroll Events

Chrome 105 New Features

Chrome 105 has been released, bringing 25 new features and 24 known security fixes.

blocking=rendering attribute on scripts and stylesheets

Allows the attribute/value blocking=render to be placed on <script> , <style> or <link rel="stylesheet"> to explicitly block rendering. It helps avoid unstyled content caused by inserted scripts/styles, client‑side A/B testing, or premature user interaction.

:has() pseudo‑class

The :has() pseudo‑class selects an element that has at least one descendant matching the selector passed as its argument, enabling styles to be applied to preceding elements such as previous siblings, ancestors, or ancestors’ previous siblings.

Add onbeforeinput global event handler attribute

The beforeinput event fires on <input> , <textarea> or contenteditable elements just before their value changes. Adding a global onbeforeinput attribute makes it easier for developers to use this event.

Align timers to 125 Hz (including DOM timers)

All timers with a non‑zero delay now run on the regular 8 ms aligned wake‑up (125 Hz) instead of executing immediately after the delay expires. This affects DOM timers.

On foreground pages, DOM timers run on the regular 8 ms aligned wake‑up with non‑zero delay.

On background pages, DOM timers already run on the regular 1 s aligned wake‑up (1 Hz) or more frequently after five minutes.

CSS :modal pseudo‑class

The :modal pseudo‑class is used to style dialog elements. It represents an element that is in a state that excludes interaction with all other elements until it is dismissed.

Custom identifiers cannot use the CSS keyword “default”

The CSS keyword default is now reserved and cannot be used in custom identifiers such as names created by @keyframes , counters, @container names, custom layout or paint names. The reserved list now includes inherit , initial , unset , revert , and revert-layer .

Container queries

Container queries allow authors to style elements based on the size of their container, similar to @media queries but evaluated against the container rather than the viewport.

Navigation event scroll()

The scroll() method works similarly to the existing restoreScroll() but can be called when navigation is not a traversal, allowing manual scrolling even when not in manual‑scroll mode.

fetch() upload stream

The fetch() API now supports uploading a ReadableStream as the request body, providing a generic definition for Request and Response objects and related network‑request features.

Gesture scroll DOM events

Gesture scroll DOM events – gesturescrollstart , gesturescrollupdate , and gesturescrollend – are non‑standard APIs added to Blink for plugins. They are currently only effective with non‑composited scrollbars.

Enjoyed the article? Liking and sharing is the greatest support!