What's New in Chrome 142: Enhanced CSS and Interactive Elements

Chrome 142 is now rolling out, bringing several key features for developers. This update introduces new CSS pseudo-classes for scroll markers, extends CSS style queries and the if() function with range syntax, and introduces the interestfor attribute for interactive elements.

CSS ::target-before and ::target-after Pseudo-classes

These new pseudo-classes provide more granular control over scroll markers. They match scroll markers that are positioned before or after the currently active marker (::target-current) within the same scroll marker group, based on their flat tree order.

• ::target-before: Matches all scroll markers that precede the active marker in the flat tree order within their group.
• ::target-after: Matches all scroll markers that follow the active marker in the flat tree order within their group.

Range Syntax for CSS Style Container Queries and if() Function

Chrome 142 enhances CSS style queries and the if() function by incorporating support for range syntax. This extends style queries beyond simple exact value matching (e.g., style(--theme: dark)), allowing developers to use comparison operators such as > and <.

Developers can now compare custom properties, literal values (e.g., 10px, 25%), and values derived from substitution functions like attr() and env(). For a valid comparison, both sides must resolve to the same numeric data type. Supported types include <length>, <number>, <percentage>, <angle>, <time>, <frequency>, and <resolution>.

Examples of Range Syntax:

• Comparing a custom property against a literal length:

  @container style(--inner-padding > 1em) {
    .card {
      border: 2px solid;
    }
  }
  

• Comparing two literal values:

  @container style(1em < 20px) {
    /* ... */
  }
  

• Using style ranges within if():

  .item-grid {
    background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
  }
  

interestfor Attribute for Interactive Elements

Chrome 142 introduces the interestfor attribute, applicable to <button> and <a> elements. This attribute enables "interest" behaviors, triggering specific actions on a target element when a user demonstrates interest. For instance, it can be used to show a popover.

The user agent detects user interest through various methods, including hovering a pointer over the element, using special keyboard hotkeys, or long-pressing on touchscreens. An InterestEvent is fired on the target element when interest is shown or lost, with default actions for popovers such as showing and hiding.