Chrome 133 Goodies

The Chrome team's work must be exciting! Getting first-hand at the latest browser version and making cool demos to show off new features must feel great. Of course, I don't envy it at all! (You ask why?)

Back to the point, have you seen the release notes of Chrome 133? It is currently in beta, but the Chrome team has released a series of great new articles and impressive demos that are hard to ignore. I decided to put them together.

attr() Widely used functions!

We have been able to use HTML attributes in CSS for a while, but it is limited to content attributes and parses only strings.

<h1 id="Some-text">Some text</h1>

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

Bramus shows how to use it in Chrome 133 for any CSS attribute, including custom attributes. For example, we can get the value of the attribute and use it for the color attribute of the element:

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

Of course, this is a simple example. But it shows that there are three components here:

1. Properties (data-color)
2. Type (type())
3. Arbitrage value (https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffff)

Attributes are defined by ourselves. It is very convenient to be able to insert wildcards into tags and use them for style settings. type() is a new feature that helps CSS identify the type of value being processed. If we are using numeric values, we can use a more concise writing method. For example, suppose we use attributes to set the font size of an element:

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

Now we can set the font-size attribute (unit in px):

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

Arbitrage values ​​are optional and may not be required depending on your use case.

Scrolling status in container query!

This is amazing! If you ever wanted a way to style the sticky element when it is in a "sticky" state, you'll know how cool it is to have such a feature. Adam Argyle uses the classic pattern of the alphabetical list and applies styles to the letter title when it is pasted to the top of the viewport. The same is true for scrolling snap elements and scrolling container elements.

In other words, when the elements are "stick", "snap", and "scrollable", we can style them.

A small example you need to open in the Chromium browser:

The overall idea (I only know so much now) is that we register a container...a container we can query. We set a container-type for the container, which is the scroll type we are using. In this case, we use sticky positioning where the element is "paste" to the top of the page.

<h1 id="Some-text">Some text</h1>

The container cannot query itself, so it basically has to be a wrapper for the elements we want to paste. The menu is a little special because we have the <nav></nav> element, which is usually populated with an unordered link list. So our <nav></nav> can be used as a container for our query, because we are actually pasting the unordered list to the top of the page.

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

We can put the sticky logic directly on <nav></nav> because it actually contains the pasted content:

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

If we are using a sticky footer instead of a menu, we can use stuck: bottom. But the point is that once the <nav></nav> element is pasted to the top, we can apply styles to it in the @container block as follows:

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

Nesting other selectors in it seems to work as well. For example, when the navigation is sticky, we can change the link in the menu:

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

So, yes. As I said, being part of the Chrome development team, it must be cool to get started with these features. Thank you very much to Bramus and Adam for continuing to introduce us to new features and the great effort to make such a great demo.

The above is the detailed content of Chrome 133 Goodies. For more information, please follow other related articles on the PHP Chinese website!