Reading Time: 3 minutesHere’s something you’ll spot in the wild: <div class=”btn” role=”button”>Custom Button</div> This is one of those code smells that makes me stop in my tracks because we know there’s a semantic <button> element that we can use instead. There’s a whole other thing about conflating anchors (e.g., <a class=”btn”>) and buttons, but that’s not exactly […]
The “Most Hated” CSS Feature: tan()
Reading Time: 8 minutesLast time, we discussed that, sadly, according to the State of CSS 2025 survey, trigonometric functions are deemed the “Most Hated” CSS feature. That shocked me. I may have even been a little offended, being a math nerd and all. So, I wrote an article that tried to showcase several uses specifically for the cos() and sin() functions. Today, […]
Getting Creative With Small Screens
Reading Time: 8 minutesOver the past few months, I’ve explored how we can get creative using well-supported CSS properties. Each article is intended to nudge web design away from uniformity, toward designs that are more distinctive and memorable. One bit of feedback from Phillip Bagleg deserves a follow up: Andy’s guides are all very interesting, but mostly impractical […]
Pure CSS Tabs With Details, Grid, and Subgrid
Reading Time: 6 minutesMaking a tab interface with CSS is a never-ending topic in the world of modern web development. Are they possible? If yes, could they be accessible? I wrote how to build them the first time nine long years ago, and how to integrate accessible practices into them. Although my solution then could possibly still be […]
CSS Animations That Leverage the Parent-Child Relationship
Reading Time: 4 minutesModern CSS has great ways to position and move a group of elements relative to each other, such as anchor positioning. That said, there are instances where it may be better to take up the old ways for a little animation, saving time and effort. We’ve always been able to affect an element’s structure, like […]
An Introduction to JavaScript Expressions
Reading Time: 10 minutesEditor’s note: Mat Marquis and Andy Bell have released JavaScript for Everyone, an online course offered exclusively at Piccalilli. This post is an excerpt from the course taken specifically from a chapter all about JavaScript expressions. We’re publishing it here because we believe in this material and want to encourage folks like yourself to sign […]
Building a Honeypot Field That Works
Reading Time: 4 minutesHoneypots are fields that developers use to prevent spam submissions. They still work in 2025. So you don’t need reCAPTCHA or other annoying mechanisms. But you got to set a couple of tricks in place so spambots can’t detect your honeypot field. Use This I’ve created a Honeypot component that does everything I mention below. […]
Sequential linear() Animation With N Elements
Reading Time: 8 minutesLet’s suppose you have N elements with the same animation that should animate sequentially. The first one, then the second one, and so on until we reach the last one, then we loop back to the beginning. I am sure you know what I am talking about, and you also know that it’s tricky to […]
Masonry: Watching a CSS Feature Evolve
Reading Time: 7 minutesYou’ve probably heard the buzz about CSS Masonry. You might even be current on the ongoing debate about how it should be built, with two big proposals on the table, one from the Chrome team and one from the WebKit team. The two competing proposals are interesting in their own right. Chrome posted about its […]
Masonry: Watching a CSS Feature Evolve
Reading Time: 7 minutesYou’ve probably heard the buzz about CSS Masonry. You might even be current on the ongoing debate about how it should be built, with two big proposals on the table, one from the Chrome team and one from the WebKit team. The two competing proposals are interesting in their own right. Chrome posted about its […]
We Completely Missed width/height: stretch
Reading Time: 4 minutesThe stretch keyword, which you can use with width and height (as well as min-width, max-width, min-height, and max-height, of course), was shipped in Chromium web browsers back in June 2025. But the value is actually a unification of the non-standard -webkit-fill-available and -moz-available values, the latter of which has been available to use in […]
The thing about contrast-color
Reading Time: 2 minutesOne of our favorites, Andy Clarke, on the one thing keeping the CSS contrast-color() function from true glory: For my website design, I chose a dark blue background colour (#212E45) and light text (#d3d5da). This colour is off-white to soften the contrast between background and foreground colours, while maintaining a decent level for accessibility considerations. […]