Custom Properties

Adam knows better than anyone, CSS knows about the user, device, variables, layout and more. But there is a little bit of information that CSS doesn’t have. Like what’s the current value of a range input exactly? What are the exact coordinates of the mouse? It’s not hard to pass over that information to CSS […]

I ran across this website Very Good Components the other day and thought it was a neat idea to have a design gallery that wasn’t whole websites but individual components. They actually went a bit further and have configurable code for them. Here’s a Glowing Gradient Divider. I decided to remake it as an <hr> […]

The `!important` part doesn’t become part of the value, the whole declaration is treated as !important;

I feel like most usage of global CSS custom property use has the author putting them into a :root selector like: This is just a PSA that you… don’t have to. It’s not required. It has nothing to do with custom properties. It’s just a selector. It happens to select the html element on a […]

This is like one of those weirdly difficult quizzes about CSS. If you’ve got a <p> element sitting there in a totally normal basic HTML layout, then this CSS: What color does the <p> render as? It’s blue. You might think it’s green, as the value blah is an invalid color. If the CSS had… […]

We can pass the mouse position from JavaScript to CSS and use it to make unusual and playful effects.

Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.

Set a variable in Pug, then create an inline script which sets that variable for using in JavaScript and use setProperty to pass it to CSS.

A “fan out” animation involves sequentially revealing items from a stack with a bouncy effect. By using CSS grid, we save quite a bit of fiddly positioning work.

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.