Issue 122  October 10th 2025

Modern Font Stacks

System font stack CSS organized by typeface classification for every modern OS. The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.

Preventing jank on focused overflow-causing elements

Use overflow: clip instead of overflow: hidden when you want to completely prevent scroll-based jank from focus events in transitioning containers.

Next-Yak | Zero-runtime CSS-in-JS powered by Rust

next-yak is a CSS-in-JS solution tailored for Next.js that seamlessly combines the expressive power of styled-components syntax with efficient build-time extraction of CSS using Next.js's built-in CSS configuration.

Write styled-components syntax, get build-time CSS extraction and full RSC compatibility.

css-extras - Useful CSS custom functions using the new @​function rule

A comprehensive collection of CSS custom functions that leverage the new native CSS @function rule.

No build step required. Feel free to copy-paste what you need.

This package includes 36 CSS custom functions organized into these categories:

• Math & Number - --negate(), --abs(), --lerp(), --map-range(), --ratio()
• Color - --opacity(), --tint(), --shade(), --saturate(), --lighten(), --rotate-hue(), --complement(), --invert(), --black(), --white()
• Typography - --fluid-type(), --modular-scale(), --line-height-length(), --line-height-ratio(), --line-height-unitless()
• Layout - --sidebar-layout(), --conditional-radius(), --responsive-value(), --aspect-height()
• Spacing - --spacing(), --container-padding()
• Animation - --ease-out(), --elastic-ease()
• Grid - --auto-grid(), --grid-span()
• Filter - --smooth-shadow(), --glow()
• Theme - --light-dark(), --theme-color()
• Utility - --px-to-rem(), --rem-to-px()

Prevent clipping issues (and more) in View Transitions by using Nested View Transition Groups

A new View Transitions-related feature we shipped in Chrome 140 is the ability to nest ::view-transition-group() pseudos. This is useful for retaining visual effects such as clipping, move elements as part of a group, etc.

Dynamic Tooltip Position with Anchor Positioning

With anchor positioning, we can anchor an element to another and also ensure it remains visible on the screen regardless of the anchor's position. Now, imagine the element you want to anchor is a tooltip. What about its tail? We can also adjust its position to always point to the element.

CSS has 42 units

I recently came upon the CSS unit dvh because I needed its functionality for a website project I was working on. I never noticed that this unit existed, so I took a look at what else I have been missing.

When I started with HTML/CSS, we had 9 units. Today, apparently it has grown to 42.

Size Matters - Fluid Type Scale Generator | CSS Clamp Calculator

Generate responsive type scales with CSS clamp() values. Create fluid typography that scales beautifully across all devices.

A pragmatic guide to modern CSS colours

Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series, by Kevin Powell, is for you.

Ambient Animations In Web Design: Principles And Implementation (Part 1)

Creating motion can be tricky. Too much and it’s distracting. Too little and a design feels flat. Ambient animations are the middle ground — subtle, slow-moving details that add atmosphere without stealing the show. In this article, web design pioneer Andy Clarke introduces the concept of ambient animations and explains how to implement them.

Getting Creative With shape-outside

There are so many creative opportunities for using shape-outside that I’m surprised I see it used so rarely. So, how can you use it to add personality to a design? Here’s how I do it.

A beginner-friendly guide to view transitions in CSS

Imagine if your site could animate smoothly between pages – taking you from say index.html to about.html – without a jarring reload. Well, this is possible now, thanks to the support for View Transition API in modern browsers.

View transitions were once exclusive to single-page applications (SPAs). In this post, we'll explore how view transitions bring smooth, animated navigation to multi-page applications (MPAs).