Articles Tagged
custom properties
Are Custom Properties a “Menu of What Will Change”?
PPK laid out an interesting situation in “Two options for using custom properties” where he and Stefan Judis had two different approaches for doing the same thing with custom properties. In one approach, hover and focus styles for a …
JSON in CSS
Jonathan Neal tweeted a heck of a little CSS trick the other day, putting JSON inside CSS and plucking it out with JavaScript. Valid values for custom properties are quite liberal! So this looks for a CSS rule (e.g. a …
A Complete Guide to Custom Properties
Generating (and Solving!) Sudokus in CSS
I love to make CSS do stuff it shouldn’t. It’s the type of problem-solving brain training you’d get building a calculator in Minecraft, except you probably won’t get a job working with Minecraft Redstone no matter how good you …
Image Fragmentation Effect With CSS Masks and Custom Properties
Geoff shared this idea of a checkerboard where the tiles disappear one-by-one to reveal an image. In it, an element has a background image, then a CSS Grid layout holds the “tiles” that go from a filled background color to …
Exploring @property and its Animating Powers
Uh, what’s @property
? It’s a new CSS feature! It gives you superpowers. No joke, there is stuff that @property
can do that unlocks things in CSS we’ve never been able to do before.
While everything about @property
is exciting, …
How to Map Mouse Position in CSS
Let’s look at how to get the user’s mouse position and map it into CSS custom properties: --positionX
and --positionY
.
We could do this in JavaScript. If we did, we could do things like make make an element …

A DRY Approach to Color Themes in CSS
The other day, Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I had run into this issue in the past but hadn’t come up with a …
CSS Switch-Case Conditions
CSS is yet to have a switch
rule or conditional if
, aside from the specific nature of @media
queries and some deep trickery with CSS custom properties. Let’s have a look at why it would be useful if we …
useStateInCustomProperties
In my recent “Custom Properties as State” post, one of the things I mentioned was that theoretically, UI libraries, like React and Vue, could automatically map the state they manage over to CSS Custom Properties so we could use that state …