Issue 87  February 7th 2025

Rhythm in Web Typography

Horizontal rhythm mostly impacts the legibility, while vertical rhythm impacts the readability of the text and establishes a sense of visual hierarchy.

This guide is based on chapter 6 from the book Better Web Typography for a Better Web by Matej Latin. The book consists of 13 chapters through which the reader designs and builds an example website.

New capabilities for attr()

The ability to use attr() references in CSS is getting more powerful. Shipping in Chrome 133 (stable rollout beginning next week), this highly-requested feature gives you ability to supercharge attributes and use them in CSS beyond simple strings. You can reference colors, numbers, percentages, named values as custom identifiers, and more.

Attributes, including but not limited to data attributes, can be referenced in css using the attr() function.

Some Things You Might Not Know About Custom Counter Styles

I was reading through Juan’s recent Almanac entry for the @counter-style at-rule and I’ll be darned if he didn’t uncover and unpack some extremely interesting things that we can do to style lists, notably the list marker. You’re probably already aware of the ::marker pseudo-element. You’ve more than likely dabbled with custom counters using counter-reset and counter-increment. Or maybe your way of doing things is to wipe out the list-style (careful when doing that!) and hand-roll a marker on the list item’s ::before pseudo.

But have you toyed around with @counter-style? Turns out it does a lot of heavy lifting and opens up new ways of working with lists and list markers.

Create Auto-Expanding Form Fields Using field-sizing CSS Property

Find out how to easily create auto-expanding input and textarea form fields using the field-sizing: content; CSS property and value.

Here's Why Your Anchor Positioning Isn't Working

It is frustrating to track down why an anchor isn’t being found. I’ve found a simple way that should work in most cases. If that doesn’t work, step through the checklist, and then dive in to get a better understanding of how Anchor Positioning works.

How to implement view transitions in multi-page apps

In this article, I will focus on view transitions in MPAs. This is defined in the CSS View Transitions Module Level 2 specification and is referred to as cross-document view transitions. The cool thing is that the basics can be achieved without JavaScript — just a bit of declarative CSS will get you up and running. JavaScript is required when you want to implement some conditional logic.

The major difference between a view transition in a SPA and an MPA is how the transition is triggered. In an MPA, a view transition is triggered by navigating to another page — this can happen by clicking on a link or submitting a form. Navigations that don’t trigger a view transition include navigating using the URL address bar, clicking a bookmark, and reloading a page.

View Transitions Snippets: Keeping the page interactive while a View Transition is running

When using View Transitions you’ll notice the page becomes unresponsive to clicks while a View Transition is running. This happens because of the ::view-transition pseudo element – the one that contains all animated snapshots – gets overlayed on top of the document and captures all the clicks.

To make clicks fall through to the document underneath, you need to disable pointer events on the pseudo.

CSS scrollbar-color and scrollbar-gutter are Baseline Newly available

CSS scrollbar-color and scrollbar-gutter have landed in all major browser engines, making it Baseline Newly available.

With the scrollbar-color property you can change the colors used for scrollbars. You can specify the color of the thumb and the color track with it. Using scrollbar-width you can opt-in to a narrower scrollbar, or even to hide the scrollbar completely without affecting scrollability.

Don't animate height!

Our app was mysteriously using 60% CPU and 25% GPU on my M2 MacBook. It turned out this was due to a tiny CSS animation! In this post, I show how to find expensive animations, why some are so expensive, and how to make many animations much cheaper. Along the way, we'll learn how the browser renders CSS animations and how to use Chrome's dev tools for performance profiling.

Tailwind Lite - One line of code. Thousands of classes. No Build Step.

Tailwind Lite is a stripped back version of Tailwind - the popular utility-first CSS framework, that can be added to your site or app with a single line of code (as opposed to the usual setup steps that Tailwind requires).

The benefits of using Tailwind Lite are easy setup and a lower maintenance burden. The drawback is that Tailwind Lite does not enable all of the classes that regular Tailwind does.