強大的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的專案實戰的學習資料都有整理，送給每一位前端小夥伴，每天分享技術

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2645235/，如需轉載，請註明出處，否則將追究法律責任。