分享一个高级CSS面试题:在CSS中实现if-else!

更新日期: 2022-07-22阅读: 78标签: 面试题
英文 | https://medium.com/frontend-canteen/an-advanced-css-interview-question-implement-if-else-in-css-bb681d786d76
翻译 | 杨小爱

我的一个朋友在最近的一次面试中遇到了一个有趣的 CSS 面试问题。当我第一次看到这个问题时,我认为这是一个常见的CSS问题。然而,经过仔细研究,我发现了这个问题的有趣部分。

面试题:请用CSS实现如下效果:


页面上有一些数字显示文章阅读的数量。如果数字小于 100,则数字的颜色为灰色。如果数字大于或等于 100,则数字为棕色,而且这种颜色可以动态调整,而不是提前预设。


最后面试官要求用纯CSS来解决这个问题,你知道如何达到这个效果吗?

题目分析

这个问题的本质是什么?

这个问题的本质很简单,也就是说,这实际上是一个 if-else 问题。

如果我们用伪代码描述这个问题,它应该是这样的:

let color;
if (reads < 100){
  color = 'gray'
} else {
  color = 'brown'
}

所以现在问题变成了:我们如何在 CSS 中实现这个 if-else 逻辑?请记住,CSS 中没有 if-else 关键字之类的东西。

在 CSS 中实现 if-else

在 CSS 中实现 if-else 的逻辑是本题考查的核心技能。让我们在下面完成这个逻辑。如果你学会了这个技巧,你可以用它来实现许多强大的 CSS 效果。

首先,让我们了解一个叫做clamp的函数

clamp() CSS 函数将一个值限制在上限和下限之间。clamp() 允许在定义的最小值和最大值之间的值范围内选择中间值。

基本语法格式:

clamp(min, var, max)

我们可以将clamp函数理解为这样的伪代码:

funciton clamp(min, var, max){
  if(var <= min){
    return min
  }

  if(var >= max){
    return max
  }

  if(var > min && var < max){
    return var
  }
}

所以:

clamp(10, 13, 20) → 13

clamp(10, 2, 20) → 10

clamp(10, 30, 20) → 20

用法示例:


font-size 的值不会超过 20px,也不会低于 10px。

这是clamp的基本用法。

如果您对clamp仍有疑问,可以参考 MDN 文档。

接下来,我们在 CSS 中实现这个功能。

result的值根据 var 的值而变化:

当 var 的值小于 100 时,结果的值为 10;

当 var 的值大于等于 100 时,结果变为 20。

如果我们用伪代码描述这个问题,它应该是这样的:

let result;
if(var < 100){
  result = 10
} else {
  result = 20
}

这个要求和clamp函数类似,但又不一样。clamp可以将 var 的值限制在一个范围内,但我们现在希望结果的值是 10 或 20。

那我们怎么做?

有一个特殊的技巧:我们可以放大 var 的变化,使其值要么达到区间的上限,要么达到区间的下限。

于是:

let result = clamp(10, (var-99) * 20, 20)

这会产生一个效果:

  • 如果 var 的值为 99,则表达式变为:clamp(10, 0, 20), takes 10.
  • 如果 var 的值为 100,则变为:clamp(10, 20, 20), takes 20.

用一张图解释:


同样,如果我们希望:

当 var 的值小于 50 时,result的值为 5。

当 var 的值大于等于 50 时,result的值为 15。

我们只需要这样写:

let result = clamp(5, (var-49) * 15, 15)

你有没有注意到:这实际上是 if-else 的效果,我们做到了。


在 CSS 中切换颜色

回到最初的面试问题。

为了让我们后面可以使用 CSS 进行变量计算,我们需要将值放在一个 CSS 变量中,所以 html 可以这样写:

<num>1<span>reads</span></num>
<num>99<span>reads</span></num>
<num>102<span>reads</span></num>

如果我们不需要考虑 HTML 语义或 seo 因素,这里的“数字”和“读取”都可以由伪元素生成:

