乐趣区

关于javascript:凡是可以用CSS实现的最终都会用CSS实现

jiezi

前言

但凡能够用 JavaScript 来写的利用，最终都会用 JavaScript 来写。— Atwood 定律

但凡能够用 CSS 实现的，最终都会用 CSS 实现。— 笔者定律

具体看同学们本人的应用习惯。不过用好 CSS，还是能够进步不少开发效率，至多代替很多 JavaScript 场景，缩小 JavaScript 代码。

上一篇文章能用 CSS 实现的就不必麻烦 JavaScript 提到好几种罕用场景，这次笔者再分享多几个用 CSS 代替 JavaScript 的场景。心愿大家能在日常开发中应用到。

拾色器

拾色器是 JavaScript 高频应用场景，如果本人开发一个也是非常复杂的，找第三方插件用也要肯定的学习老本。input标签的 type 字段提供了 Color 类型，它让咱们很容易去应用拾色器，另外这个拾色器还能够汲取整个电脑桌面的色彩。

<input type="color" value="#0000ff">
img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
input { 
    padding: 0;
    border: none; 
    position: absolute;
    width: 100%; 
    height: 100%;
    mix-blend-mode: hue; // 色相模式
    cursor: pointer;
}

这里说一下 CSS3 新增了一个很有意思的属性 — mix-blend-mode，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过去就是混合模式。
mix-blend-mode 用于多个不同标签间的混合模式，其中这次用到调整车身色彩的 hue 代表色相模式，相熟 PS 的同学，是很容易了解。mix-blend-mode 还有其余模式，有趣味的同学能够查阅一下 mix-blend-mode 的文档。

残缺代码演示

轮播图

轮播图陈词滥调的性能，大多数都是用 JavaScript 的解决方案。这个 CSS 计划代码量也不少，应用哪种计划就依据理论状况来衡量咯。

残缺代码演示

手风琴

残缺代码演示

放大镜

之前写过一遍文章 我要造轮子系列 -Vue3 放大镜组件 是用 vue3 编写，代码量尽管不多，但必定比 CSS 简单，外面波及解决坐标值、解决边界地位等等，所以 CSS 计划的放大镜还是一个不错的抉择。

残缺代码演示

打字成果

如果用 JavaScript 编写须要用到定时器加截取字符串的动画。

  <h1>Welcome to GuangZhou</h1>
@-webkit-keyframes typing {from { width: 0;} }
@-webkit-keyframes blink-caret {50% { border-color: transparent;} }

h1 { 
    font: bold 300% Consolas, Monaco, monospace;
    border-right: .1em solid black;
    width: 16.5em; 
    width: 21ch;
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: typing 7s steps(21, end),
    blink-caret .5s step-end infinite alternate;
}

rem 布局

过来挪动端用 rem 布局时候是依据不同的屏幕宽度设置不同的 font-size 来做到适配，就不得不用到 JavaScript 来设置。

例如：以 750px 设计稿作为基准，根节点设置 font-size 为 100px , 只思考 DPR 为 2 的状况

JavaScript 计划

 document.querySelector('html').style.fontSize = `${window.innerWidth / 7.5}px`;

CSS 计划

html{font-size: 100vw / 750}

截断文本

截断文本也是前端高频应用场景，置信很多同学曾经用到它。过来是通过后盾的截取，但这种办法容易失落数据，也不利于 SEO，而通过 CSS 截断则灵便多变，可对立使用到整个我的项目中。

这项技术次要使用了 text-overflow 属性，虽是 css3 新增的属性，然而在各大浏览器中却有很好兼容性。

单行截断文本

.ellipsis {
    display: inline-block;
    width: 40px;
    white-space: nowrap;
    text-overflow :ellipsis;
    overflow: hidden;
}

多行截断文本

