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

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

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

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

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

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

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

1. 設(shè)置了背景的 <button> 按鈕；
2. HTML5  <summary> 元素；
3. 設(shè)置了HTML  tabindex 屬性的元素；

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

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

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

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

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

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

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

此時(shí)，我們點(diǎn)擊設(shè)置了 tabindex 屬性的 <div> 元素沒(méi)有輪廓，如下圖：

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

完美，感動(dòng)！

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

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

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

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

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

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