<head>
  <style>
    num::before {
      counter-reset: num var(--num);
      content: counter(num);
    }

    num::after {
      content: 'reads';
    }
</style>
</head>

<body>
  <div>
    <num></num>
    <num></num>
    <num></num>
  </div>
</body>

如果对 content 和 counter-reset 不熟悉,可以查看 MDN 文档。

具体的演示效果,可以通过以下地址查看:

棕色为#aa540e,用HSL颜色表示为hsl(27, 50%, 36%),如下:


它的饱和度控制颜色的鲜艳程度。饱和度越高,颜色越鲜艳,饱和度越低,颜色越暗。当饱和度降低到0时,就变成了完全的灰色,如下:


在灰色和棕色之间切换颜色,即在 hsl(27, 85%, 36%) 和 hsl(27, 85%, 36%) 之间切换。

于是就有如下代码:

num{
  --s: clamp(0%,(var(--num) - 99) * 99%,85%);/* >100 */
  color: hsl(27 var(--s) 36%);
}

最终的演示:


总结

我们通过clamp函数在CSS中实现if-else效果,最后让颜色根据变量的值进行切换。

其实原面试题还有另外一部分,简单来说就是:让颜色在多个值之间切换。仅使用 if-else 不足以满足此要求,有兴趣的话,可以留言交流学习。

链接: https://www.fly63.com/article/detial/11929

史上最全的Javascript面试题总结(内附答案)

近年来,从事JavaScript的程序员越来越多,JavaScript的曝光率也越来越高,如果你想转行试试JavaScript,不妨收下这份面试题及答案,没准用得上。当然,如果针对这些问题,你有更棒的答案,欢迎移步至评论区。

高级前端面试题汇总

面试的公司分别是:阿里、网易、滴滴、今日头条、有赞、挖财、沪江、饿了么、携程、喜马拉雅、兑吧、微医、寺库、宝宝树、海康威视、蘑菇街、酷家乐、百分点和海风教育。以下是面试题汇总

web前端常见的面试题,基础知识点

web前端常见的面试题:包括:HTML 常见题目、CSS类的题目、JavaScript类的题目、面试官爱问的问题。原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的?你遇到过比较难的技术问题是?你是如何解决的?

前端面试题汇总(主要为Vue)

毕业之后就在一直合肥小公司工作,没有老司机、没有技术氛围,在技术的道路上我只能独自摸索。老板也只会画饼充饥,前途一片迷茫看不到任何希望。于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该是合肥的几十倍吧。。。。

js常见面试题

javascript的typeof返回哪些数据类型;例举3种强制类型转换和2种隐式类型转换?split() join() 的区别; 数组方法pop() push() unshift() shift();IE和标准下有哪些兼容性的写法

Js字符串类面试题

解析 URL Params 为对象;模板引擎实现;转化为驼峰命名;查找字符串中出现最多的字符和个数;字符串查找请使用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中

35道必须要清楚的 React面试题

虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中,并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤,整个过程被称为调和。函数组件和类组件当然是有区别的

23 个 Vue.js 初级面试题

使用渐进式框架的代价很小,从而使现有项目(使用其他技术构建的项目)更容易采用并迁移到新框架。 Vue.js 是一个渐进式框架,因为你可以逐步将其引入现有应用,而不必从头开始重写整个程序。

AJAX原理及常见面试题

AJAX 即 Asynchronous Javascript And XML(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。它可以令开发者只向服务器获取数据(而不是图片,HTML文档等资源)

12道vue高频原理面试题,你能答出几道?

本文分享 12 道 vue 高频原理面试题,覆盖了 vue 核心实现原理,其实一个框架的实现原理一篇文章是不可能说完的,希望通过这 12 道问题,让读者对自己的 Vue 掌握程度有一定的认识(B 数),从而弥补自己的不足,更好的掌握 Vue

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!