![\"\"\/](\"https:\/\/miro.medium.com\/max\/700\/1*YUZlDMVDM4eXlzgH_NzGDQ.png\")
<\/figure>\n\n\n\nAnd this color can be adjusted dynamically rather than preset in advance.<\/p>\n\n\n\n Finally, the interviewer asked to use pure CSS to solve the problem.<\/p>\n\n\n\n Do you know how to achieve this effect?<\/p>\n\n\n\n What is the essence of this problem?<\/p>\n\n\n\n The essence of this problem is very simple. That is, this is actually an if-else problem.<\/p>\n\n\n\n If we describe this question in pseudocode, it should look like this:<\/p>\n\n\n\n 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<\/strong>–else<\/strong> keyword in CSS.<\/p>\n\n\n\n The logic of implementing if-else in CSS is the core skill examined in this question. Let\u2019s complete this logic below. If you learn this trick, you can use it to achieve many powerful CSS effects.<\/p>\n\n\n\n First, let\u2019s learn about a function called From MDN<\/a>:<\/p>\n\n\n\n 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.<\/p><\/blockquote>\n\n\n\n Basic format:<\/p>\n\n\n\n clamp(min, var, max)<\/p><\/blockquote>\n\n\n\n We can understand the So:<\/p>\n\n\n\n And usage example:<\/p>\n\n\n\n The value of This is the basic usage of the Next, we implement this function in CSS.<\/p>\n\n\n\n The value of the If we describe this question in pseudocode, it should look like this:<\/p>\n\n\n\n This requirement is similar to the clamp function, but it is not the same. The How to do it?<\/p>\n\n\n\n There is a special trick: We can amplify the change of That is:<\/p>\n\n\n\n This creates an effect:<\/p>\n\n\n\n Explained with a diagram:<\/p>\n\n\n\n Likewise, if we wish to:<\/p>\n\n\n\n We just need to write like this:<\/p>\n\n\n\n Have you noticed: that this is actually the effect of if-else.<\/p>\n\n\n\n We did it.<\/p>\n\n\n\n Back to the original interview question.<\/p>\n\n\n\n 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:<\/p>\n\n\n\n If we don\u2019t need to consider HTML semantics or SEO factors, both \u201cnumbers\u201d and \u201creads\u201d here can be generated by pseudo-elements:<\/p>\n\n\n\n If you are not familiar with Now, here is an online demo:<\/p>\n\n\n\n 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<\/p>\n\n\n\n The brown color is 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:<\/p>\n\n\n\n To switch color between gray and brown, that is, switch between That is:<\/p>\n\n\n\n Ok, this is the final demo:<\/p>\n\n\n\n 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<\/p>\n\n\n\n We implement the if-else effect in CSS through the Isn\u2019t it fun?<\/p>\n\n\n\n In fact, there is another part of the original interview question, which is simply: let the color switch between multiple values. Just using 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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[132],"tags":[],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2397"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2397"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2397\/revisions"}],"predecessor-version":[{"id":2398,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2397\/revisions\/2398"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"\/](\"https:\/\/miro.medium.com\/max\/519\/1*Xh9Asp2UP001oLzmNIS2dw.gif\")
<\/figure>\n\n\n\nAnalysis<\/h1>\n\n\n\n
let color;if (reads < 100){
color = 'gray'} else {
color = 'brown'
}<\/pre>\n\n\n\nImplement if-else in CSS<\/h1>\n\n\n\n
clamp<\/code>.<\/p>\n\n\n\nclamp<\/code> function as pseudocode like this:<\/p>\n\n\n\n![\"\"\/](\"https:\/\/miro.medium.com\/max\/700\/1*vB8R3jhAAOfMnO3mE3d4dw.gif\")
<\/figure>\n\n\n\nfont-size<\/code> will not exceed 20px, nor will it be lower than 10px.<\/p>\n\n\n\nclamp<\/code>. If you still have questions about clamp<\/code>, you can refer to the MDN documentation or leave a comment here.<\/p>\n\n\n\nresult<\/code> changes according to the value of var<\/code>:<\/p>\n\n\n\nvar<\/code> is less than 100, the value of the result<\/code> is 10;<\/li>var<\/code> is greater than or equal to 100, the result<\/code> becomes 20.<\/li><\/ul>\n\n\n\nlet result;if(var < 100){
result = 10} else {
result = 20
}<\/pre>\n\n\n\nclamp<\/code> can limit the value of var to a range, but we now want the value of the result to be either 10 or 20.<\/p>\n\n\n\nvar<\/code> so that its value either reaches the upper limit or the lower limit of the interval.<\/p>\n\n\n\nlet result = clamp(10, (var-99) * 20, 20)<\/pre>\n\n\n\n
var<\/code> is 99, then the expression becomes
clamp(10, 0, 20), takes 10.<\/li>var<\/code> is 100, then it becomes
clamp(10, 20, 20), takes 20.<\/li><\/ul>\n\n\n\n![\"\"\/](\"https:\/\/miro.medium.com\/max\/700\/1*x27NP_waV-xdNiEmTdRRJg.png\")
<\/figure>\n\n\n\nvar<\/code> is less than 50, the value of the result<\/code> is 5.<\/li>var<\/code> is greater than or equal to 50, the value of the result<\/code> is 15.<\/li><\/ul>\n\n\n\nlet result = clamp(5, (var-49) * 15, 15)<\/pre>\n\n\n\n
![\"\"\/](\"https:\/\/miro.medium.com\/max\/700\/1*UdYToy-sJSTlBdDgHioIiA.png\")
<\/figure>\n\n\n\nSwitch Colors in CSS<\/h1>\n\n\n\n
content<\/code> and counter-reset<\/code> , you can check MDN documentation.<\/p>\n\n\n\n#aa540e<\/code>, which is represented by HSL color as hsl(27, 50%, 36%)<\/code>, as follows:<\/p>\n\n\n\n![\"\"\/](\"https:\/\/miro.medium.com\/max\/700\/1*kAtD2lKPlZijUMwIEKnrLg.png\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/miro.medium.com\/max\/700\/1*UT3RmBx5T9rq3Ir72M4AhA.png\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/miro.medium.com\/max\/700\/1*-txhGQ3PfLoEzRmTVtaDOQ.png\")
<\/figure>\n\n\n\nhsl(27, 85%, 36%)<\/code> and hsl(27, 85%, 36%)<\/code> .<\/p>\n\n\n\n![\"\"\/](\"https:\/\/miro.medium.com\/max\/700\/1*269m8U4FgDdmn3-aGaW_Yg.gif\")
<\/figure>\n\n\n\nConclusion<\/h1>\n\n\n\n
clamp<\/code> function, and finally, let the color switch according to the variable’s value.<\/p>\n\n\n\nif-else<\/code> is not enough for this requirement. If you are interested in this topic, you can please follow me.<\/p>\n","protected":false},"excerpt":{"rendered":"