Resolved: CSS Class Prefix Selector 🔗
A newly resolved proposal would allow us to select classes that are a prefix for variations with a wildcard, like .prefix-*. Resolved: CSS Class Prefi [...]
CSS-Tricks
Posts
CSS Navigation Matching, Early Days 🔗
Apply a style when someone navigates from one specific page to another. The idea being it'd make the sources for cross-document view transitions decla [...]
WordPress.com Student Plan 🔗
As someone who teaches beginning web development, I find that building a WordPress site makes for a great final project. Hosting those projects has al [...]
Dark mode toggles: two states are enough 🔗
Lea's pushing back on light/dark mode implementations that display three state options for visitors: light, dark, and system. Dark mode toggles: two s [...]
What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More 🔗
Plus, how to style skeleton UIs, how to enable diagonal scrolling, how images can overflow themselves, and yet, still more. Basically, how to do a lot [...]
Blocked aria-hidden: The Warning is Right, and Every Fix You’ve Found is Wrong 🔗
The warning is correct. And the recommended fixes you've probably seen are wrong. Here's what you can do instead to properly fix the issue. Blocked ar [...]
Animating CSS border-image 🔗
Border images are an overlooked feature. One neat fact is that border image slices can run across entire borders on an element, and animating it creat [...]
SmashingConf Freiburg 2026, September 7-10 🔗
Smashing Magazine’s in-person conferences are back and returning to the wonderful city of Freiburg next month, September 7–10. SmashingConf Freiburg 2 [...]
Using and Styling the Dialog Element 🔗
There's a lot of nuance to the <dialog> element, a seemingly little piece of web architecture. I've got some notes from digging into it. Using and Sty [...]
2026 State of CSS, Devs Surveys 🔗
A few notes and takeaways from the 2026 State of CSS survey results, including a nice CSS-Tricks cameo! 2026 State of CSS, Devs Surveys originally han [...]
Gap Decorations Are Now Available, Here’s What’s New 🔗
Today, with CSS gap decorations fully supported in Chrome and Edge, starting with version 149, you can now very easily style gaps, and with a lot of c [...]
Get Ready For the Powerful CSS border-shape Property! 🔗
We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the [...]
What’s !important #16: sibling-index() Animations, Use Cases for the infinity Keyword, Container Stuck Queries, and More 🔗
The soon-Baseline sibling-index() function for animations, CSS and the 2026 FIFA World Cup, use cases for the infinity keyword, container "stuck" quer [...]
writing-mode 🔗
The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, and the direction in which blocks and lines progress [...]
pointer-events 🔗
The pointer-events property controls whether an element can become the target of pointer events like clicks, hover states, and other pointer-based eve [...]