：焦點可見的支持來到Firefox

Firefox 85版正式支持:focus-visible偽類選擇器！這意味著什麼？讓我們一起來看看。

正如MDN文檔已更新所示，備受期待的:focus-visible偽類選擇器現已在Firefox 85版中得到原生支持。

:focus-visible的妙處在於它巧妙地平衡了可訪問性和視覺美觀。我們都知道，焦點輪廓對於輔助功能至關重要（尤其在鍵盤導航時），但默認的藍色焦點輪廓並不總是符合品牌設計。

以往，我們面臨著兩難選擇：要么使用自定義輪廓，在所有元素獲得焦點時（無論是鍵盤還是鼠標點擊）都顯示；要么完全取消輪廓，犧牲可訪問性。而:focus-visible則完美解決了這個問題。它利用瀏覽器的用戶輸入信息（或啟發式算法）來判斷焦點是來自鍵盤還是鼠標。

（瀏覽器的啟發式算法能否完美區分輸入方式？這取決於具體情況。一旦涉及觸控交互，情況就會變得複雜。）

這意味著，我們可以移除默認的焦點環（太棒了！）, 僅在需要時（鍵盤交互）顯示自定義樣式（太棒了！）。 讓我們來看一個例子（感謝Andy Adams）：

 <code>.next-image-button:focus { outline: none; } .next-image-button:focus-visible { outline: 3px solid blanchedalmond; /* 自定义焦点样式*/ }</code>

需要注意的是， :focus-visible無法像:focus一樣完全移除焦點環，因此兩者通常一起使用。

Chrome早在2018年就已實現:focus-visible 。 Firefox之前也有自己的前綴版本:-moz-focusring 。 Safari用戶？快去投票支持這個特性吧！ Igalia正在籌集資金，努力將其添加到Safari瀏覽器中！ Brian Kardell對此做了詳細說明。

以上是：焦點可見的支持來到Firefox的詳細內容。更多資訊請關注PHP中文網其他相關文章！