平滑滾動

html {  scroll-behavior: smooth;}

完整代碼：https://codepen.io/shinewen189/pen/RwVVYox

滾動捕抓

幻燈片、圖片庫這些也是前端高頻使用功能，上一代CSS能力有限，我們不得不依賴JavaScript來完成這功能。現(xiàn)在只要幾行代碼就可以實現(xiàn)此功能。

從某種意義上說，它與Flexbox或CSS Grid的工作原理類似，即您需要一個容器元素，在該容器元素上設(shè)置scrolln-snap-type和多個為其設(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;}

CSS動畫

曾經(jīng)某個時期，大多數(shù)開發(fā)者使用 JavaScript(或者jQuery) 給瀏覽器中的元素添加動畫。讓這個淡化，讓那個擴大，很簡單。

隨著互動的項目越來越復(fù)雜，移動設(shè)備的大量增加，表現(xiàn)性能變得越來越重要。

Flash 被拋棄，有天賦的動畫開發(fā)者使用 html5 去實現(xiàn)過去從未實現(xiàn)的效果。

他們需要更好的工具去開發(fā)復(fù)雜的動畫序列并獲得最好的性能。JavaScript(或者jQuery) 并不能夠做到。

瀏覽器日漸成熟的同時也開始提供了一些解決方案。最被廣泛接受的方案是使用 CSS 動畫。

表單驗證

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

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

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

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

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

<div>"這里是獲取content的內(nèi)容">  hover</div>
div{width:100px;border:1px solid red;  position:relative;}div:hover:after{content:attr(>position:absolute;font-size: 12px;width:200%;line-height:30px;text-align:center;left:0;top:25px;border:1px solid green;}

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

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

<!--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時顯示：

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

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

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

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

這里會有一個小問題，即menu和導(dǎo)航需要挨著一起，否則中間有空隙的話，上面添加的菜單hover就不能發(fā)揮作用了，但是實際情況下從美觀的角度，兩者是要有點距離的。

這個其實也好解決，只要在menu上面再畫一個透明的區(qū)域就好了，如下藍色的方塊：

可以用before/after偽類用absoute定位實現(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的時候，添加了一個display: block的style，會覆蓋掉CSS的設(shè)置。

也就是說，只要hover一次，css的代碼就不管用了，因為內(nèi)聯(lián)樣式的優(yōu)先級會高于外鏈的。

但是實際情況下會有意外發(fā)生，那就是在移動端iphone上面，觸摸會觸發(fā)CSS的hover，并且這個的觸發(fā)會很高概率地先于touchstart事件，在這個事件里面會判斷當(dāng)前是顯示還是隱藏的狀態(tài)，由于css的hover發(fā)揮了作用，所以判斷為顯示，然后又把它隱藏了。

也就是說，點一次不出來，要點兩次。所以最好別兩個同時寫。第二種場景，使用子元素，這個更簡單。

把hover的目標(biāo)和隱藏的對象當(dāng)作同一個父容器的子元素，然后hover寫在這個父容器上面就可以了，不用像上面那樣，隱藏元素也要寫個hover：

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

最后

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