強大的CSS：focus-visible偽類真的太6了！

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

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

:focus-visible 偽類應用的場景是：元素聚焦，同時聚焦輪廓瀏覽器認為應該顯示。

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

在所有現代瀏覽器下，鏈接元素 <a> 鼠標點擊的時候是不會有焦點輪廓的，但是鍵盤訪問的時候會出現，這是非常符合預期的體驗。

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

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

以上3個場景，在Chrome瀏覽器下鼠標點擊的時候也會出現顯眼的焦點輪廓，如下圖：

這其實是我們不希望看到的，輪廓在點擊的時候不應該出現（沒有高亮的必要），但是鍵盤訪問的時候需要出現（讓用戶知道當前聚焦元素），Firefox以及IE瀏覽器的表現均符合我們的期望，點擊訪問無輪廓，鍵盤訪問才有，Safari瀏覽器按鈕表現符合期望。

但是，我們又不能簡簡單單設置 outline:none 來處理，因為這樣會把鍵盤訪問時候應當出現的焦點輪廓給隱藏掉，帶來嚴重的無障礙訪問問題。

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

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

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

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

此時，我們點擊設置了 tabindex 屬性的 <div> 元素沒有輪廓，如下圖：

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

完美，感動！

二、應該很快就會默認支持

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

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

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

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

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