.ellipsis {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

自定义 input 焦点光标的色彩

有时设计师有些刁钻的需要，比方感觉 input 光标的色彩不能与整体格调对立，这时候咱们就能够通过设置 caret-color属性来满足这个需要啦。

<input class="custom" value="光标变成红色啦" />
input.custom {caret-color: red;}

粘性的导航

过来这个性能还须要用 offsetTop 和window.scrollY作判断。CSS3 新增 position:sticky 让咱们很容易实现此性能，置信不少同学也开始应用此属性。
具备粘性定位的元素将充当绝对定位的元素，直到达到视口上的给定点而后变为固定定位的元素为止。应用 -webkit 前缀的浏览器反对高达 92%。

.nav {
    position: sticky;
    top: 0;
}

埋点统计

当一个网站或者 App 的规模达到肯定水平，须要剖析用户在 App 或者统计网站的相应操作，则须要埋点统计用户行为，这个不必多说。
上一篇文章能用 CSS 实现的就不必麻烦 JavaScript 提到，利用 CSS 的 content 属性 attr 抓取材料，其实咱们还能够在 content 属性中做埋点统计这个性能。

.link:active::after {
  color: red;
  content: url("填写统计的接口");
}

当然这种形式应用比较简单的事件埋点。简单的话还是须要 JavaScript 操作，JavaScript 埋点统计用户能够通过浏览器禁用，CSS 的话没方法禁用。

另外应用这个 content 属性还有很多有意思的玩法，例如下图的加载动画。

<h1 data-text="玩命加载中..."> 玩命加载中...</h1>
h1 {
    position: relative;
    color: rgba(0, 0, 0, .3);
    font-size: 5em
}
h1:before {content: attr(data-text);
    position: absolute;
    overflow: hidden;
    max-width: 7em;
    white-space: nowrap;
    color: #fff;
    animation: loading 8s linear;
}
@keyframes loading {
    0% {max-width: 0;}
}

更有意思的聚光灯成果

应用 clip-path 来实现遮罩成果，本例中属性值为 ellipse(100px 100px at 0% 50%)，前两个参数为椭圆的 x 轴长度和 y 轴高度，at 前面的两个参数为绝对于本身元素的 x 轴地位和 y 轴地位。

留神：应用这个属性时，须要留神浏览器的兼容状况，例如：Safari 须要加前缀-webkit-
在应用兼容前缀的时候，肯定要保留原 CSS（非前缀）代码，不可删去。

设置对文字设置背景时，默认是文字所在的块级元素笼罩背景，如果想要将背景仅作用于文字上，相似 color 的成果，能够应用背景遮罩background-clip: text;

<h1 dot-light="LIZHENWEN">LIZHENWEN</h1>
h1 {
    font-size: 9rem;
    font-family: Helvetica;
    letter-spacing: -.3rem;
    color: #333;
    position: relative;
}

h1::after {content: attr(dot-light);
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    clip-path: ellipse(100px 100px at 0% 50%);
    animation: SpotLight 5s infinite;
    background-size: 150%;
    background-position: center center;
    -webkit-background-clip: text;
    background-clip: text;
}

@keyframes SpotLight {
    0% {clip-path: ellipse(100px 100px at 0% 50%);
    }

    50% {clip-path: ellipse(100px 100px at 100% 50%);
    }

    100% {clip-path: ellipse(100px 100px at 0% 50%);
    }
}

残缺代码演示

配合伪元素 ::marker 的应用，有意思的是，::marker 还是能够动态变化的，利用这点，能够简略制作一些有意思的 hover 成果。

li {
  color: #000;
  transition: .2s all;
}
li:hover {color: #ff6000;}
li::marker {content: '😩';}
li:hover::marker {content: '😁';}

炫酷的火焰成果

看到这个火焰成果想必有很多同学第一工夫想到的计划是用 Three.js 来实现，但它实打实用 CSS 实现的。笔者看到这个 CSS 成果的时候也是惊叹，刷新对 CSS 的认知，感觉本人要重学 CSS 节奏。Σ(⊙▽⊙”a

要实现这个火焰成果须要 filter: contrast() 与 filter: blur() 配合应用，看到 filter 置信很多同学都比拟生疏。它是 CSS3 新增的一个滤镜属性。也是相熟 PS 应用的同学，就会很容易了解这个属性。

残缺代码演示

最初

尽管新一代 CSS 能够适应很多场景，但不要贪杯哦！！很多属性还是实验性阶段，兼容性有待商讨，同学们也要依据理论状况去应用。随着 CSS 版本的更新迭代，下一代 CSS 将会带来更多新个性，为咱们提供更多开发便利性，大家刮目相待。

退出移动版