CSS

Let’s look at using CSS as an efficient alternative to JavaScript for creating simple timers. We’ll use modern CSS properties like @property, @keyframes, and pseudo-elements with counter() values.

It might seem like you could just set a transition on the opacity of the dialog element in CSS from 0 to 1, but it doesn’t work. You’ll need to learn about @starting-style, and the overlay and allow-discrete keywords.

Zooming in browsers is an accessibility feature. I’d say that any attempt to fight against it is bad form. Don’t do it. Leave it be. I have seen compelling examples of ways to code that work with browser zoom that help make a site look nicer when high levels of zoom are applied. But they […]

CSS developers got the ultimate dream: container queries. But now that they are here, are we actually reaching for them as much as we thought we would?

Some of you likely worked through the “CSS3” thing. It was huge. People damn near stopped saying “CSS” for a few years there. Everything was “HTML5” and “CSS3”, such was the success of that marketing effort. There was a logo and everything. It was a little cheesy, but it was a good thing. People saw […]

When you nest elements with border-radius, the inner element needs less radius than the outer element.

This is some classic advice on this, and a future-looking fix.

A scroll progress indicator is a pretty straightforward thing to build with a scroll()-style scroll-driven animation. But here, we’ll build indicators for each section of a page using the view() style.

What is sheet music if not icons placed in particular vertical and horizontal positions? Stephen Band turned the system of sheet music into a CSS grid system where you control the placement of everything with classes and data-attributes.

https://cruncher.ch/blog/printing-music-with-css-grid/

Really clever trick via Temani Afif.

https://codepen.io/t_afif/pen/vYbdVjb

Fill the entire element with a gradient overlay on top of any existing background, which can make it easier to read text set on top.

We can *mostly* use HTML alone for this API. But here, we’ll use CSS to style the “links” within paragraphs and a JS library to position them, in lieu of CSS anchoring.