網路開發人員完全忽視了使用者的關注狀態。試想一下，在瀏覽網站時，如果不能清楚地顯示您所處的位置或正在與之互動的內容，那將是一種令人困惑的體驗。這就是諸如 :focus, :focus-within, 和 :focus-visible 等 CSS 偽類發揮作用的地方。本教程旨在闡明焦點狀態在網頁開發中的重要性。
從克服鍵盤導航問題到微調巢狀項內的互動，我們將考慮的三個 focus 偽類都提供了直接的解決方案。我們將回顧實際示例，討論瀏覽器支援，並討論最佳實踐。
請記住，這是為了讓你的網站更方便使用者使用，而不僅僅是編寫程式碼。如果您是網路開發（尤其是前端開發）的新手，本教程非常適合。
前提條件
要學習本教程，您需要：
- 良好的 HTML 知識
- 對 CSS 有基本瞭解
- 瞭解如何瀏覽網頁瀏覽器。
瞭解 CSS 中的 Focus 狀態
Focus 狀態的概念編織了一條重要的線索，對使用者體驗大有裨益。瞭解並有效使用 CSS 中的 Focus 狀態，對於建立無障礙、使用者友好的介面非常重要。
在 CSS 和網頁開發中，Focus 狀態通常是指元素獲得焦點時所應用的樣式。這種互動對於使用鍵盤或其他輔助技術瀏覽網站的使用者來說尤為重要。Focus 狀態可以直觀地顯示當前選定的元素，從而提高可訪問性和可用性。
:focus – Solving 解決鍵盤導航問題
:focus 偽類是網頁開發中的一種基本方法，可解決一個關鍵難題：提供清晰的鍵盤導航。當使用者使用鍵盤與網頁進行互動時，例如在連結、表單和互動元素中進行製表，:focus 偽類就會成為燈塔，突出顯示所選元素。
考慮一下鍵盤導航缺乏視覺反饋的情況。使用者在元素間切換時，如果不能清楚地顯示哪個按鈕、連結或輸入欄位處於活動狀態，使用者體驗就會迷失方向。:focus 偽類可以解決這個問題，它允許開發人員為聚焦元素定義不同的樣式。
開發人員可以使用 :focus 來突出鍵盤焦點下的元素，為不使用滑鼠探索介面的使用者提供視覺引導。這種簡單但功能強大的偽類可使網路應用程式更具包容性，並便於所有使用者瀏覽。
讓我們來看一些實際的例子。
HTML程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Focus Pseudo-Class Example</title> </head> <body> <nav> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </nav> </body> </html>
導航選單是一個簡單的無序列表（ ＜ul＞ ），其中包含包含錨連結（ ＜a＞ ）的列表項（ ＜li＞ ）。我們將新增一些基本樣式，使連結脫穎而出，以及焦點狀態。
CSS程式碼:
/* Basic styling for navigation items */
nav {
display: flex;
list-style: none;
padding: 0;
}
li {
margin: 0 10px;
}
a {
text-decoration: none;
padding: 8px 12px;
border-radius: 5px;
color: #333;
background-color: #eee;
}
/* Apply styles when the link is focused */
a:focus {
outline: none;
box-shadow: 0 0 5px red;
}
:focus 偽類用於改善被聚焦連結的外觀。當連結獲得焦點時（例如，通過元素標籤），預設的焦點輪廓會被移除，並新增一個微妙的框陰影，以便在視覺上清楚地顯示哪個連結處於活動狀態。
輸出預覽:
當我們談到 :focus 偽類及其對鍵盤導航的重要性時，我們指的是它為只使用鍵盤瀏覽網頁的使用者提供視覺提示的作用。它能確保使用者在使用標籤瀏覽元素時，聚焦的元素能脫穎而出，顯示當前的互動點。
例如，有些人，特別是有某些殘疾的人，可能會依賴鍵盤導航。他們使用 Tab 鍵在網頁上的互動元素（如連結和表單欄位）之間移動，然後用回車鍵或空格鍵啟用它們。
初學者可能會對 :focus 和 :active 這兩個偽類感到困惑，以下是兩者的區別： 當一個元素當前被選中或有焦點時，就會使用 :focus 屬性。它常用於為通過鍵盤導航訪問的元素設計樣式。相反，當元素被主動點選或按下時，就會使用 :active 屬性。它表示在元素上方點選滑鼠按鈕（滑鼠使用者）或按鍵（鍵盤使用者）的時刻。
瀏覽器相容
:focus 偽類在各種現代瀏覽器中都有良好的支援。以下是一些受支援的瀏覽器及其版本：
| 瀏覽器 | 版本 | 支援程度 |
|---|---|---|
| Chrome | 3.0+ | 全支援 |
| Firefox | 3.0+ | 全支援 |
| Safari | 5.1+ | 全支援 |
| Edge | 12.0+ | 全支援 |
| Opera | 7.0+ | 部分支援 |
有關 :focus 的更多資訊，請訪問 caniuse.com
:focus-within – 解決巢狀元素的焦點問題
當父元素中的任何子元素成為焦點時， :focus-within 偽類將被啟用。雖然這看起來只是 CSS 中的一個小補充，但它卻能改變遊戲規則，尤其是在解決一個關鍵問題方面：確保巢狀元素在進入焦點時獲得清晰的視覺反饋。
請看一個包含多個巢狀元件的表單。如果沒有 :focus-within，使用者可能會疑惑，如果只對單個焦點輸入或按鈕進行樣式設定，他們的鍵盤互動會集中在哪裡。這就是 :focus-within 偽類的作用所在。
它通過在父類的任何子類獲得焦點時對父類應用樣式，確保巢狀結構中使用者當前互動的連貫和清晰的視覺呈現。這在複雜的佈局中尤其有用，因為在這種佈局中，理解受關注元素的層次結構至關重要。
讓我們看一個示例，瞭解 :focus-within 如何改善巢狀元件場景中的使用者體驗。
HTML程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Focus-Within Example</title> </head> <body> <form> <label for="username">Username:</label> <input type="text" id="username" name="username" placeholder="Enter your username"> <label for="password">Password:</label> <input type="password" id="password" name="password" placeholder="Enter your password"> </form> </body> </html>
為清晰起見，我們對每個輸入欄位分別進行了標註。
CSS程式碼：
/* Basic styling for form and nested components */
form {
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
label {
display: block;
margin-bottom: 10px;
}
input {
padding: 8px;
width: 100%;
box-sizing: border-box;
}
/* Apply styles to the form when any child has focus */
form:focus-within {
border-color: red;
box-shadow: 0 0 10px red;
}
輸入預覽
當表單的子元素（如輸入欄位）獲得焦點時，整個表單會被賦予明顯的邊框顏色和微妙的框陰影。這就為使用者提供了一個清晰的視覺指示，表明他們正在與表單元素進行互動。
瀏覽器相容
現代瀏覽器都支援 :focus-within 偽類。以下是一些受支援的瀏覽器及其版本：
| 瀏覽器 | 版本 | Support Level |
|---|---|---|
| Chrome | 4.0+ | 全支援 |
| Firefox | 52.0+ | 全支援 |
| Safari | 10.1+ | 全支援 |
| Edge | 79.0+ | 全支援 |
| Opera | 48.0+ | 全支援 |
您可以訪問 caniuse 獲取更多有關瀏覽器版本和 :focus-within 相容性的資訊。
:focus-visible – 解決不必要的焦點指示器問題
在網頁開發中，:focus-visible 偽類也是一種體貼的解決方案。當一個元素接收到鍵盤焦點時，它會應用樣式，但當滑鼠點選或敲擊觸發焦點時則不會。這種精煉的偽類為此提供了流暢而微妙的使用者體驗。
考慮這樣一種情況：焦點樣式對於鍵盤導航至關重要，但在使用滑鼠或觸控式螢幕時可能會分散注意力。如果沒有 :focus-visible，焦點樣式就會被普遍應用，從而給滑鼠使用者帶來不必要的、潛在的視覺干擾。
:focus-visible 允許開發人員專門為鍵盤使用者定製焦點樣式，從而為所有使用者帶來完美的、與裝置相匹配的體驗。
讓我們看一些示例來更好地理解這一點。
HTML程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Focus-Visible Example</title> </head> <body> <p>Try clicking the links and navigating with the Tab key.</p> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </body> </html>
CSS程式碼:
/* Basic styling for links */
a {
text-decoration: none;
padding: 8px 12px;
border-radius: 5px;
color: #333;
background-color: #eee;
margin: 5px;
}
/* Apply styles only when the link is focused via keyboard */
a:focus {
outline: none;
box-shadow: 0 0 5px red;
}
/* Apply styles only when the link is focused, but not when clicked with a mouse */
a:focus:not(:focus-visible) {
box-shadow: none;
}
當連結收到焦點時（通過鍵盤導航），它會獲得一個框陰影來表示焦點。
:focus:not(:focus-visible) 會在連結被聚焦時應用樣式，但不會在通過滑鼠點選或輕觸聚焦時應用樣式。這樣可以避免滑鼠使用者使用不必要的焦點樣式。
輸出預覽:
瀏覽器相容
現代瀏覽器也支援 :focus-visible 偽類。以下是一些受支援的瀏覽器及其版本：
| 瀏覽器 | 版本 | 支援程度 |
|---|---|---|
| Chrome | 76.0+ | 全支援 |
| Firefox | 65.0+ | 全支援 |
| Safari | 13.1+ | 全支援 |
| Edge | 81.0+ | 全支援 |
| Opera | 64.0+ | 全支援 |
有關 :focus-visible 瀏覽器相容性的更多資訊，請訪問 caniuse
最佳實踐
這些是設計專注狀態的一些最佳實踐：
- 微妙的視覺提示：為避免讓使用者不知所措，應保持微妙的聚焦風格。微妙的顏色、邊框或陰影變化可以有效地分散使用者的注意力。
- 明顯的對比：確保聚焦元素與背景形成足夠的對比。這對可訪問性很重要，因為它能幫助使用者識別他們在頁面上的位置。
避免完全刪除輪廓： 雖然自定義焦點樣式很常見，但應避免完全刪除輪廓。預設情況下，輪廓包含一個焦點指示器，很容易訪問。取而代之的是，考慮設計出適合自己設計的輪廓樣式。 - 跨裝置測試： 在桌上型電腦、膝上型電腦、平板電腦和智慧手機等不同裝置上嘗試不同的焦點樣式。無論使用哪種輸入方法，都要保持一致、愉悅的使用者體驗。
- 考慮觸控式螢幕使用者：在使用
:focus-visible時，請記住觸控式螢幕使用者也可能受益於自定義的焦點樣式。嘗試不同的樣式，看看它們如何與鍵盤和觸控式螢幕互動。 - 考慮動畫效果：在焦點狀態下使用動畫時，應保持微妙和快速，以避免使用者不適或分心。
- 可訪問性優先：在設計焦點狀態時，優先考慮無障礙性。為依賴鍵盤導航或輔助技術的殘疾使用者提供統一的體驗。
複雜的互動應結合偽類： 對於更復雜的使用者介面互動，可根據需要組合:focus、:focus-within和:focus-visible。這些偽類可以相互協作，創造出細緻入微的包容性設計。
小結
總之， :focus, :focus-within, 和 :focus-visible 偽類對於建立可訪問且使用者友好的介面至關重要。從使用 :focus 改進鍵盤導航，到使用 :focus-within 處理巢狀元件，再到使用 :focus-visible 確保不顯眼的焦點狀態，開發人員都可以使用這些偽類建立優先考慮清晰度和包容性的設計。您可以通過遵循最佳實踐、跨裝置測試和接受微妙的視覺提示來提升您的介面並提供無縫的使用者體驗。Happy coding！
評論留言