Animating CSS border-image
The CSS border-image property is one of those features we take for granted. And it’s not new…
Using and Styling the Dialog Element
Wasn’t it great — nay, amazing – the day we got a native HTML <dialog> element? It’s,…
Gap Decorations Are Now Available, Here’s What’s New
For a long time now, web developers have had to use border and pseudo-element hacks to style…
pointer-events
The pointer-events property controls whether an element can become the target of pointer events like clicks, hover…
What’s !important #14: Gap Decorations, random(), field sizing, and More
I know you’re busy, so for What’s !important #14, I’ll be sprinting through what’s been a stacked…
The Shifting Line Between CSS States and JavaScript Events
CSS is listening to us. No, not like that. Rather, CSS is accumulating more and more pseudo-classes…
translateZ()
The CSS translateZ() function adds depth to an element, drawing it closer or farther in space. In other words,…
Using Scroll-Driven Animations for Opposing Scroll Directions
Sometimes designers have silly ideas that eventually grow on you. That happened to me with this concept…
The Siren Song of ariaNotify()
I need you all to promise me you’ll be cool about this. I‘m here to tell you…
Why Isn’t My 3D View Transition Working?
If you have played around with view transition a bunch, you may have noticed that 3D transitions…
AI Turns Ecommerce Design into Reality
Ecommerce websites consist of themes and templates made with HTML, CSS, and JavaScript. Executives typically define the…
Another Stab at the Perfect CSS Pie Chart… Sans JavaScript!
Recently, Juan Diego Rodríguez published an excellent article exploring how far CSS can be pushed to build a semantic…
offset-path
The offset-path property in CSS defines a movement path for an element to follow during animation. This…
::search-text
The CSS ::search-text pseudo-element selects matching text from your browser’s “find in page” feature. For example, if you use…
Astro Markdown Component Utility for Any Framework
In the previous article, I spoke about the why and how to use a Markdown component in…
What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More
What’s !important #12 talks about the old (testing in Safari when you don’t have Safari), the new…
Technical Writing in the AI Age
This isn’t coming out of nowhere: More and more people I deeply respect and have learned a…
Cross-Document View Transitions: Scaling Across Hundreds of Elements
In Part 1, we covered the gotchas that bite you first: the deprecated meta tag that silently…
Cross-Document View Transitions: The Gotchas Nobody Mentions
I wasted an entire Saturday on this. Not a lazy Saturday either, but one of those rare,…
Google Says AI Optimization Is Just SEO
Google has finally published guidance for AI optimization. Yet “Optimizing your website for generative AI features on…
What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More
If 3D voxel scenes (that you can style), flying focus animations, or new CSS syntaxes sound like…
Computing and Displaying Discounted Prices in CSS
CSS math isn’t just about how things look! It can also be used to work out useful…
Automated Steps For VCF Host Provisioning
May 5, 2026 Automated Steps For VCF Host Provisioning What Are We Solving Here? Ever since I…
Chrome Extensions for GenAI Visibility
There is no clear, step-by-step process for optimizing visibility in generative AI models. We’re left with testing…