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…
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,…
2026 State of CSS, Devs Surveys
Two things: The State of CSS is obviously one I’m always stoked to see. But this year’s…
New Ecommerce Tools: July 29, 2026
Our rundown this week of new services for ecommerce merchants includes updates on post-purchase, in-game commerce, payment…
What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More
Similar to last time, What’s !important #15 is pretty stacked — read all about boundary-aware CSS, making…
Get Ready For the Powerful CSS border-shape Property!
So, we recently got the new shape() function (now Baseline!) as well as the corner-shape property. What…
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…
translateY()
The CSS translateY() function shifts an element vertically by the specified amount. Specifically, it shifts an element either up…
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…
What’s !important #13: @function, alpha(), CSS Wordle, and More
CSS functions, the alpha() function, Grid Lanes, some things about <dialog> that you might not know, CSS…
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…
Better Product Images Build Buyer Trust in Resale Marketplaces
As resale marketplaces grow, a platform’s ability to process and verify visuals at the point of upload…
@function
The @function at-rule defines CSS custom functions. These custom functions are reusable blocks of CSS that can…
::search-text
The CSS ::search-text pseudo-element selects matching text from your browser’s “find in page” feature. For example, if you use…
Revealing Text With CSS letter-spacing
Some text effects are relatively hard to pull in CSS, the main reason being we are unable…
Jetpack Search now understands your WooCommerce catalog
Jetpack Search 7.0 adds product-aware filters to WooCommerce stores. Traditional keyword searches match queries to text, potentially…
Jetpack Search now understands your WooCommerce catalog
Jetpack Search 7.0 adds product-aware filters to WooCommerce stores. Traditional keyword searches match queries to text, potentially…
How to start selling online: Nail the decisions that matter most
Starting an online store means making a handful of early decisions that you’ll live with for a…
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…
What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More
Developers have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics feature, a web-based OS for e-ink devices,…
The Importance of Native Randomness in CSS
Recently, I published a story about the new random functions that have landed in CSS and how…
contrast()
The CSS contrast() filter function increases or decreases the contrast of an element, either making colors pop out more…