focus-within的使用詳解

這次帶給大家focus-within的使用詳解，使用focus-within的注意事項有哪些，以下就是實戰案例，一起來看一下。

CSS的世界真是一個神奇的世界。可能有許多前端開發者聽過 :focus 並未聽過 :focus-within 。那麼 :focus-within 是什麼鬼。這篇文章，我們就說說 :focus-within 這個東東。

:focus-within是什麼

在CSS中:focus-within 是偽類，現在已經被列入到CSS選擇器中（CSS Level 4 selector）。他就像你知道的 :focus 或 :hover 。 :focus-within 能非常方便處理取得焦點狀態。當元素本身或其後代元素獲得焦點時， :focus-within 偽類的元素就會有效。

如果文字不好理解，咱們先來看一個簡單的範例：

<p>
    <label>
        Your email:
    </label>
    <input>
</p>

上面是一個簡單的表單，有一個 input 表單控制項。

.form-group *:focus {
    background: yellow;
    color: #000;
}
.form-group {
    padding: 10px;
    border: 3px solid transparent
}
.form-group:focus-within {
    border-color: #000;
}

上面的範例中， .form-group 得到焦點的時候， border-color 顏色換成了 #000 。但這不代表接收鍵盤的焦點，那是因為

不一定能得到鍵盤的焦點，沒有設定 tabindex 。或者說 p 中的連結或 input 元素接收焦點，那麼 .form-group 元素將會改變邊框顏色。

看到上面的範例，是不是覺得好神奇。在先前要實現類似的效果，我們需要藉助JavaScript的腳本。透過 .form-group 的後代元素的滑鼠或鍵盤事件，然後給其父元素（或祖先元素，添加對應的樣式）。

:focus-within的使用場景

:focus-within 非常強大，主要是由於偽類在它的任何元素獲取到焦點時都將被激活。當元素包含許多子組件的元素上謹慎使用該偽類。

有了 :focus-within 之後，有一些常見的互動行為就變得非常的簡單，特別是以前需要JavaScript的鍵盤事件的互動行為，我們都可以使用 :focus-within 來取代。

接下來，咱們來看一些 :focus-within 的常見範例。

表格行的高亮

一個常見的例子，就是表格行高亮的行為，即滑鼠懸浮在表格的行時，顏色變得高亮。這樣的互動樣式可以幫助有視力阻礙的使用者能更好的閱讀一個複雜的表格或長表格。因為突出的顯示，可以使用這些用戶更容易追蹤他們目前正在閱讀的表格行。以前常常實現的方式是透過:hover 來改變表格行的樣式，這種方案對於正常的用戶而言是一件易事，但如果你的用戶對於一些操作滑鼠有阻礙的用戶而言，那:hover就有點蛋痛了。如果你是追求完美的話，你可能會透過JavaScript的鍵盤事件為表格行添加樣式。

那麼有了 :focus-within 之後，我們就可以跟JavaScript說拜拜。我們可以這樣來設定樣式：

上面的範例展示如何使用 :focus-within 來突出表格的整個行。如果在特定的表格行中有一個可取得焦點的可用元素，這裡所指的是透過鍵盤取得焦點。例如上面這個範例，表格中有 元素，你懂的， a 元素是可以透過鍵盤取得焦點的。

這個時候你只需要在樣式中加入：

tbody tr:focus-within,
tbody tr:hover {
    background: rgba(lightBlue, .4);
}

#下拉選單

下拉選單是我們最常的Web元件之一。當我第一次看到 :focus-within 這個偽類時，我想到的第一個使用場景就是下拉式選單。

在上面的範例中，JavaScript是用來追蹤使用者鍵盤焦點在一個導航下拉式選單中的。如果JavaScript偵測到鍵盤焦點在一個連結上，那麼就為 .navlist_drop 新增一個 .has-focus 類別。當 li 有了 .has-focus 類別時，他的子元素就會顯示出來，也就是下拉式選單會顯示出來。

這樣的效果，我們可以直接透過 :focus-within 取代JavaScript腳本的功能。使用 .navlistdrop:focus-within 替代 .navlistdrop.has-focus 。當你操作鍵盤，讓下拉式選單項目獲得焦點時，就會顯示下拉式選單。

.navlist a:focus + .navlistdrop,
.has-drop:hover .navlistdrop,
.navlistdrop:focus-within {
    opacity: 1;
    transform: translateY(0px);
    height: auto;
    z-index: 1;
}

Off-screen Nav

#

Off-screen Nav是在行動端上常見的效果。那麼這個效果我們也可以透過 :focus-within 來實現。詳細程式碼可以看下面這個範例：

瀏覽器相容性

:focus-within 雖然很有意思，但許多同學擔心它的相容性。透過Caniuse，我們可以看到瀏覽器對其支持度情況：

總結

如果你熟悉:focus 並不奇怪，但是你知道:focus-within的話，說明你在不斷的關注CSS相關的新特性。當然這個屬性又刷新了CSS的世界真是奇怪。如果你有興趣的話，不彷自己寫書Demo。你會喜歡上這個屬性的。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

css3文字漸層動畫

#css3做出半圓弧線

css中sticker-footer佈局如何使用

以上是focus-within的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！