Automated Visual Regression Testing With Playwright 🔗
With visual regression testing, we can update a page, take screenshots before and after the fact, and compare the results for unintended changes. In t [...]
CSS-Tricks
Posts
Case Study: Combining Cutting-Edge CSS Features Into a “Course Navigation” Component 🔗
Having been tasked with creating a UI component for navigating the content of an online course, Daniel found himself neck-deep in a pool of new CSS fe [...]
Support Logical Shorthands in CSS 🔗
There’s a bit of a blind spot when working with CSS logical properties concerning shorthands. Support Logical Shorthands in CSS originally published o [...]
Revisiting CSS border-image 🔗
I’ve used border-image regularly. Yet, it remains one of the most underused CSS tools, and I can’t, for the life of me, figure out why. Is it possible [...]
Quick Reminder That :is() and :where() Are Basically the Same With One Key Difference 🔗
I’ve seen a handful of recent posts talking about the utility of the :is() relational pseudo-selector. No need to delve into the details other than to [...]
Styling Counters in CSS 🔗
Going from the most basic ways to style lists directly in HTML to advanced customization techniques that are even capable of making things that aren't [...]
Web Components Demystified 🔗
Scott Jehl released a course called Web Components Demystified. This is my full set of notes from Scott's course. You'll still want to take the course [...]
Powering Search With Astro Actions and Fuse.js 🔗
With Astro, we can generate most of our site during our build, but have a small bit of server-side code that can handle search functionality using som [...]
Smashing Meets Accessibility 🔗
The videos from Smashing Magazine's recent event on accessibility were just posted the other day. I was invited to host the panel discussion with the [...]
A CSS-Only Star Rating Component and More! (Part 2) 🔗
In this second article of a two-part series, Temani Afif demonstrates an alternative approach to creating the star rating component from the first art [...]
Maybe don’t use custom properties in shorthand properties 🔗
This easily qualifies as a "gotcha" in CSS and is a good reminder that the cascade doesn't know everything all at the same time. If a custom property [...]
Grouping Selection List Items Together With CSS Grid 🔗
Preethi demonstrates how to make a user interface to group selected items using CSS Grid using two different methods: the auto-fill keyword for stable [...]
Functions in CSS?! 🔗
Arguments?! Return values?! What's crazier, you can use functions right now in Chrome Canary! So, after reading and playing around, here are my key in [...]
A CSS-Only Star Rating Component and More! (Part 1) 🔗
In this article, you'll learn how to make a full-on star rating component out of nothing but a single input element and vanilla CSS. A CSS-Only Star R [...]
Using & Styling the Details Element 🔗
Now that we're 5+ years into the details element, we know more about it than ever before. I thought I'd round that information up so it's in one place [...]