前言
凡是可以用 JavaScript 來寫的應用，最終都會用 JavaScript 來寫?！?Atwood定律
凡是可以用CSS實現(xiàn)的就不用麻煩JavaScript?！?筆者定律
具體看同學們自己的使用習慣。不過用好CSS，還是可以提高不少開發(fā)效率，至少代替很多JavaScript場景，減少JavaScript代碼。
上一篇文章能用CSS實現(xiàn)的就不用麻煩JavaScript提到好幾種常用場景，這次筆者再分享多幾個用CSS代替JavaScript的場景。希望大家能在日常開發(fā)中使用到。
拾色器
拾色器是JavaScript高頻使用場景，如果自己開發(fā)一個也是非常復雜的，找第三方插件用也要一定的學習成本。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的文檔。
輪播圖
輪播圖老生常談的功能，大多數(shù)都是用JavaScript的解決方案。這個CSS方案代碼量也不少，使用哪種方案就根據(jù)實際情況來權衡咯。
手風琴
放大鏡
之前寫過一遍文章 我要造輪子系列 -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 布局時候是根據(jù)不同的屏幕寬度設置不同的 font-size 來做到適配，就不得不用到JavaScript來設置。
例如：以 750px 設計稿作為基準，根節(jié)點設置 font-size 為 100px ,只考慮 DPR 為 2 的情況
JavaScript方案
document.querySelector('html').style.fontSize = `${window.innerWidth / 7.5 }px`;
CSS方案
html{
font-size: 100vw / 750
}
截斷文本
截斷文本也是前端高頻使用場景，相信很多同學已經用到它。過去是通過后臺的截取，但這種方法容易丟失數(shù)據(jù)，也不利于SEO，而通過CSS截斷則靈活多變，可統(tǒng)一運用到整個項目中。
這項技術主要運用了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光標的顏色不能與整體風格統(tǒng)一，這時候我們就可以通過設置 caret-color屬性來滿足這個需求啦。
<input class="custom" value="光標變成紅色啦" />
input.custom {
caret-color: red;
}
粘性的導航
過去這個功能還需要用offsetTop和window.scrollY作判斷。CSS3新增position:sticky 讓我們很容易實現(xiàn)此功能，相信不少同學也開始使用此屬性。
具有粘性定位的元素將充當相對定位的元素，直到到達視口上的給定點然后變?yōu)楣潭ǘㄎ坏脑貫橹埂?使用-webkit前綴的瀏覽器支持高達92％。
.nav {
position: sticky;
top: 0;
}
埋點統(tǒng)計
當一個網(wǎng)站或者 App 的規(guī)模達到一定程度，需要分析用戶在 App 或者統(tǒng)計網(wǎng)站的相應操作，則需要埋點統(tǒng)計用戶行為，這個不用多說。
上一篇文章能用CSS實現(xiàn)的就不用麻煩JavaScript提到，利用 CSS 的 content 屬性 attr 抓取資料，其實我們還可以在content屬性中做埋點統(tǒng)計這個功能。
.link:active::after {
color: red;
content: url("填寫統(tǒng)計的接口");
}
當然這種方式使用比較簡單的事件埋點。復雜的話還是需要 JavaScript 操作，JavaScript 埋點統(tǒng)計用戶可以通過瀏覽器禁用，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來實現(xiàn)遮罩效果，本例中屬性值為ellipse(100px 100px at 0% 50%)，前兩個參數(shù)為橢圓的x軸長度和y軸高度，at后面的兩個參數(shù)為相對于自身元素的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 還是可以動態(tài)變化的，利用這點，可以簡單制作一些有意思的 hover 效果。
li {
color: #000;
transition: .2s all;
}
li:hover {
color: #ff6000;
}
li::marker {
content: '??';
}
li:hover::marker {
content: '??';
}
炫酷的火焰效果
看到這個火焰效果想必有很多同學第一時間想到的方案是用Three.js來實現(xiàn)，但它實打實用CSS實現(xiàn)的。筆者看到這個CSS效果的時候也是驚嘆，刷新對CSS的認知，感覺自己要重學CSS節(jié)奏。Σ(⊙▽⊙"a
要實現(xiàn)這個火焰效果需要 filter: contrast() 與 filter: blur() 配合使用，看到filter相信很多同學都比較陌生。它是CSS3新增的一個濾鏡屬性。也是熟悉PS使用的同學，就會很容易理解這個屬性。
最后
雖然新一代CSS可以適應很多場景，但不要貪杯哦！！很多屬性還是實驗性階段，兼容性有待商榷，同學們也要根據(jù)實際情況去使用。隨著CSS版本的更新迭代，下一代CSS將會帶來更多新特性，為我們提供更多開發(fā)便利性，大家拭目以待。
