巧用 CSS 的 :target 選擇器，打造沒有 JS 的 UI 效果

除了連結到新頁面，連結元素（<a> 標籤）還可以引用到某章節、片段或其它同頁面元素，而這幾類連結普遍運用於同一頁面的導航。

CSS 偽類選擇器 :target 是文件內部連結，通過連結元素的 href 屬性指定頁面某部分，然後選擇和為目標元素新增樣式的。例如，如果你有一個錨點標籤是連結到一篇文章的“深度閱讀”部分…

…點選錨點連結後，你可以使用 :target 選擇器強調目標元素，以引導閱讀者眼球。該高亮技術是眾所周知的褪黃技術，並在 37 Signals 首次使用。

See the Pen ogBWmL by Sara Soueidan (@SaraSoueidan) on CodePen.

上面案例給連結的目標元素應用了短暫的樣式。但如果你應用更持久的樣式，你可以建立縮放元素、改變它們可見度等等。

最近，我在 自己網站 上運用了這項技術，當瀏覽者想搜素文章時，搜尋域覆蓋整個頁面。作為主導航的一部分，有一個連結是讓搜尋域覆蓋整個頁面 – 一個包含著搜尋輸入框的 <div> 標籤。

這個搜尋域初始時是通過使用 opacity : 0; 進行隱藏的。並通過 position : fixed; 讓其相對於視口進行定位。為了確保它不會擋住它下面其餘頁面的滑鼠事件，設定 pointer-events 為 none.

使用 :target 選擇器後，一旦搜尋錨點被點選，覆蓋域就會顯示，並將 pointer-event 再次設定為 auto。 為了讓覆蓋域顯示過程更流暢，可通過 CSS3 的 transition 建立一個淡入淡出的效果。

搜尋域淡入。任務完成一半 – 當使用者再次請求時，我們需要確保它能淡出。

該覆蓋域容器需包含其它允許我們回到主頁面的連結。因此，我們打算給 body 或 html 元素一個 ID，並有一個關閉按鈕連結到該 ID —這也能達到目的。然而，沒有必要這樣做。因為連結到非特定片段，只需將 # 作為它的值。實際上，無須為頁面上的 URL 新增任何片段識別符號，就能連結到主頁面。

一旦關閉按鈕連結被點選，我們希望搜尋域淡出，所以我們為 #search-overlay:target 再次新增 transition ，並確保 opacity 能過渡到 0。  當然，如果想在使用者關閉它時，讓它立刻消失，你可以忽略這一步。

看看這個 線上案例。

你可以為搜尋域新增變形動畫，進一步增強效果。例如在淡入時伴隨著放大效果 – 類似於（是的，你應該猜到了） Lightbox  效果。搜尋域中不是搜尋表單，而是一張影像的話，當你點選它的縮圖時，它會伴隨能放大效果進入你的視線。Manoela Ilic 有一個很細緻完整的圖片 畫廊 ，它就是基於這個效果做的。並且在它後面有一個教程，解釋程式碼的執行。

Christian Heilmann 也寫了一個關於如何使用 :target 選擇器建立簡易圖片畫廊的 帖子，並值得我們學習。

只使用 CSS 實現的影像畫廊、模擬框 和 off-canvas 導航 都是功能齊全的 UI 元件案例。通過利用 :target 選擇器的優勢，它們只需使用 CSS 就可以完成。

我希望通過這篇文章的介紹，在你需要為目標元素新增樣式時，CSS 偽類選擇器能成為你實現方式之一。

更多教程和驚喜！

打賞支援我翻譯更多好文章，謝謝！

打賞譯者