前言

凡是可以用 JavaScript 來寫的應(yīng)用，最終都會用 JavaScript 來寫。——Atwood定律

雖然萬物都可以是JavaScript，但某種程度css的運(yùn)行效率會比JavaScript高，所以筆者認(rèn)為:能用CSS實(shí)現(xiàn)的就不用麻煩JavaScript。

兩種語言都有不同的用途隨著瀏覽器版本特性和屬性的增加，CSS正成為一種功能強(qiáng)大的語言，能夠處理我們以前依賴JavaScript實(shí)現(xiàn)的功能。

平滑滾動

曾經(jīng)有一段時(shí)間，我們不得不依靠JavaScript的window.scrollY來實(shí)現(xiàn)來執(zhí)行此操作，如果想平滑滾動還要依賴定時(shí)器增加一個(gè)動畫。隨著scroll-behavior屬性的新增，我們可以使用一行CSS代碼來處理網(wǎng)站上的平滑滾動！瀏覽器支持約為75％，兼容性還是挺不錯(cuò)的。

html?{
??scroll-behavior:?smooth;
}

滾動捕抓

幻燈片、圖片庫這些也是前端高頻使用功能，上一代CSS能力有限，我們不得不依賴JavaScript來完成這功能。現(xiàn)在只要幾行代碼就可以實(shí)現(xiàn)此功能。從某種意義上說，它與Flexbox或CSS Grid的工作原理類似，即您需要一個(gè)容器元素，在該容器元素上設(shè)置scrolln-snap-type和多個(gè)為其設(shè)置了scroll-snap-align的子元素，如下所示：

class=”parent”>
??<section?class=”child”>section>
??<section?class=”child”>section>
??<section?class=”child”>section>
</main>

.parent?{
??scroll-snap-type:?x?mandatory;
}

.child?{
??scroll-snap-align:?start;
}

CSS動畫

曾經(jīng)某個(gè)時(shí)期，大多數(shù)開發(fā)者使用 JavaScript(或者jQuery) 給瀏覽器中的元素添加動畫。讓這個(gè)淡化，讓那個(gè)擴(kuò)大，很簡單。隨著互動的項(xiàng)目越來越復(fù)雜，移動設(shè)備的大量增加，表現(xiàn)性能變得越來越重要。Flash 被拋棄，有天賦的動畫開發(fā)者使用 HTML5 去實(shí)現(xiàn)過去從未實(shí)現(xiàn)的效果。他們需要更好的工具去開發(fā)復(fù)雜的動畫序列并獲得最好的性能。JavaScript(或者jQuery) 并不能夠做到。瀏覽器日漸成熟的同時(shí)也開始提供了一些解決方案。最被廣泛接受的方案是使用 CSS 動畫。

表單驗(yàn)證

html5 豐富了表單元素，提供了類似 required , email , tel 等表單元素屬性。同樣的，我們可以利用 :valid 和 :invalid 來做針對html5表單屬性的校驗(yàn)。

• :required 偽類指定具有required 屬性的表單元素
• :valid 偽類指定一個(gè)通過匹配正確的所要求的表單元素
• :invalid 偽類指定一個(gè)不匹配指定要求的表單元素

利用 CSS 的 content 屬性 attr 抓取資料

想必大家都想到了偽元素 after ，但是文字怎么獲得呢，又不能用 JavaScript 。

CSS 的偽元素是個(gè)很強(qiáng)大的東西，我們可以利用他做很多運(yùn)用，通常為了做一些效果， content:" " 多半會留空，但其實(shí)可以在里面寫上 attr 抓資料哦！

"這里是獲取content的內(nèi)容">??
hover
</div>

div{
width:100px;
border:1px?solid?red;??
position:relative;
}
div:hover:after{
content:attr(data-msg);
position:absolute;
font-size:?12px;
width:200%;
line-height:30px;
text-align:center;
left:0;
top:25px;
border:1px?solid?green;
}

鼠標(biāo)懸浮時(shí)顯示

鼠標(biāo)懸浮的場景十分常見，例如導(dǎo)航的菜單：

一般要把隱藏的東西如菜單作為hover目標(biāo)的子元素或者相鄰元素，才方便用css控制，例如上面的菜單，是把menu當(dāng)作導(dǎo)航的一個(gè)相鄰元素：

<li?class="user">用戶li>
<li?class="menu">
????<ul>
???????<li>賬戶設(shè)置li>
???????<li>登出li>
????ul>
li>

menu在正常態(tài)下是隱藏的：

.menu{
??display:?none;
}

而當(dāng)導(dǎo)航hover時(shí)顯示：

/*使用相鄰選擇器和hover*/
.user:hover?+?.menu{
??display:?list-item;
}

注意這里使用了一個(gè)相鄰選擇器，這也是上面說的為什么要寫成相鄰的元素。menu的位置可以用absolute定位。

同時(shí)menu自已本身hover的時(shí)候也要顯示，否則鼠標(biāo)一離開導(dǎo)航的時(shí)候，菜單就消失了：

.menu:hover{
????display:?list-item;
}

這里會有一個(gè)小問題，即menu和導(dǎo)航需要挨著一起，否則中間有空隙的話，上面添加的菜單hover就不能發(fā)揮作用了，但是實(shí)際情況下從美觀的角度，兩者是要有點(diǎn)距離的。這個(gè)其實(shí)也好解決，只要在menu上面再畫一個(gè)透明的區(qū)域就好了，如下藍(lán)色的方塊：

可以用before/after偽類用absoute定位實(shí)現(xiàn)：

ul.menu:before{
????content:?"";
????position:?absolute;
????left:?0;
????top:?-20px;
????width:?100%;
????height:?20px;
????/*background-color:?rgba(0,0,0,0.2);*/
}

如果我既寫了css的hover，又監(jiān)聽了mouse事件，用mouse控制顯示隱藏，雙重效果會有什么情況發(fā)生，如果按正常套路，在mouse事件里面hover的時(shí)候，添加了一個(gè)display: block的style，會覆蓋掉CSS的設(shè)置。也就是說，只要hover一次，css的代碼就不管用了，因?yàn)閮?nèi)聯(lián)樣式的優(yōu)先級會高于外鏈的。但是實(shí)際情況下會有意外發(fā)生，那就是在移動端iphone上面，觸摸會觸發(fā)CSS的hover，并且這個(gè)的觸發(fā)會很高概率地先于touchstart事件，在這個(gè)事件里面會判斷當(dāng)前是顯示還是隱藏的狀態(tài)，由于css的hover發(fā)揮了作用，所以判斷為顯示，然后又把它隱藏了。也就是說，點(diǎn)一次不出來，要點(diǎn)兩次。所以最好別兩個(gè)同時(shí)寫。第二種場景，使用子元素，這個(gè)更簡單。把hover的目標(biāo)和隱藏的對象當(dāng)作同一個(gè)父容器的子元素，然后hover寫在這個(gè)父容器上面就可以了，不用像上面那樣，隱藏元素也要寫個(gè)hover：

.marker-container?.detail-info{
????display:?none
}

.marker-container:hover?.detail-info{
???display:?block
}

最后

這里展示也只是一些常用的功能，其實(shí)還有很多可以通過CSS實(shí)現(xiàn)的功能，有興趣的同學(xué)繼續(xù)研究一下更多不依賴JavaScript完成的CSS功能。