Masonry: Watching a CSS Feature Evolve
What can CSS Masonry discussions teach us about the development of new CSS features? What is the CSSWG’s role? What influence do browsers have? What can learn from the way past features evolved?
We Completely Missed width/height: stretch
The TL;DR is that stretch does the same thing as declaring 100%, but ignores padding when looking at the available space.
The thing about contrast-color
One of our favorites, Andy Clarke, on the one thing keeping the CSS contrast-color() function from true glory:
Quick Hit #60
Alignment might be one of the more confusing (or misunderstood) parts of CSS. I love having a thorough explanation from someone like Temani Afif who has it
Touring New CSS Features in Safari 26
Safari 26 adds:75 new features, 3 deprecations, and 171 other improvements. Here's all the CSS goodness you'll want to know about.
Recreating Gmail’s Google Gemini Animation
John Rhea challenged himself to recreate the fancy button using the new CSS shape() function sprinkled with animation to get things pretty close.
Quick Hit #59
A working draft for CSS Environment Variables is posted. Same concept as var(), but env() is a “global” variable at the document level for values the user
Is it Time to Un-Sass?
Many of the Sass features we've grown to love have made their way into native CSS in some shape or form. So, should we still use Sass? This is how developer Jeff Bridgforth is thinking about it.
What Can We Actually Do With corner-shape?
When I first started messing around with code, rounded corners required five background images or an image sprite likely created in Photoshop, so when
Compiling Multiple CSS Files into One
Stu Robson outlines two ways to compile multiple CSS files when you aren't relying on Sass for it.
What're Your Top 4 CSS Properties?
Everyone has a different opinion which is great because it demonstrates the messy, non-linear craft that is thinking like a front-end developer.
Composition in CSS
CSS is a composable language by nature. This composition nature is already built into the cascade. We simply don't talk about composition as a Big Thing because it's the nature of the language.
3D Layered Text: Interactivity and Dynamicism
In this third and final chapter, we’re stepping into interactivity by adding JavaScript, starting with a simple :hover effect, and ending with a fully responsive bulging text that follows your mouse in real time.
3D Layered Text: Motion and Variations
In this chapter, we will explore ways to animate the effect, add transitions, and play with different variations. We will look at how motion can enhance depth, and how subtle tweaks can create a whole new vibe.
3D Layered Text: The Basics
A client asked me to create a bulging text effect. With a bit of cleverness and some advanced CSS, I managed to get a result I’m genuinely proud of, which is covered in this three-part series.
Quick Hit #55
Really good to see Firefox Nightly join in the URL text fragments fun. Looks like we'll have broad support super soon!
On Accessibility Conformance, Design Systems, and CSS "Base" Units
My brain can't help but try to make connections between seemingly disparate ideas. And that's what happened yesterday when I read:
We Might Need Something Between Root and Relative CSS Units for "Base Elements"
I've come to realize that perhaps we need to have a unit between root and relative values. This would bring about a whole new possibility when creating reusable components.
CSS-Questions
CSS-Questions is a mini site where you can test your CSS knowledge with over 100 questions.
Stuff & Nonsense Practical Layout Workshop
Web design veteran Andy Clarke is offering a two-hour workshop all about creating practical and creative page layouts this September 18. Register and save a few bucks with a coupon code.
Getting Creative With Quotes
How do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML blockquote element using borders, decorative quote marks, custom shapes, and a few unexpected properties.
Quick Hit #54
The WebKit blog is back with a follow-up on its CSS Masonry coverage. It leans into a direction (display: grid), and that direction is different than Chrome's
How to Prepare for CSS-Specific Interview Questions
Get advice answering a set of 10 CSS-related questions you likely will encounter in front-end interviews.
Bringing Back Parallax With Scroll-Driven CSS Animations
Parallax is a pattern in which different elements of a webpage move at varying speeds as the user scrolls, creating a three-dimensional, layered appearance. It once required JavaScript. Now we have scroll-driven animations in CSS, which is free from the main-thread blocking that can plague JavaScript animations.
Thinking Deeply About Theming and Color Naming
Today, I want to discuss a couple of patterns for naming color palettes that the community is using, and how I propose we can improve, so we achieve both flexibility and beauty.
What I Took From the State of Dev 2025 Survey
State of Devs 2025 survey results are out! Sunkanmi Fafowora highlights a few key results about diversity, health, and salaries.
Setting Line Length in CSS (and Fitting Text to a Container)
The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.
The Layout Maestro Course
Layout. It's one of those easy-to-learn, difficult-to-master things, like they say about playing bass. Not because it's innately difficult to, say, place two
The Gap Strikes Back: Now Stylable
Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your layout items.
Quick Hit #51
An early preview of Chrome 139 includes six new CSS features, including the first hint of custom functions.
CSS Blob Recipes
Blob, Blob, Blob. What's the most effective way to create blob shapes in CSS? Turns out, as always, there are many. Let's compare them together!
KelpUI
KelpUI is new library that Chris Ferdinandi is developing, designed to leverage newer CSS features and Web Components. I've enjoyed following Chris as he's published an ongoing series of articles detailing his thought process behind the library, getting deep into his approach. You really get a clear picture of his strategy and I love it.
Poking at the CSS if() Function a Little More: Conditional Color Theming
The CSS if() function enables us to use values conditionally, but what exactly does if() do? Let's look at a possible real-world use case.
CSS Color Functions
CSS has a number of functions that can be used to set, translate, and manipulate colors. Learn what they are and how they are used with a bunch of examples to get you started.
How to Keep Up With New CSS Features
How do you stay informed of new CSS features when the language evolves quickly and information is spread all around the web? Sacha Greif has some tips from his work running an annual survey focused on new CSS features.
A Better API for the Resize Observer
ResizeObserver, MutationObserver, and IntersectionObserver enhance performance over their predecessors. Zell discusses their API similarities, usage steps, refactoring strategies, and advantages with practical examples.
Breaking Boundaries: Building a Tangram Puzzle With (S)CSS
We put it to the test and it turns out Sass can replace JavaScript, at least when it comes to low-level logic and puzzle behavior. With nothing but maps, mixins, functions, and a whole lot of math, we managed to bring our Tangram puzzle to life, no JavaScript required.
Creating an Auto-Closing Notification With an HTML Popover
The HTML popover attribute transforms elements into top-layer elements that can be opened and closed with a button or JavaScript. Popovers can be dismissed a number of ways, but there is no option to auto-close them. Preethi has a technique you can use.
Exploring the CSS contrast-color() Function… a Second Time
The contrast-color() function doesn’t check color contrast, but rather it outright resolves to either black or white (whichever one contrasts the most with your chosen color). Safari Technology Preview recently implemented it and we explore its possible uses in this article.
The State of CSS 2025 Survey is out!
The State of CSS 2025 Survey dropped a few days ago, and besides anticipating the results, it's exciting to see a lot of the new things shipped to CSS reflected in the questions.
Quick Hit #49
Chrome 137 introduces the newly-specced if() function. Una Kravets posted a nice video overview and Temani Afif writes about it as well.
Getting Creative With HTML Dialog
So, how can you take dialogue box design beyond the generic look of frameworks and templates? How can you style them to reflect a brand’s visual identity and help to tell its stories? Here’s how I do it in CSS using ::backdrop, backdrop-filter, and animations.
Better CSS Shapes Using shape() — Part 2: More on Arcs
This is the second part of a series that dives deep into the CSS shape() command, continuing with a more detailed look at the arc command.
Quick Hit #48
Firefox 139 includes an update where content inside a <details> element is included in an in-page search. Previously, that content was ignored when the
You can style alt text like any other text
Clever, clever that Andy Bell. He shares a technique for displaying image alt text when the image fails to load. Well, more precisely, it's a technique to apply styles to the alt when the image doesn't load, offering a nice UI fallback for what would otherwise be a busted-looking error.
A Reader's Question on Nested Lists
Answering a reader's question about how to create a complex numbering system with CSS list counters.
Scroll-Driven Animations Inside a CSS Carousel
Hey, isn't there a fairly new CSS feature that works with scroll regions? Oh yes, that's Scroll-Driven Animations. Shouldn't that mean we can trigger an animation while scrolling through the items in a CSS carousel?
CSS shape() Commands
The CSS shape() function recently gained support in both Chromium and WebKit browsers. It's a way of drawing complex shapes when clipping elements with the clip-path property.
Quick Hit #46
Straight from the W3C Technical Architecture Group: "e see an urgency to have a strict timeline for the removal of third-party cookies."
State of Devs: A Survey for Every Developer
The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.
Revisiting Image Maps
Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.
Open Up With Brad Frost, Episode 2
Brad Frost is running this new little podcast called Open Up. Folks write in with questions about the "other" side of web design and front-end development —
So, You Want to Give Up CSS Pre- and Post-Processors...
There was once upon a time when native CSS lacked many essential features, leaving developers to come up with all sorts of ways to make CSS easier to write over the years.
Next Level CSS Styling for Cursors
Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.
Quick Hit #43
Browsers are planning to update UA stylesheets for nested <h1> elements. It's a good idea to make sure your nested heading styles aren't relying on the
CSS-Tricks Chronicles XLIII
This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.
Tailwind's @apply Feature is Better Than it Sounds
Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obviously, nobody wants to use it. Personally, I think Tailwind's @apply feature is better than described.
Cascading Layouts: A Workshop on Resilient CSS Layouts
If I were starting with CSS today for the very first time, I would first want to spend time understanding writing modes because that's a great place to wrap
CSS Carousels
Chrome has prototyped these features and released them in Chrome 135. Adam Argyle has a wonderful explainer over at the Chrome Developer blog. Kevin Powell has an equally wonderful video where he follows the explainer. This post is me taking notes from them.
A New "Web" Readiness Report
HTML 5 Readiness was a site that showed through a rainbow of colors the browser support for several web features. What about a new version?