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 did, and look at a trick that is usable today for pulling it off.
Recent chatter about the possibility
While none of these things are usable today, there has been a good amount of chat about the concept of generic conditional CSS just in the last year:
Perhaps a visual change after a certain amount of scrolling. A visual change after a numeric input is within a certain range. A component with a handful of states.
A common theme
We already have custom properties in CSS, and we could base state-change logic on them, changing a block of styles as a side effect of the custom property changing to certain values.
A trick! Using @keyframes for state
CSS @keyframes can be used to switch specific changes. Through the power of the animation property, a possibility opens up to select exactly which frame to show, and have it pause exactly on that frame, effectively mimicking a switch-case statement or state-based styles.
Let’s see see this in action by playing with the animation-delay property:
animation-play-state: paused: We’re not actually animating anything, so the animation will stay paused.
animation-duration: The actual duration doesn’t matter, it just needs one so there is a time span to hold the different keyframes. We’ll make it a value like 100.001s so that if we delay by 100s, the last keyframe will still work. The duration needs to be longer than the delay value.
The first range input modifies the animation-delay between a range of -100s and 0s.
A real-world use-case
Before we jump straight into the working example, it’s worth discussing this trick in more detail because there’s some nuances you ought to be aware of.
First off, the trick only works with numeric values. So, color values or strings because it’s strictly performing math.
Second, there’s the boolean trick. Consider a variable --value: 10 which can take any numeric value between 0 and 100. We want to apply color if the value is above 5. How do we know if the value is over or below 5? And even if we do know, how does that help actually help us?
--is-above-5: clamp(0, var(--value) - 5, 1)
0 – 5 = -5, clamp() forces a value no less than 0
2 – 5 = -3, clamp() forces a value no less than 0
5 – 5 = 0
7 – 5 = 2, clamp() forces a value no larger than 1
clamp() is like a smarter calc(), in that it allows us to strictly confine a computed value to range while declaring an ideal value. That range is all that is needed to achieve a boolean variable.
Write any math in the second parameter of the clamp() and that will either output 0 (or below) or 1 (or above). Make sure not to write any math that might result in a number between 0 and 1.
Here’s how that works out:
CodePen Embed Fallback
Using CSS math functions, it is possible to infer the “completed” percentage of the progress bar from those same variables:
The thing with CSS booleans is that there are many ways to use them to achieve a certain goal, and one must get creative, finding a formula which is short and readable.
In the above formula, the booleans will “toggle” a frame number if the boolean has the value of 1. Since we are using a max function, the the largest toggled frame number will be the computed value of --frame.
Note that the color change has a slight transition. We could have done this with the background: currentColor; on the fill area, which inherits the color from the parent, but I chose to use CSS Houdini to illustrate the power of assigning transitions to CSS variables by declaring its type.
An example of a heavily-used CSS boolean trick can be viewed in the below Pen, which is a CSS-only component with lots of variables that allow a wide range of customization:
CodePen Embed Fallback
I am sure there are many other use cases for this little trick and am excited to see what else might be achieved by the creativity of the community.
At Marketing Solution Australia we strive to deliverer elegant responsive websites for your business integrated with our personal SEO Optimization package to bring your pages on the first page of Google.