Individualizing CSS Properties with CSS Variables
In “A Trick: Individual CSS Transform Functions”, I discussed how we could use CSS Variables (Custom Properties) to bring us close to independent transform properties. Each day I explore CSS Variables, however, I’m finding they can help us with any property that accepts multiple values at the same time.
This example shows a block of text that animates via
clip-path to reveal itself over another block of text. I’ve added a second keyframe animation to do a
filter to effectively cycle through colors for the background. The
animation property therefore has two values: one for each animation. If I want to change anything later for only one animation - such as a
play-state, I would likely take one of two approaches (Let’s talk about toggling the
- Set up multiple classes to represent all the different combinations of play state we can have (in our case four:
getComputedStyleon our animating element, tokenize the value based on the comma, set the desired value on the one we want to update, and then join back together for a final result string to be set on the element’s
These approaches have drawbacks, since they both grow more complex as we add more animations. We need nine classes if we have three animations and more complicated JS to get the right class applied. For the second option, we need to add additional logic to our JS any time a new animation is added, and we need to be careful to not change order in our CSS.
Instead, our example shows how we can use CSS Variables to break them apart and think of them more individually. We set up our
animation as we normally would but we also set a separate
animation-play-state property value, with the default values of running:
Now we can add some form controls that allow us to pause an individual animation via a small amount of JS:
This allows us to break out of manipulating full property values when we only need to update a small segment. We could take this further and add controls to everything… for each animation’s durations, direction, iteration count, etc. It’s not just CSS Animations and Transforms that take multiple values/functions in their properties and benefit from this approach.
We can use CSS Variables to switch Hue, Saturation, and Lightness for
We can combine it with “The Original CSS Variable”
currentColor and theme a site:
We can even update the individual parts of a
cubic-bezier() easing function on the fly:
Multiple backgrounds, box shadows, and more are open to this simplification. I’ve focused on using JS to manipulate values individually, but that certainly is not necessary. With backgrounds, for example, you could have the following instead of repeating all the parts for each variation (See the Demo):
If you understand and like the CSS cascade, CSS Variables will likely fit into your workflow well.
The latest Chrome, Safari, and Firefox do well with these examples (and as a side bonus: Firefox is only one version away from supporting
clip-path without a flag). Edge 15, which was just released, is the first version to have CSS Variables, so I’m just starting to play with them there and… they largely work. Impressive for an initial release in my book, and the more common use cases for Variables seem to be working very well. The transition/animation ones do not always match the other browsers. Hopefully we will see improvements in all the browsers as we continue to explore what CSS Variables can do.