Alternatives to the !important Keyword
Every now and then, I stumble onto an old project of mine, or worse, someone else’s, and…
Abusing Customizable Selects
Web browsers ship new features all the time, but what fun is it if we can’t build…
Loading Smarter: SVG vs. Raster Loaders in Modern Web Design
I got this interesting question in an SVG workshop: “What is the performance difference between an SVG…
Interop 2026
Interop 2026 is formally a thing. So, you know all of those wild, new CSS features we’re…
No-Hassle Visual Studio Code Theming: Building an Extension
Years ago, when I read Sarah Drasner’s article on creating a VS Code theme, I silently thought…
Responsive List of Avatars Using Modern CSS (Part 2)
Ready for the second part? If you recall, last time we worked on a responsive list of…
Responsive List of Avatars Using Modern CSS (Part 1)
A list of rounded images that slightly overlap each other is a classic web design pattern. You…
Creating Scroll-Based Animations in Full view()
The CSS animation-timeline property accepts a view() function which, in turn, returns a timeline of how much…
Scrollytelling on Steroids With Scroll-State Queries
Read you a story? What fun would that be? I’ve got a better idea: let’s tell a…
Getting Creative With Small Screens
Over the past few months, I’ve explored how we can get creative using well-supported CSS properties. Each…
We Completely Missed width/height: stretch
The stretch keyword, which you can use with width and height (as well as min-width, max-width, min-height,…
Touring New CSS Features in Safari 26
A couple of days ago, the Apple team released Safari 26.0! Is it a big deal? I…
The “Most Hated” CSS Feature: cos() and sin()
No feature is truly “the worst” in CSS, right? After all, it’s all based on opinion and…
What Can We Actually Do With corner-shape?
When I first started messing around with code, rounded corners required five background images or an image…
CSS Elevator: A Pure CSS State Machine With Floor Navigation
As a developer with a passion for state machines, I’ve often found myself inspired by articles like…
How to Prepare for CSS-Specific Interview Questions
If you landed on this article, chances are you might have a front-end interview coming up, perhaps…
Scroll-Driven Sticky Heading
Scroll-driven animations are great! They’re a powerful tool that lets developers tie the movement and transformation of…
Better CSS Shapes Using shape() — Part 1: Lines and Arcs
Creating CSS Shapes is a classic and one of my favorite exercise. Indeed, I have one of…
Scroll-Driven Animations Inside a CSS Carousel
I was reflecting on what I learned about CSS Carousels recently. There’s a lot they can do…
The Lost CSS Tricks of Cohost.org
You would be forgiven if you’ve never heard of Cohost.org. The bespoke, Tumblr-like social media website came and…
Case Study: Combining Cutting-Edge CSS Features Into a “Course Navigation” Component
I came across this awesome article navigator by Jhey Tompkins: It solved a UX problem I was…
A CSS-Only Star Rating Component and More! (Part 2)
In the last article, we created a CSS-only star rating component using the CSS mask and border-image…
Grouping Selection List Items Together With CSS Grid
Grouping selected items is a design choice often employed to help users quickly grasp which items are…
The Little Triangle in the Tooltip
Tooltips are like homemade food: everyone uses them and everyone has their own recipe to make them….