Chrome 133 Goodies

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(<color>))
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 <nav> element and usually stuff it with an unordered list of links. So, our <nav> can be the container we query since we’re effectively sticking an unordered list to the top of the page.

<nav class="sticky-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

We can put the sticky logic directly on the <nav> since it’s technically holding what gets stuck:

.sticky-nav {
  container-type: scroll-state; /* set a scroll container query */
  position: sticky; /* set sticky positioning */
  top: 0; /* stick to the top of the page */
}

I supposed we could use the container shorthand if we were working with multiple containers and needed to distinguish one from another with a container-name. Either way, now that we’ve defined a container, we can query it using @container! In this case, we declare the type of container we’re querying:

@container scroll-state() { }

And we tell it the state we’re looking for:

@container scroll-state(stuck: top) {

If we were working with a sticky footer instead of a menu, then we could say stuck: bottom instead. But the kicker is that once the <nav> element sticks to the top, we get to apply styles to it in the @container block, like so:

.sticky-nav {
  border-radius: 12px;
  container-type: scroll-state;
  position: sticky;
  top: 0;

  /* When the nav is in a "stuck" state */
  @container scroll-state(stuck: top) {
    border-radius: 0;
    box-shadow: 0 3px 10px hsl(0 0 0 / .25);
    width: 100%;
  }
}

It seems to work when nesting other selectors in there. So, for example, we can change the links in the menu when the navigation is in its stuck state:

.sticky-nav {
  /* Same as before */

  a {
    color: #000;
    font-size: 1rem;
  }

  /* When the nav is in a "stuck" state */
  @container scroll-state(stuck: top) {
    /* Same as before */

    a {
      color: orangered;
      font-size: 1.5rem;
    }
  }
}

---

So, yeah. As I was saying, it must be pretty cool to be on the Chrome developer team and get ahead of stuff like this, as it’s released. Big ol’ thanks to Bramus and Adam for consistently cluing us in on what’s new and doing the great work it takes to come up with such amazing demos to show things off.

---

Chrome 133 Goodies originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

from CSS-Tricks https://ift.tt/h1i9cgb
via IFTTT