與自定義聚焦樣式有點樂趣

每個前端開發者都曾或將面臨這樣的場景：你的老闆、客戶或設計師認為瀏覽器在焦點元素上應用的輪廓與UI不匹配，並要求你將其移除。或者你甚至可能自己也想移除它。

因此，你進行了一些研究，發現這是強烈不建議的，因為焦點輪廓的存在是有原因的：它為鍵盤導航（使用Tab鍵）提供視覺反饋，讓無法使用鼠標或有視覺障礙的用戶知道他們在屏幕上的位置。

但這並不意味著你必須保留這個輪廓。與其移除它，不如用其他東西替換它。這樣，你就可以保持界面的可訪問性，並且獲得更多關於外觀的靈活性，以便更好地匹配你的UI。

你可以首先通過選擇元素的焦點狀態並應用outline: none來移除默認的瀏覽器輪廓。然後，你可以從以下選項中選擇一個來替換它：

更改背景顏色

這最適合可以填充的元素，例如按鈕。選擇元素的焦點狀態並為其應用對比鮮明的背景顏色。對比度越高越好，因為細微的變化可能不足以成為強烈的視覺提示，尤其是在色盲和低視力的情況下。

在下面的示例中，背景色和邊框顏色都會改變；你可以選擇其中一個或兩個。

點擊或使用Tab鍵聚焦以查看此狀態的外觀。

更改文本顏色

如果元素有任何文本，你可以選擇焦點狀態並更改其顏色。這對於使用mask-image應用的圖標也有效；你可以選擇作為焦點元素後代的圖標並更改其背景顏色，就像下面的示例按鈕一樣。

同樣，對比度是關鍵。你還可以考慮在文本鏈接上使用下劃線，並將其作為更改狀態的一部分，因為正如Web內容無障礙指南所述：

顏色不用作傳達信息、指示操作、提示響應或區分視覺元素的唯一視覺手段。 （A級）了解成功標準1.4.1

應用盒陰影

box-shadow屬性可以完成與輪廓完全相同的工作，但它功能更強大——你現在可以控制它的顏色、不透明度、偏移量、模糊半徑和擴展半徑。如果指定了border-radius ，則盒陰影也遵循相同的圓角。

你可以用這種技術變得非常有創意（但說真的，不要這樣做）：

這幾乎適用於任何類型的可聚焦元素，例如切換按鈕、複選框、單選按鈕和滑塊。

增大元素尺寸

作為顏色更改的替代方案，你也可以採用細微的尺寸修改作為焦點反饋。在這個例子中，我們使用transform: scale 。

這裡的關鍵是微妙。極端的尺寸變化可能會導致內容重排，更不用說對於那些喜歡減少運動的人來說是一種糟糕的體驗了。

複製現有的懸停樣式

如果元素已經具有對比鮮明的懸停樣式，你可以簡單地採用該樣式並將其也應用於焦點狀態。這是一個相當優雅的解決方案，因為你無需向界面添加任何新的顏色或輪廓。

這是一個示例，其中焦點狀態和懸停狀態都採用了與元素默認樣式的背景形成高對比度的樣式：

附加：自定義默認輪廓

到目前為止，我們所看到的一切都假設我們想要完全移除焦點輪廓。我們不必這樣做！事實上，它是一個我們可以自定義的邊框。

 button:focus {
  outline: 3px dashed orange;
}

如果我們想微調樣式，這可以用這種方式編寫：

 button:focus {
  outline-width: 3px;
  outline-style: dashed;
  outline-color: orange;
}

我們擁有的另一個超能力是outline-offset屬性，它與outline速記屬性分開，但可以與之一起使用來更改焦點環的位置：

 button:focus {
  outline: 3px dashed orange;
  outline-offset: 10px;
}

結論

你可以混合和匹配所有這些選項，以獲得適合界面中每個組件類型的自定義樣式。

值得重申的是：在採用自定義焦點狀態時，不要忘記除了顏色之外還要使用鮮明的顏色對比度和其他視覺提示。當然，我們都希望獲得與我們的設計相符的體驗，但我們可以在此過程中遵守良好的可訪問性實踐。 W3C 建議使用此工具來測試顏色值相對於WCAG 指南的對比度。

以上是與自定義聚焦樣式有點樂趣的詳細內容。更多資訊請關注PHP中文網其他相關文章！