What’s !important #20: GTA 6 Scroll Effects, Scrollspies, random()
Good news first? Or bad news first?
Let’s do bad news first.
This is the final issue of What’s !important on CSS-Tricks.com. The good news is that it’s coming back in an expanded form as the CSS-Tricks newsletter. I had ya there for a second, didn’t I? Sorry, I couldn’t decide whether to trick or treat, so I went for both. Happy Halloween!
The newsletter officially kicks off on November 10th. That’s after a way-too-long four-year hiatus. What the heck, right? It’s not only high time for it to come back, but for you to get on the list. You’ll get hand-written and hand-curated news, links, and editorials that you can only find there. Join the party with me!
So, let’s go out with a big bang for our “final” issue. It’s packed with some stuff that I’ve been holding onto since before the site came back to life earlier this week, but also some new stuff, and I can’t wait to finally get it out to you.
Scooch over Apple, Rockstar has something they’d like to say about fancy scrolling effects (to be fair, they’ve had 13 years to create them). First, check out the GTA 6 website (which oddly doesn’t work in Firefox), then watch Kevin Powell’s GTA 6 scroll effects walkthrough, which is frankly the most fun that you can have while waiting (and waiting) for GTA 6.
Mojtaba Seyedi demonstrated how to build a scrollspy with modern CSS. What’s a scrollspy, you ask? Well, if you have a navigation that links to different sections of the page, a scrollspy highlights the section that you’re currently on in the navigation.
CodePen Embed Fallback
random() demos explained
Brecht De Ruyte showcased and explained some absolutely stunning random() demos.
Here are a few of them:
CodePen Embed Fallback
CodePen Embed Fallback
CodePen Embed Fallback
CodePen Embed Fallback
CodePen Embed Fallback
Okay, that was more than a few…
Implementing icons on the web in 2026 and beyond
Lea Verou explained, in detail, the different ways of implementing icons on the web. Many exciting CSS features of the future are mentioned, including Linked Parameters, ident(), @mixin and @apply, the @property shorthand, and more, so it’s a really deep dive with a lot of intrigue.
::*?
Kilian Valkhof suggested a universal pseudo-selector. I mean, the universal selector (*) doesn’t select pseudo-elements, which is why almost every website uses the following CSS snippet, right?
*,
::before,
::after {
box-sizing: border-box;
}
But there are way more of them now (e.g., ::backdrop and ::details-content, to name just a couple of common ones in the context of box-sizing: border-box), so Kilian suggests ::*.
I like it!
New HTML and CSS features that are useful for design systems
Declan Chidlow told us which new HTML and CSS features are useful for design systems. My favorites are text-box, sibling-index(), sibling-count(), @scope, and @custom-media, which are very handy even outside of design systems.
Make s adapt to their content
Adam Argyle shared a sweet CSS trick to make s adapt to their content (like contenteditables do naturally):
CodePen Embed Fallback
As you can see, there’s a bit of anchor positioning going on there. Is it just me or is anchor positioning the most versatile CSS feature right now?
Create wavy dividers using random() and shape()
Here’s another CSS trick, this one to create wavy dividers using random() and shape(). This has Temani Afif written all over it, doesn’t it?
CodePen Embed Fallback
New color contrast checker
While it certainly isn’t the only color contrast checker out there, This hue shall pass is a new one that enables us to check every combination of colors, recognizes the difference between Fail and Fail: close to passing, and allows us to adjust the lightness until the color contrast ratio meets the AA/AAA standards. I think I’ll be using this one (made by Clearleft, by the way) from now on.
Gradient visualizer (also new)
Concocted in Ahmad Shadeed’s lab, Gradient Layers enables us to edit gradients or create them from scratch visually, which is easier than fiddling with CSS, especially if they have multiple layers.
Two new gradient types on the way
On that note, we have two new gradient types on the way. Josh Tumath explained how they work and what their CSS code might look like.
A couple of simple examples:
background-image: mesh-gradient(red, blue; green, yellow);
Source: Josh Tumath.
background-image: freeform-gradient(red top left, yellow bottom right);
Source: Josh Tumath.
These examples are cool but it’s the image below that really demonstrates how awesome these gradient types are (this one uses a mesh gradient):
Source: Josh Tumath.
Do your thing, Ahmad!
New web platform features and updates
Now, I’ll see you in a couple of weeks for What’s !important #21, but remember, you must subscribe to the CSS-Tricks newsletter to read it and every issue after it. It’ll include the same top-notch content from the best front-end authors as well as the latest web platform updates, but with free delivery and a sponsor. Thanks for sticking with us <3.
