I usually surprise what it’s like working for the Chrome staff. You could get issued some type of government-level safety clearance for the most recent browser builds that grants you permission to bash on them forward of everybody else and provide you with these rad demos displaying off the most recent options. No, I’m, not jealous, why are you asking?
Completely unrelated, did you see the release notes for Chrome 133? It’s at present in beta, however the Chrome staff has been publishing a slew of latest articles with fairly unimaginable demos which can be powerful to disregard. I figured I’d spherical these up in a single place.
attr() for the plenty!
We’ve been ready to make use of HTML attributes in CSS for a while now, but it surely’s been relegated to the content material property and solely parsed strings.
<h1 data-color="orange">Some textual content</h1>h1::earlier than {
content material: ' (Shade: ' attr(data-color) ') ';
}Bramus demonstrates how we will now apply it to any CSS property, together with customized properties, in Chrome 133. So, for instance, we will take the attribute’s worth and put it to make use of on the ingredient’s colour property:
h1 {
colour: attr(data-color sort(<colour>), #fff)
}It is a trite instance, after all. Nevertheless it helps illustrate that there are three transferring items right here:
- the attribute (
data-color) - the kind (
sort(<colour>)) - the fallback worth (
#fff)
We make up the attribute. It’s good to have a wildcard we will insert into the markup and hook into for styling. The sort() is a brand new deal that helps CSS know what kind of worth it’s working with. If we had been working with a numeric worth as a substitute, we might ditch that in favor of one thing much less verbose. For instance, let’s say we’re utilizing an attribute for the ingredient’s font measurement:
<div data-size="20">Some textual content</div>Now we will hook into the data-size attribute and use the assigned worth to set the ingredient’s font-size property, primarily based in px items:
h1 {
colour: attr(data-size px, 16);
}The fallback worth is optionally available and won’t be mandatory relying in your use case.
It is a mind-blowing one. Should you’ve ever wished a technique to type a sticky ingredient when it’s in a “caught” state, then you definately already know the way cool it’s to have one thing like this. Adam Argyle takes the basic sample of an alphabetical checklist and applies kinds to the letter heading when it sticks to the highest of the viewport. The identical is true of components with scroll snapping and components which can be scrolling containers.
In different phrases, we will type components when they’re “caught”, when they’re “snapped”, and when they’re “scrollable”.
Fast little instance that you just’ll wish to open in a Chromium browser:
The overall concept (and that’s all I do know for now) is that we register a container… you understand, a container that we can query. We give that container a container-type that’s set to the kind of scrolling we’re working with. On this case, we’re working with sticky positioning the place the ingredient “sticks” to the highest of the web page.
.sticky-nav {
container-type: scroll-state;
}A container can’t question itself, in order that principally needs to be a wrapper across the ingredient we wish to stick. Menus are slightly humorous as a result of we have now the <nav> ingredient and often stuff it with an unordered checklist of hyperlinks. So, our <nav> will be the container we question since we’re successfully sticking an unordered checklist to the highest of the web page.
<nav class="sticky-nav">
<ul>
<li><a href="#">Residence</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Weblog</a></li>
</ul>
</nav>We will put the sticky logic straight on the <nav> because it’s technically holding what will get caught:
.sticky-nav {
container-type: scroll-state; /* set a scroll container question */
place: sticky; /* set sticky positioning */
prime: 0; /* stick with the highest of the web page */
}I supposed we might use the container shorthand if we have been working with a number of containers and wanted to tell apart one from one other with a container-name. Both manner, now that we’ve outlined a container, we will question it utilizing @container! On this case, we declare the kind of container we’re querying:
@container scroll-state() { }And we inform it the state we’re in search of:
@container scroll-state(caught: prime) {If we have been working with a sticky footer as a substitute of a menu, then lets say caught: backside as a substitute. However the kicker is that when the <nav> ingredient sticks to the highest, we get to use kinds to it within the @container block, like so:
.sticky-nav {
border-radius: 12px;
container-type: scroll-state;
place: sticky;
prime: 0;
/* When the nav is in a "caught" state */
@container scroll-state(caught: prime) {
border-radius: 0;
box-shadow: 0 3px 10px hsl(0 0 0 / .25);
width: 100%;
}
}It appears to work when nesting different selectors in there. So, for instance, we will change the hyperlinks within the menu when the navigation is in its caught state:
.sticky-nav {
/* Identical as earlier than */
a {
colour: #000;
font-size: 1rem;
}
/* When the nav is in a "caught" state */
@container scroll-state(caught: prime) {
/* Identical as earlier than */
a {
colour: orangered;
font-size: 1.5rem;
}
}
}So, yeah. As I used to be saying, it have to be fairly cool to be on the Chrome developer staff and get forward of stuff like this, because it’s launched. Large ol’ because of Bramus and Adam for constantly cluing us in on what’s new and doing the good work it takes to provide you with such superb demos to point out issues off.
