強(qiáng)大的CSS：focus-visible偽類真的太6了！

一、快速了解CSS :focus-visible偽類

:focus-visible 偽類是非常年輕的一個偽類，目前僅Chrome瀏覽器標(biāo)準(zhǔn)支持，但足夠了。如果你是一個深入用戶體驗的開發(fā)者，這個偽類會非常有用。

潮陽網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運(yùn)維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

:focus-visible 偽類應(yīng)用的場景是：元素聚焦，同時聚焦輪廓瀏覽器認(rèn)為應(yīng)該顯示。

是不是很拗口？規(guī)范就是這么定義的。 :focus-visible 的規(guī)范并沒有強(qiáng)行約束匹配邏輯，而是交給了UA（也就是瀏覽器）。我們通過真實(shí)的案例來解釋下這個偽類是做什么用的。

在所有現(xiàn)代瀏覽器下，鏈接元素鼠標(biāo)點(diǎn)擊的時候是不會有焦點(diǎn)輪廓的，但是鍵盤訪問的時候會出現(xiàn)，這是非常符合預(yù)期的體驗。

但是在Chrome瀏覽器下，出現(xiàn)了一些特殊場景并不是這么表現(xiàn)的：


tabindex

屬性的元素；

以上3個場景，在Chrome瀏覽器下鼠標(biāo)點(diǎn)擊的時候也會出現(xiàn)顯眼的焦點(diǎn)輪廓，如下圖：

這其實(shí)是我們不希望看到的，輪廓在點(diǎn)擊的時候不應(yīng)該出現(xiàn)（沒有高亮的必要），但是鍵盤訪問的時候需要出現(xiàn)（讓用戶知道當(dāng)前聚焦元素），F(xiàn)irefox以及IE瀏覽器的表現(xiàn)均符合我們的期望，點(diǎn)擊訪問無輪廓，鍵盤訪問才有，Safari瀏覽器按鈕表現(xiàn)符合期望。

但是，我們又不能簡簡單單設(shè)置 outline:none 來處理，因為這樣會把鍵盤訪問時候應(yīng)當(dāng)出現(xiàn)的焦點(diǎn)輪廓給隱藏掉，帶來嚴(yán)重的無障礙訪問問題。

為了兼顧視覺體驗和鍵盤無障礙訪問，我之前的做法是使用JavaScript進(jìn)行判斷，如果元素的 :focus 觸發(fā)是鍵盤訪問觸發(fā)，就給元素添加自定義的 outline 輪廓，否則，去除 outline ，還是頗有成本的。

現(xiàn)在有了 :focus-visible 偽類，所有的問題迎刃而解，在目前版本的Chrome瀏覽器下，瀏覽器認(rèn)為鍵盤訪問觸發(fā)的元素聚焦才是 :focus-visible 所表示的聚焦。換句話說， :focus-visible 可以讓我們知道元素的聚焦行為到底是鼠標(biāo)觸發(fā)還是鍵盤觸發(fā)。所以，如果我們希望去除鼠標(biāo)點(diǎn)擊時候的 outline 輪廓，而保留鍵盤訪問時候的 outline 輪廓，只要一條短短的CSS規(guī)則就可以了：

:focus:not(:focus-visible) {
    outline: 0;
}

Chrome瀏覽器下讓人頭疼的輪廓問題就解決了，眼見為實(shí)，您可以狠狠地點(diǎn)擊這里： :focus-visible與Chrome瀏覽器outline輪廓控制demo

此時，我們點(diǎn)擊設(shè)置了 tabindex 屬性的

元素沒有輪廓，如下圖：

但是，如果我們使用鍵盤訪問，例如按下TAB鍵進(jìn)行索引，輪廓依然存在，如如下圖：

完美，感動！

二、應(yīng)該很快就會默認(rèn)支持

目前Chrome瀏覽器（版本67+就支持）雖然支持，但是，需要瀏覽器開啟支持web實(shí)驗特性才行：

但是我相信，很快就會默認(rèn)放開，都時候，之前寫UI組件時候折騰的一大堆體驗相關(guān)的JavaScript代碼就可以全部刪掉了。

如果你迫不及待想在項目中應(yīng)用這么好的特性，可以引入這段polyfill腳本。

自己是一個五年的前端工程師,希望本文對你有幫助！

這里推薦一下我的前端學(xué)習(xí)交流扣qun：731771211 ，里面都是學(xué)習(xí)前端的，如果你想制作酷炫的網(wǎng)頁，想學(xué)習(xí)編程。自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計模式】到移動端HTML5的項目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴，每天分享技術(shù)

分享名稱：強(qiáng)大的CSS：focus-visible偽類真的太6了！
URL分享：http://weahome.cn/article/gjpjpg.html