New in Chrome 133

Rachel Andrew

Here's what you need to know:

CSS advanced attr() function allows types besides <string> and use in all CSS properties.
CSS scroll state container queries let you use container queries to style descendants of containers based on their scroll state.
CSS text-box, text-box-trim, and text-box-edge make finer control of vertical alignment of text possible
And there's plenty more.

CSS advanced `attr()` function

This feature adds to the existing attr() function, features specified in CSS Level 5. This allows types besides <string> and use in all CSS properties (in addition to the existing support for the pseudo-element content).

In the following example the value of the color property for div uses the value from the data-color attribute. This attribute value is parsed into a <color> using attr() and type(). The fallback value is set to red.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

Learn more in CSS attr() gets an upgrade.

CSS scroll state container queries

Use container queries to style descendants of containers based on their scroll state.

The query container is either a scroll container, or an element affected by the scroll position of a scroll container. The following states can be queried:

stuck: A sticky positioned container is stuck to one of the edges of the scroll box.
snapped: A scroll snap aligned container is currently snapped horizontally or vertically.
scrollable: Whether a scroll container can be scrolled in a queried direction.

A new container-type: scroll-state lets containers be queried. For example:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

Learn more and see some demos in CSS scroll state queries.

CSS `text-box`, `text-box-trim`, and `text-box-edge`

The text-box-trim property specifies the sides to trim, above or below, and the text-box-edge property specifies how the edge should be trimmed.

These properties let you control vertical spacing precisely by using the font metrics.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Find out how to use these new properties in CSS text-box-trim.

And more!

Of course there's plenty more.

Animation.overallProgressgives you a convenient and consistent representation of how far along an animation has advanced across its iterations and regardless of the nature of its timeline.
Node.prototype.moveBefore lets you move elements around a DOM tree, without resetting the element's state.
The FileSystemObserver interface notifies websites of changes to the file system.
The PublicKeyCredential getClientCapabilities() method lets you determine which WebAuthn features are supported by the user's client.

See the full Chrome 133 release notes for details of these and many other features that are New in Chrome!

New in Chrome 133

CSS advanced attr() function

CSS scroll state container queries

CSS text-box, text-box-trim, and text-box-edge

And more!

Further reading

Subscribe

CSS advanced `attr()` function

CSS `text-box`, `text-box-trim`, and `text-box-edge`