A Better API for the Intersection and Mutation Observers
https://css-tricks.com/a-better-api-for-the-intersection-and-mutation-observers/
https://css-tricks.com/a-better-api-for-the-intersection-and-mutation-observers/
CSS-Tricks
A Better API for the Intersection and Mutation Observers | CSS-Tricks
Zell discusses refactoring the Resize, Mutation, and Intersection Observer APIs for easier usage, demonstrating how to implement callback and event listener patterns, while highlighting available options and methods.
Lightly Poking at the CSS if() Function in Chrome 137
https://css-tricks.com/lightly-poking-at-the-css-if-function-in-chrome-137/
https://css-tricks.com/lightly-poking-at-the-css-if-function-in-chrome-137/
CSS-Tricks
Lightly Poking at the CSS if() Function in Chrome 137 | CSS-Tricks
The CSS if() function was recently implemented in Chrome 137, making it the first instance where we have it supported by a mainstream browser. Let's poke at it a bit at a very high level.
Poking at the CSS if() Function a Little More: Conditional Color Theming
https://css-tricks.com/poking-at-the-css-if-function-a-little-more-conditional-color-theming/
https://css-tricks.com/poking-at-the-css-if-function-a-little-more-conditional-color-theming/
CSS-Tricks
Poking at the CSS if() Function a Little More: Conditional Color Theming | CSS-Tricks
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.
Using CSS Cascade Layers With Tailwind Utilities
https://css-tricks.com/using-css-cascade-layers-with-tailwind-utilities/
https://css-tricks.com/using-css-cascade-layers-with-tailwind-utilities/
CSS-Tricks
Using CSS Cascade Layers With Tailwind Utilities | CSS-Tricks
Being the bad boy I am, I don't take Tailwind's default approach to cascade layers as the "best" one. Over a year experimenting with Tailwind and vanilla CSS, I've come across what I believe is a better solution.
The Gap Strikes Back: Now Stylable
https://css-tricks.com/the-gap-strikes-back-now-stylable/
https://css-tricks.com/the-gap-strikes-back-now-stylable/
CSS-Tricks
The Gap Strikes Back: Now Stylable | CSS-Tricks
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…
Better CSS Shapes Using shape() — Part 4: Close and Move
https://css-tricks.com/better-css-shapes-using-shape-part-4-close-and-move/
https://css-tricks.com/better-css-shapes-using-shape-part-4-close-and-move/
CSS-Tricks
Better CSS Shapes Using shape() — Part 4: Close and Move | CSS-Tricks
The shape() function's close and move commands may not be ones you reach for often, but are incredibly useful for certain shapes.
Scroll-Driven Sticky Heading
https://css-tricks.com/scroll-driven-sticky-heading/
https://css-tricks.com/scroll-driven-sticky-heading/
CSS-Tricks
Scroll-Driven Sticky Heading | CSS-Tricks
I was playing around with scroll-driven animations, just searching for all sorts of random things you could do. That’s when I came up with the idea to animate main headings and, using scroll-driven animations, change the headings based on the user’s scroll…
Setting Line Length in CSS (and Fitting Text to a Container)
https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container/
https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container/
CSS-Tricks
Setting Line Length in CSS (and Fitting Text to a Container) | CSS-Tricks
The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.
What I Took From the State of Dev 2025 Survey
https://css-tricks.com/what-i-took-from-the-state-of-dev-2025-survey/
https://css-tricks.com/what-i-took-from-the-state-of-dev-2025-survey/
CSS-Tricks
What I Took From the State of Dev 2025 Survey | CSS-Tricks
State of Devs 2025 survey results are out! Sunkanmi Fafowora highlights a few key results about diversity, health, and salaries.
Getting Clarity on Apple’s Liquid Glass
https://css-tricks.com/getting-clarity-on-apples-liquid-glass/
https://css-tricks.com/getting-clarity-on-apples-liquid-glass/
CSS-Tricks
Getting Clarity on Apple's Liquid Glass | CSS-Tricks
Gathered notes on Liquid Glass, Apple’s new design language that was introduced at WWDC 2025. These links are a choice selection of posts and resources that I've found helpful for understanding the context of Liquid Glass, as well as techniques for recreating…
Getting Creative With Versal Letters
https://css-tricks.com/getting-creative-with-versal-letters/
https://css-tricks.com/getting-creative-with-versal-letters/
CSS-Tricks
Getting Creative With Versal Letters | CSS-Tricks
A versal letters is a typographic flourish found in illuminated manuscripts and traditional book design, where it adds visual interest and helps guide a reader’s eye to where they should begin.
A Primer on Focus Trapping
https://css-tricks.com/a-primer-on-focus-trapping/
https://css-tricks.com/a-primer-on-focus-trapping/
CSS-Tricks
A Primer on Focus Trapping | CSS-Tricks
Focus trapping is about managing focus within an element, such that focus always stays within it. The whole process sounds simple in theory, but it can quite difficult to build in practice, mostly because of the numerous parts to you got to manage.
A First Look at the Interest Invoker API (for Hover-Triggered Popovers)
https://css-tricks.com/a-first-look-at-the-interest-invoker-api-for-hover-triggered-popovers/
https://css-tricks.com/a-first-look-at-the-interest-invoker-api-for-hover-triggered-popovers/
CSS-Tricks
A First Look at the Interest Invoker API (for Hover-Triggered Popovers) | CSS-Tricks
Chrome 139 is experimenting with Open UI’s proposed Interest Invoker API, which would be used to create tooltips, hover menus, hover cards, quick actions, and other types of UIs for showing more information with hover interactions.
Atomic Design Certification Course
https://css-tricks.com/atomic-design-certification-course/
https://css-tricks.com/atomic-design-certification-course/
CSS-Tricks
Atomic Design Certification Course | CSS-Tricks
Brad Frost introduced the "Atomic Design" concept wayyyy back in 2013. He even wrote a book on it. And we all took notice, because that term has been part of
Making a Masonry Layout That Works Today
https://css-tricks.com/making-a-masonry-layout-that-works-today/
https://css-tricks.com/making-a-masonry-layout-that-works-today/
CSS-Tricks
Making a Masonry Layout That Works Today | CSS-Tricks
I went on to figure out how make masonry work today with other browsers. I'm happy to report I've found a way — and, bonus! — that support can be provided with only 66 lines of JavaScript.
Keeping Article Demos Alive When Third-Party APIs Die
https://css-tricks.com/keeping-article-demos-alive-when-third-party-apis-die/
https://css-tricks.com/keeping-article-demos-alive-when-third-party-apis-die/
CSS-Tricks
Keeping Article Demos Alive When Third-Party APIs Die | CSS-Tricks
Is there a way to build demos that do not break when the services they rely on fail? How can we ensure educational demos stay available for as long as possible?
Thinking Deeply About Theming and Color Naming
https://css-tricks.com/thinking-deeply-about-theming-and-color-naming/
https://css-tricks.com/thinking-deeply-about-theming-and-color-naming/
CSS-Tricks
Thinking Deeply About Theming and Color Naming | CSS-Tricks
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.