I typically marvel what it’s like working for the Chrome crew. You have to 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 give you these rad demos displaying off the most recent options. No, I’m, not jealous, why are you asking?
Completely unrelated, did you see the launch notes for Chrome 133? It’s at the moment in beta, however the Chrome crew has been publishing a slew of latest articles with fairly unimaginable demos which are powerful to disregard. I figured I’d spherical these up in a single place.
attr()
for the lots!
We’ve been in a position to make use of HTML attributes in CSS for a while now, however it’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 are able to now apply it to any CSS property, together with customized properties, in Chrome 133. So, for instance, we are able to take the attribute’s worth and put it to make use of on the aspect’s coloration
property:
h1 {
coloration: attr(data-color kind(<coloration>), #fff)
}
It is a trite instance, after all. However it helps illustrate that there are three shifting items right here:
- the attribute (
data-color
) - the kind (
kind(<coloration>)
) - the fallback worth (
#fff
)
We make up the attribute. It’s good to have a wildcard we are able to insert into the markup and hook into for styling. The kind()
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 may ditch that in favor of one thing much less verbose. For instance, let’s say we’re utilizing an attribute for the aspect’s font dimension:
<div data-size="20">Some textual content</div>
Now we are able to hook into the data-size
attribute and use the assigned worth to set the aspect’s font-size
property, primarily based in px
items:
h1 {
coloration: attr(data-size px, 16);
}
The fallback worth is optionally available and may not be mandatory relying in your use case.
It is a mind-blowing one. Should you’ve ever wished a method to model a sticky aspect when it’s in a “caught” state, you then already understand how cool it’s to have one thing like this. Adam Argyle takes the traditional 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 are scrolling containers.
In different phrases, we are able to model 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 final thought (and that’s all I do know for now) is that we register a container… , a container that we are able to question. 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 aspect “sticks” to the highest of the web page.
.sticky-nav {
container-type: scroll-state;
}
A container can’t question itself, in order that principally must be a wrapper across the aspect we wish to stick. Menus are somewhat humorous as a result of we have now the <nav>
aspect and often stuff it with an unordered checklist of hyperlinks. So, our <nav>
might 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="#">House</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Weblog</a></li>
</ul>
</nav>
We are able to put the sticky logic immediately 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; /* persist with the highest of the web page */
}
I supposed we may use the container
shorthand if we had been working with a number of containers and wanted to differentiate one from one other with a container-name
. Both means, now that we’ve outlined a container, we are able to 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 on the lookout for:
@container scroll-state(caught: prime) {
If we had 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 after the <nav>
aspect 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 are able to change the hyperlinks within the menu when the navigation is in its caught state:
.sticky-nav {
/* Similar as earlier than */
a {
coloration: #000;
font-size: 1rem;
}
/* When the nav is in a "caught" state */
@container scroll-state(caught: prime) {
/* Similar as earlier than */
a {
coloration: orangered;
font-size: 1.5rem;
}
}
}
So, yeah. As I used to be saying, it should be fairly cool to be on the Chrome developer crew and get forward of stuff like this, because it’s launched. Huge ol’ due to Bramus and Adam for constantly cluing us in on what’s new and doing the nice work it takes to give you such superb demos to indicate issues off.