CSS - :focus-visible偽類

CSS 中的:focus-visible偽類表示已獲得焦點的元素。此類通常在使用者單擊、點選元素或使用鍵盤的 Tab 鍵選擇元素時觸發。

:focus-visible偽類可用於根據使用者首選的操作模式（使用滑鼠或鍵盤）應用不同的焦點指示器。

語法

:focus-visible {
   /* ... */
}

:focus 與 :focus-visible

CSS 中的:focus 和:focus-visible偽類用於定位當前具有鍵盤焦點的元素，但它們的行為有所不同，尤其是在使用者體驗和可訪問性方面。

:focus	:focus-visible
定位具有鍵盤焦點的元素，無論該焦點是透過鍵盤導航還是透過滑鼠單擊獲得。	定位具有鍵盤焦點的元素，但僅在使用鍵盤導航時可見。它有助於透過確保僅在透過鍵盤輸入聚焦元素時才應用樣式（而不是透過滑鼠或觸控輸入聚焦時）來改善使用者體驗。
它不考慮使用者如何到達聚焦的元素，因此可能包括使用者使用滑鼠單擊或在觸控裝置上點選元素的情況。	它對於為鍵盤使用者建立更易訪問和使用者友好的體驗特別有用，因為它避免了在使用滑鼠單擊元素時應用可能分散注意力或不相關的樣式。
a:focus { // Styles for elements //that have keyboard focus }	button:focus-visible { //Styles for elements //that have keyboard focus //and are visible through //keyboard navigation }

CSS :focus-visible 示例

讓我們看一個顯示:focus 和:focus-visible區別的示例。嘗試使用滑鼠以及鍵盤將焦點放在按鈕上，並檢視區別。

<html>
<head>
<style> 
   /* Apply focus styles only when accessed via keyboard navigation */
   button:focus-visible {
      outline: 2px solid green;
      background-color: yellow;
      }

   /* Apply focus styles for all focused elements */
   button:focus {
      outline: 3px solid blue;
   }
</style>
</head>
<body>
   <div>
      <button>focus-visible</button>
      <button>focus-only</button>
   </div>
</body>
</html>

以下是一個button的經典示例，它展示了選擇器:focus-visible如何區別於:focus。我們通常不希望在單擊button後看到焦點環，但我們希望在使用鍵盤瀏覽網站時在button上看到焦點指示器。在下面的示例中，嘗試使用鍵盤並按 Tab 鍵，看看:focus-visible如何幫助我們透過鍵盤和 Tab 鍵解決焦點環問題。

<html>
<head>
<style>
   label {
      display: grid;
      font-size: 18px;
      color: black;
      width: 400px;
   }

   select {
      padding: 10px 16px;
      font-size: 16px;
      color: black;
      background-color: #fff;
      border: 1px solid #597183;
      border-radius: 8px;
      margin-top: 25px;
      width: 300px;
      transition: all 0.3s ease;
   }

   .focus-only:focus {
      outline: 3px solid orange;
   }

   .focus-visible-only:focus-visible {
      outline: 4px dashed aqua;
   }
</style>
</head>
<body>
    <p>Compare what happens when you click on buttons with a mouse, versus when you tab through them using a keyboard. </p>
   <button class="focus-only"> focus-only button</button><br><br>
   <button class="focus-visible-only"> focus-visible button</button><br><br>
</body>
</html>

CSS :focus - 後備

使用@supports檢查:focus-visible的瀏覽器支援和相容性，並在:focus規則中重複相同的樣式，無論它在舊瀏覽器中是否正常工作。即使您完全沒有為:focus指定任何內容作為後備選項，舊瀏覽器也會顯示本機預設輪廓。這在下面的語法中得到演示

button:focus { /* some exciting button focus styles */ }

@supports (:focus-visible) {
      button:focus { /* undo all the above focused button styles */ }
      button:focus-visible { /* and then reapply the styles here instead */ }
}

列印頁面