Webmasters Gallery

I often wonder what it’s like working for the Chrome team. You must get issued some sort of government-level security clearance for the latest browser builds that grants you permission to bash on them ahead of everyone else and come up with these rad demos showing off the latest features. No, I’m, not jealous, why are you asking?

Totally unrelated, did you see the release notes for Chrome 133? It’s currently in beta, but the Chrome team has been publishing a slew of new articles with pretty incredible demos that are tough to ignore. I figured I’d round those up in one place.

attr() for the masses!

We’ve been able to use HTML attributes in CSS for some time now, but it’s been relegated to the content property and only parsed strings.

<h1 data-color="orange">Some text</h1>

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

Bramus demonstrates how we can now use it on any CSS property, including custom properties, in Chrome 133. So, for example, we can take the attribute’s value and put it to use on the element’s color property:

h1 {
  color: attr(data-color type(<color>), #fff)
}

This is a trite example, of course. But it helps illustrate that there are three moving pieces here:

1. the attribute (data-color)
2. the type (type())
3. the fallback value (#fff)

We make up the attribute. It’s nice to have a wildcard we can insert into the markup and hook into for styling. The type() is a new deal that helps CSS know what sort of value it’s working with. If we had been working with a numeric value instead, we could ditch that in favor of something less verbose. For example, let’s say we’re using an attribute for the element’s font size:

<div data-size="20">Some text</div>

Now we can hook into the data-size attribute and use the assigned value to set the element’s font-size property, based in px units:

h1 {
  color: attr(data-size px, 16);
}

The fallback value is optional and might not be necessary depending on your use case.

Scroll states in container queries!

This is a mind-blowing one. If you’ve ever wanted a way to style a sticky element when it’s in a “stuck” state, then you already know how cool it is to have something like this. Adam Argyle takes the classic pattern of an alphabetical list and applies styles to the letter heading when it sticks to the top of the viewport. The same is true of elements with scroll snapping and elements that are scrolling containers.

In other words, we can style elements when they are “stuck”, when they are “snapped”, and when they are “scrollable”.

Quick little example that you’ll want to open in a Chromium browser:

The general idea (and that’s all I know for now) is that we register a container… you know, a container that we can query. We give that container a container-type that is set to the type of scrolling we’re working with. In this case, we’re working with sticky positioning where the element “sticks” to the top of the page.

.sticky-nav {
  container-type: scroll-state;
}

A container can’t query itself, so that basically has to be a wrapper around the element we want to stick. Menus are a little funny because we have the