英文 | 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 效果。
首先,让我们了解一个叫做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 的值小于 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 不足以满足此要求,有兴趣的话,可以留言交流学习。
近年来,从事JavaScript的程序员越来越多,JavaScript的曝光率也越来越高,如果你想转行试试JavaScript,不妨收下这份面试题及答案,没准用得上。当然,如果针对这些问题,你有更棒的答案,欢迎移步至评论区。
面试的公司分别是:阿里、网易、滴滴、今日头条、有赞、挖财、沪江、饿了么、携程、喜马拉雅、兑吧、微医、寺库、宝宝树、海康威视、蘑菇街、酷家乐、百分点和海风教育。以下是面试题汇总
web前端常见的面试题:包括:HTML 常见题目、CSS类的题目、JavaScript类的题目、面试官爱问的问题。原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的?你遇到过比较难的技术问题是?你是如何解决的?
毕业之后就在一直合肥小公司工作,没有老司机、没有技术氛围,在技术的道路上我只能独自摸索。老板也只会画饼充饥,前途一片迷茫看不到任何希望。于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该是合肥的几十倍吧。。。。
javascript的typeof返回哪些数据类型;例举3种强制类型转换和2种隐式类型转换?split() join() 的区别; 数组方法pop() push() unshift() shift();IE和标准下有哪些兼容性的写法
解析 URL Params 为对象;模板引擎实现;转化为驼峰命名;查找字符串中出现最多的字符和个数;字符串查找请使用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中
虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中,并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤,整个过程被称为调和。函数组件和类组件当然是有区别的
使用渐进式框架的代价很小,从而使现有项目(使用其他技术构建的项目)更容易采用并迁移到新框架。 Vue.js 是一个渐进式框架,因为你可以逐步将其引入现有应用,而不必从头开始重写整个程序。
AJAX 即 Asynchronous Javascript And XML(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。它可以令开发者只向服务器获取数据(而不是图片,HTML文档等资源)
本文分享 12 道 vue 高频原理面试题,覆盖了 vue 核心实现原理,其实一个框架的实现原理一篇文章是不可能说完的,希望通过这 12 道问题,让读者对自己的 Vue 掌握程度有一定的认识(B 数),从而弥补自己的不足,更好的掌握 Vue
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!