Issue 130  December 5th 2025

light-dark() isn't always the same as prefers-color-scheme

light-dark() and prefers-color-scheme treat the defined color-scheme values differently.

One CSS Trick to Eliminate Scrollbar Layout Shifts

When a webpage’s content exceeds the viewport height, browsers typically introduce a vertical scrollbar. This can lead to layout shifts, especially when navigating between pages or toggling content visibility, as the presence or absence of the scrollbar alters the available width for content.

To address this issue, you can use the scrollbar-gutter CSS property, which allows you to reserve space for the scrollbar, preventing layout shifts when it appears or disappears.

Introduction to CSS if Statements and Conditional Logic

The new if() function is an exciting addition to the CSS toolbox. It brings inline conditional logic that previously required Sass or scattered media queries. By understanding how if() interacts with style, media and support queries, and by combining it with custom properties and data attributes, you can write more expressive, maintainable styles. Keep in mind its experimental status, so use this guide as a reference to experiment with CSS conditionals today and stay prepared for the future of responsive design.

Grid: how grid-template-areas offer a visual solution for your code

The beauty of grid-template-areas is that all of the decisions about where to place what element happen in a single property. You still have to do the upfront work of naming your elements, but once you’ve done that, you can visually see where everything is in relation to each other in a single place. Changing it is simpler too — just move the element name to a different “cell” and you’re done.

Using CSS to fix the irradiation illusion

Ever noticed how white text on a black background looks thicker than black text on a white background, even though the weights are the same?

This post teaches you how to account for this and adjust perceived font weight for dark mode without layout shift, with variable fonts and the GRAD axis.

CSS-in-JS: The Great Betrayal of Frontend Sanity

CSS-in-JS promised simplicity but delivered performance issues. Learn why ditching it for native CSS solutions leads to faster, more maintainable web apps.

Victorian-Style Lines for the Web: Elements of Identical Width

In this tutorial, we will take graphical borders from the 1800s and turn them into a repeating CSS border for your website. The following technique will work for border made of almost-identical repeating elements. We’ll use the free Inkscape illustration software.

The end result will be this kind of border that neatly fills the parent element, no matter what the parent’s width is.

Prevent a page from scrolling while a dialog is open

Chrome 144 features a small change to overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal) <dialog> is open.

Gallery of Skewed Images with Hover Effect

Another classic component made easy with modern CSS and the new corner-shape. A gallery of skewed images with a reveal effect on hover using a few lines of code. The skewing adjusts accordingly to the direction of the text. Another direction-aware shape.

Masonry: Things You Won’t Need A Library For Anymore

CSS Masonry is almost here. Patrick Brosset takes a deep dive into what this long-awaited feature means for web developers and how you could make use of it in your own work.

Anchor Positioning and the Inset-Modified Containing Block (IMCB)

If you kinda understand Anchor Positioning, but it still surprises you from time to time, then most likely this is the missing piece of information: the Inset-Modified Containing Block (or IMCB for short).

Keeping link underline styles around inline code with padding

Addresses a common CSS problem: when you put an inline <code> snippet inside a hyperlink (<a>), any padding applied to that <code> element can cause the link’s underline to break or look awkward (with gaps where the padding is).

This happens because underlines in CSS apply only to the “text content,” not padding or margin — so adding padding inside the code element interrupts the underline.

Non-Square Image Blur Extensions

I recently came across this CodePen demo by Vivi Tseng, which creates the blur extension effect by placing a square div with a blur() beneath the img element and I couldn’t help but think a simpler solution should be possible with a single img element and minimal CSS.

Vanilla CSS is all you need

Back in April 2024, Jason Zimdars from 37signals published a post about modern CSS patterns in Campfire. He explained how their team builds sophisticated web applications using nothing but vanilla CSS. No Sass. No PostCSS. No build tools.

The post stuck with me. Over the past year and a half, 37signals has released two more products (Writebook and Fizzy) built on the same nobuild philosophy. I wanted to know if these patterns held up. Had they evolved?

I cracked open the source code for Campfire, Writebook, and Fizzy and traced the evolution of their CSS architecture. What started as curiosity became genuine surprise. These are not just consistent patterns. They are improving patterns. Each release builds on the last, adopting progressively more modern CSS features while maintaining the same nobuild philosophy.

These are not hobby projects. Campfire is a real-time chat application. Writebook is a publishing platform. Fizzy is a full-featured project management tool with kanban boards, drag-and-drop, and complex state management. Combined, they represent nearly 14,000 lines of CSS across 105 files.

Not a single line touches a build tool.

The Hidden Selectors of The HTML Element

Discover alternative selectors for the html element beyond the classic :root{} and html{}.

Are they useful? Probably not.

::target-text: An easy way to style text fragments

You’re reading a great blog post. You want to share it with your friend but instead of getting them to read the whole thing, you really just want to highlight a few key sentences and have them go directly to that section of the page. That’s what text fragments are for.

Is there something we developers can do to customize that experience for our users a bit more? Actually, there is! We’ll use the ::target-text pseudo-element to help us style our text fragment.