One of my friends recently came across a funny CSS interview question during an interview. When I first saw the question, I thought it was a usual question. However, after careful research, I discovered the interesting part of this question.
The interview question: please implement the following CSS effect.
There are some numbers on the page showing the number of articles reads. If the number is less than 100, then the color of the number is gray. If the number is greater than or equal to 100, then the number is brown.
And this color can be adjusted dynamically rather than preset in advance.
Finally, the interviewer asked to use pure CSS to solve the problem.
Do you know how to achieve this effect?
Analysis
What is the essence of this problem?
The essence of this problem is very simple. That is, this is actually an if-else problem.
If we describe this question in pseudocode, it should look like this:
let color;if (reads < 100){
color = 'gray'} else {
color = 'brown'
}
So now the question becomes: how do we implement this if-else logic in CSS? Remember that there is no such thing as an if–else keyword in CSS.
Implement if-else in CSS
The logic of implementing if-else in CSS is the core skill examined in this question. Let’s complete this logic below. If you learn this trick, you can use it to achieve many powerful CSS effects.
First, let’s learn about a function called clamp.
From MDN:
The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum.
Basic format:
clamp(min, var, max)
We can understand the clamp function as pseudocode like this:
So:
- clamp(10, 13, 20) → 13
- clamp(10, 2, 20) → 10
- clamp(10, 30, 20) → 20
And usage example:
The value of font-size will not exceed 20px, nor will it be lower than 10px.
This is the basic usage of the clamp. If you still have questions about clamp, you can refer to the MDN documentation or leave a comment here.
Next, we implement this function in CSS.
The value of the result changes according to the value of var:
- When the value of
varis less than 100, the value of theresultis 10; - When the value of
varis greater than or equal to 100, theresultbecomes 20.
If we describe this question in pseudocode, it should look like this:
let result;if(var < 100){
result = 10} else {
result = 20
}
This requirement is similar to the clamp function, but it is not the same. The clamp can limit the value of var to a range, but we now want the value of the result to be either 10 or 20.
How to do it?
There is a special trick: We can amplify the change of var so that its value either reaches the upper limit or the lower limit of the interval.
That is:
let result = clamp(10, (var-99) * 20, 20)
This creates an effect:
- If the value of
varis 99, then the expression becomes
clamp(10, 0, 20), takes 10. - If the value of
varis 100, then it becomes
clamp(10, 20, 20), takes 20.
Explained with a diagram:
Likewise, if we wish to:
- When the value of
varis less than 50, the value of theresultis 5. - When the value of
varis greater than or equal to 50, the value of theresultis 15.
We just need to write like this:
let result = clamp(5, (var-49) * 15, 15)
Have you noticed: that this is actually the effect of if-else.
We did it.
Switch Colors in CSS
Back to the original interview question.
In order for us to use CSS for variable calculations later, we need to put the value in a CSS variable, so the HTML can be written like this:
If we don’t need to consider HTML semantics or SEO factors, both “numbers” and “reads” here can be generated by pseudo-elements:
If you are not familiar with content and counter-reset , you can check MDN documentation.
Now, here is an online demo:
https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fbytefishmedium%2Fembed%2Fpreview%2FVwQrGEb%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DVwQrGEb&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fbytefishmedium%2Fpen%2FVwQrGEb%3Feditors%3D1100&image=https%3A%2F%2Fshots.codepen.io%2Fbytefishmedium%2Fpen%2FVwQrGEb-512.jpg%3Fversion%3D1653533650&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=codepen
The brown color is #aa540e, which is represented by HSL color as hsl(27, 50%, 36%), as follows:
Its saturation controls how vivid the color is. The higher the saturation, the more vivid the color, and the lower the saturation, the duller the color. When the saturation is reduced to 0, it becomes a complete gray, as follows:
To switch color between gray and brown, that is, switch between hsl(27, 85%, 36%) and hsl(27, 85%, 36%) .
That is:
Ok, this is the final demo:
https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fbytefishmedium%2Fembed%2Fpreview%2FWNMXabm%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DWNMXabm&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fbytefishmedium%2Fpen%2FWNMXabm&image=https%3A%2F%2Fshots.codepen.io%2Fbytefishmedium%2Fpen%2FWNMXabm-512.jpg%3Fversion%3D1653535390&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=codepen
Conclusion
We implement the if-else effect in CSS through the clamp function, and finally, let the color switch according to the variable’s value.
Isn’t it fun?
In fact, there is another part of the original interview question, which is simply: let the color switch between multiple values. Just using if-else is not enough for this requirement. If you are interested in this topic, you can please follow me.