使用CSS自定義屬性標準化焦點樣式

快速測試一下你的項目：打開瀏覽器，僅使用Tab鍵，嘗試在按鈕、鏈接和表單元素等交互元素間導航。

如果你是視力正常的用戶，你應該能夠看到焦點在DOM元素間跳轉時的視覺變化。但如果沒有視覺變化，或者變化微乎其微，那麼你就能找到一個能為你的訪客帶來巨大改變的方法。

本文將介紹一種使用CSS自定義屬性來更有效地管理項目焦點樣式的技術，並學習現代CSS焦點選擇器。首先，讓我們了解為什麼可見焦點樣式如此重要。

滿足WCAG焦點樣式標準

可見焦點狀態符合《Web內容無障礙指南》(WCAG) 成功標準2.4.7 – 焦點可見。 2.4.7的《理解》文檔中說明了該標準的意圖：

此成功標準的目的是幫助用戶了解哪個元素具有鍵盤焦點。必須能夠讓用戶知道多個元素中哪個元素具有鍵盤焦點。

在即將發布的WCAG 2.2中，將添加一個新的標準來闡明“焦點指示器應有多明顯”。雖然目前仍在草案階段，但熟悉並應用2.4.11 – 焦點外觀（最低限度）中的指南無疑是您今天可以採取的改進焦點樣式的積極步驟。

使用CSS自定義屬性管理焦點樣式

今年我開始使用的一種技術是在我的級聯樣式表中，在主要的交互式基本元素上儘早包含以下設置：

 <code>:is(a, button, input, textarea, summary) { --outline-size: max(2px, 0.08em); --outline-style: solid; --outline-color: currentColor; } :is(a, button, input, textarea, summary):focus { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); }</code>

這附加了自定義屬性，允許您根據需要靈活地自定義輪廓樣式的某些部分，以確保在元素上下文發生變化時焦點仍然可見。

對於--outline-size ，我們使用max()來確保至少為2px的值，同時允許根據組件（例如，標題內的大按鈕或鏈接）基於0.08em進行縮放。

這裡你可能不熟悉的屬性是outline-offset ，它定義了元素和輪廓之間的空間。你甚至可以提供一個負數來內嵌輪廓，這對於確保焦點樣式的對比度非常有用。在我們的規則集中，我們設置該屬性以接受可選的自定義屬性--outline-offset ，以便在需要時可以自定義它，否則它將回退以匹配--outline-size 。

輪廓外觀改進

在我的職業生涯中，我曾被要求移除輪廓，也曾自己移除過輪廓，因為它們被認為是“難看的”。

現在有兩個原因說明絕對不應該移除輪廓（除了無障礙影響）：

1. 在Chromium和Firefox中， outline現在遵循border-radius ！ ? 這意味著您可以考慮刪除您可能使用過的任何hack，例如使用box-shadow來模擬它（這對無障礙也有積極影響，因為它可以確保不會為Windows高對比度主題用戶刪除焦點樣式）。
2. 使用:focus-visible ，我們可以要求瀏覽器使用啟發式方法，僅在檢測到需要可見焦點的輸入模式時才顯示焦點樣式。簡而言之，這意味著鼠標用戶在點擊時不會看到它們，而鍵盤用戶在Tab鍵操作時仍然會看到它們。

需要注意的是，表單元素始終顯示焦點樣式——它們不受:focus-visible行為的限制。

因此，讓我們增強我們的規則集，添加以下內容以包含:focus-visible 。我們將保留我們已經為舊瀏覽器定義的初始:focus樣式，以防萬一不會丟失。

 <code>:is(a, button, input, textarea, summary):focus-visible { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); }</code>

由於瀏覽器處理它們不理解的選擇器的方式，我們需要將這些規則分開，即使它們定義相同的輪廓屬性，也不能將它們組合在一起。

最後，我們還需要這種看起來很奇怪的:focus:not(:focus-visible)規則，它會為支持:focus-visible的瀏覽器移除常規焦點樣式：

 <code>:is(a, button, input, textarea, summary):focus:not(:focus-visible) { outline: none; }</code>

值得注意的是，最新版本的Chromium和Firefox已切換到使用:focus-visible作為在交互式元素上應用焦點樣式的默認方式，並且最近在webkit中已啟用為默認方式，因此它應該很快就會出現在Safari穩定版中！我們的規則仍然有效，因為我們正在自定義輪廓外觀。

有關可見焦點樣式的更多指導，我推薦Sara Soueidan關於焦點指示器的精彩而全面的指南，因為它考慮了即將推出的2.4.11標準。

焦點樣式演示

此示例演示了這些交互式元素中的每一個以及如何使用自定義屬性應用自定義設置，包括一些針對深色模式的更改。根據您的瀏覽器支持情況，除非您使用Tab鍵，否則您可能不會看到焦點樣式，因為使用了:focus-visible 。

最後一點：就焦點樣式而言， button是一個獨特的交互式元素，因為它在其狀態之間有額外的考慮因素，特別是如果您只依賴顏色。如需幫助，請嘗試使用我的項目ButtonBuddy.dev中的調色板生成器。

以上是使用CSS自定義屬性標準化焦點樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！