If I could stop time while earning my web dev degree to focus on what I really, really want to, without a care in the world for coursework or work-work or pulling weeds or running errands, it’d be CSS all day baby. The features are just so powerful now that it feels like an insult to CSS to bust out Bootstrap anymore.
New scroll-snap features
Scroll-snap has been around for a quick minute, but there are a few new features that make it even more exciting to work with! If you haven’t used scroll-snap before, it allows you to lock the viewport or scroll container to specific elements or locations after the user stops scrolling. It’s awesome for elegant scrolling UX that helps your content shine.
The new scroll-snap-align property lets you control how an element is aligned when it snaps into position. Think top, bottom, center, left, or right of the scroll container. A value of both is now supported for scroll snap in both axes, too. You can also make it easier to snap using touch gestures with scroll-snap-touch-snap-points: true;
Nesting
Y’all. Hold on to your hats. Native CSS finally supports nesting with the & or nest syntax! No more long strings of repetitive selectors to style specific child elements. Now you can just nest them under a single selector.
Instead of something like this:
.section {
background-color: green;
}
.section p {
font-size: 1rem;
}
.section p span:hover {
color: red;
}You could style the same elements like this:
.section {
background-color: green;
p {
font-size: 1rem;
span {
&:hover {
color: red;
}
}
}
}New pseudo-classes
There are quite a few new pseudo-classes available with varying browser support right now. These are a couple that I’m personally excited about:
:has()
Now supported in most browsers, :has() is a relational pseudo-class that selects elements only if they contain another specified element. For example, p:has(img) selects all <p> elements that contain an <img> child element.
:current
The :current pseudo-class is “time dimensional”, meaning it can match elements in relation to a timeline, or what is currently displayed on the screen, like WebVTT video subtitles. While still experimental, :past and :future are also in the works!
Container queries
A helpful alternative to media queries, container queries let you style elements based on the size of their containers. It’s brilliant for streamlining or expanding content! Say that a container element gets too tight for all of its child elements in a particular context. Instead of tying a style change to the device size, you can base it on the size of the container itself.
First you have to declare a “containment context” on the container element to give the browser a heads up that you may want to query its size later. To do so, set the container-type property to size, inline-size, or normal (MDN reference for details on values).
Then you can use a container at-rule to specify styles for child elements when the container condition is true. Here’s the syntax:
@container <container-condition> {
<styles>
}Accent-color
Every try to style afriggin checkbox, range field or radio button? If not, trust me when I say it’s easier to substitute a custom widget that mimics these kinds of inputs than try to modify them with CSS. At least it used to be!
The new accent-color property lets you target, well, the accent colors of these interface controls. Bye bye browser blue is as easy as input[type=checkbox] { accent-color: red; }
In summary
These are just a few of the powerhouse new features to start showing green boxes on CanIUse. Custom variables, scoped styles, relative colors, new text-wrap and shape values, and even conditional rules like @when and @else are coming around the bend, too!