An exploration of the newly supported at-rule for explicitly defining and animating custom properties in CSS.

Style queries allow developers to query a parent element's style values using the @container rule. In Chrome 111, style queries for CSS custom properties are landing stable. Learn how to get started with them.

Style queries will unlock many doors. An ability to alternate a value of any variable that I presented in my previous article might seem to be trivial by itself, but what if there is a hidden depth in how we can utilize it? One interesting case is the ability to emulate `inherit()` — a way to access the previous state of a custom property.

Preethi Sam walks through an example that demonstrates where custom properties are more suitable than variables while showcasing the greater freedom and flexibility that custom properties provide for designing complex, refined animations.

Preethi Sam walks through an example that demonstrates where custom properties are more suitable than variables while showcasing the greater freedom and flexibility that custom properties provide for designing complex, refined animations.

Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany. Besides design practice he teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design, Kiel.

Thanks to Variable Units, authors can define Custom Properties and use them as units in their CSS

CSS Custom Properties, better known as CSS variables, have been widely adopted by web designers to build reusable and configurable design systems.

CSS Custom Properties, better known as CSS variables, have been widely adopted by web designers to build reusable and configurable design systems.

I've seen this confuse more than a handful of people recently, including myself, so I'm making sure it's written down. Let's chuck a couple of custom

Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as "CSS Variables" but that's not their real name.

Custom properties in CSS are exceptionally useful, not just for tokenising your CSS, but also for abstracting complexity and interactivity into smaller, easier to manage pieces. This short guide will get you up to speed with how they work and how to use them.

Choosing CSS variable names that adapt to different contexts.

The other day I was working on a blog where each post has a custom color attached to it for a little dose of personality. The author gets to pick that

With new CSS features constantly coming out, it's easy to lose track. Here are ten things you can do with modern CSS you might not know yet.

How leveraging CSS variable composition and HSLA colors helped me build a more efficient way to theme my apps and rely less on CSS-in-JS.

How and why you should use CSS variables (custom properties) for theming instead of React context.

“Higher Level Custom Properties” are Custom Properties that control multiple other CSS Properties. Although still a proposal it's worth having a look already as they're really exciting.

CSS variables (also know as CSS custom properties) can hold all sorts of things. Some of these things were not obvious to me, which is why I decided to write...

Here's a fun idea from James Stanley: a CSS file (that presumably updates daily) containing CSS custom properties for "seasonal" colors (e.g. spring is

Learn how to implement CSS custom properties with semantic typing, a fallback value, and more, directly in your CSS file.

Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features but, as authors, we've