前言

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

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

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

平滑滾動(dòng)

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

html {
  scroll-behavior: smooth;
}

完整代碼[1]

滾動(dòng)捕抓

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

<main 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;
}

完整代碼[2]

CSS動(dòng)畫

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

完整代碼[3]

表單驗(yàn)證

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

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

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

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

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

<div data-msg="這里是獲取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)懸浮的場(chǎng)景十分常見，例如導(dǎo)航的菜單：

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

<!--menu為相鄰的li-->
<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;
}

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

到此這篇關(guān)于能用CSS實(shí)現(xiàn)的就不要麻煩JavaScript了的文章就介紹到這了,更多相關(guān)css平滑滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論