：焦點可見的技巧

所有交互元素都應該具有焦點樣式，這是個值得反復強調的最佳實踐。這樣，鍵盤用戶就能知道焦點是否已移動到該元素上。

但是，如果僅使用:focus來實現此目的，則會產生許多人不喜歡的副作用。這意味著當您（使用鼠標）點擊交互式元素時，會看到焦點樣式。可以說，作為鼠標用戶，您不需要這種反饋，因為您剛剛將光標移動到那裡並點擊了。無論您對此有何看法，多年來它都讓很多人感到厭煩，以至於他們完全刪除了焦點樣式，這對網絡的可訪問性造成了嚴重的損失。

如果我們只在使用鍵盤聚焦元素時（而不是鼠標）應用焦點樣式，該怎麼辦？幾年前，Lea Verou 就指出了這一點：

那是針對Chrome 取消該功能（將其隱藏在標誌後面）的回應。非常巧妙。

幾年後，Chrome 在無需標誌的情況下發布了它。他們贊同Lea 的想法：

通過將:focus-visible與:focus結合使用，您可以更進一步，根據用戶的輸入設備提供不同的焦點樣式。如果您希望焦點指示器取決於輸入設備的精度，這將非常有用：

 <code>/* 使用键盘聚焦按钮将显示一条虚线黑线。*/ button:focus-visible { outline: 4px dashed black; } /* 使用鼠标、触摸或触笔聚焦按钮将显示一个细微的投影。*/ button:focus:not(:focus-visible) { outline: none; box-shadow: 1px 1px 5px rgba(1, 1, 0, .7); }</code>

我建議您嘗試在不使用button選擇器的情況下使用這些選擇器，使它們全局應用！

還有更多內容需要深入研究，因此我將在此處鏈接更多資料：

• Chromium 博客文章介紹了選擇器的啟發式方法。這很棘手。就像有一個算法來確定:focus-visible是否會匹配一樣，您只需要大體上信任它即可。它還介紹了Firefox 長期以來都具有:-moz-focusring ，但其行為差異足夠大，因此如果您追求一致的行為，則不建議使用它。
• Matthias Ott 在他的博客中對此進行了一些很好的介紹，例如使用官方polyfill 以及如何在DevTools 中正確查看樣式（為此提供了一個新的複選框）。
• 我們之前也介紹過這個。在那篇文章中，我們提到了Lea 的推文，她認為當它真正發佈時，它的使用率將會激增。讓我們拭目以待（並希望如此）！
• 我們的年鑑條目包含大量詳細信息。

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