8 種在 CSS 中隱藏元素的方法匯總

為一個優秀的前端，我們經常遇到需要隱藏網頁上的元素的情況。在本文中，我們將分享8 種在 CSS 中隱藏元素的方法，每種方法都有優點和注意事項。

Opacity and Filter:Opacity

隱藏元素最簡單的方法之一是調整其不透明度。opacity 屬性允許我們通過將其值設置為 0 來使元素完全透明。例如：

.element {
  opacity: 0;
}

或者，我們可以將過濾器屬性與 opacity() 函數一起使用：

.element {
  filter: opacity(0);
}

opacity 和 filter: opacity() 都可以設置動畫并提供良好的性能。但是，需要注意的是，即使完全透明，元素仍保留在頁面上并且仍然可以觸發事件。

Visibility

Visibility屬性允許我們控制元素的可見性。通過將其設置為隱藏，我們可以隱藏元素，同時保留它在布局中占用的空間。例如：

.element {
  visibility: hidden;
}

默認情況下，輔助技術仍然可以訪問隱藏元素的內容，因此考慮對可訪問性的影響非常重要。要完全隱藏內容，可能需要其他 CSS 屬性或 ARIA 屬性，例如 aria-hidden="true"。

Display

display 屬性是一種廣泛使用的隱藏元素的方法。通過將其設置為 none，我們可以有效地從文檔流中刪除該元素，使其就像在 DOM 中從未存在過一樣。例如：

.element {
 display: none;
}

雖然 display: none 是一個流行的選擇，但它有一些局限性。它無法設置動畫，并且應用時會觸發布局更改，從而影響頁面上其他元素的位置。為了緩解這種情況，我們可以使用其他技術，例如定位。

Hidden 屬性

在 HTML 中，我們有隱藏屬性，可以將其添加到任何元素以隱藏它。當存在hidden屬性時，瀏覽器應用其默認樣式，相當于設置display:none。例如：

<p hidden>Hidden content</p>

當標簽的樣式不允許被改變時，此屬性非常有用。但是，它與使用 display ：none有相同的優點和限制。

使用 z-index

z-index 屬性控制 z 軸上元素的堆疊順序。給覆蓋元素分配更高的z-index值，我們可以在視覺上隱藏其下方的元素。例如：

.element {
  position: relative;
  z-index: 1;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* Same as the page background color */
  z-index: 2;
}

在此示例中，覆蓋元素位于使用較高 z-index 值的元素之上。

Color AIpha Transparency

我們還可以單獨隱藏特定的視覺屬性，例如顏色、背景顏色或邊框顏色，而不是使整個元素透明。這項技術使我們能夠創建有趣的效果和動畫。我們可以通過將 alpha 通道設置為 0 的 rgba() 值來實現這一點。例如：

.element {
  color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
}

值得注意的是，這種技術可能不適用于具有圖像背景的元素，除非它們是使用線性漸變或類似方法生成的。

CIip-Path

Clip-path 屬性允許我們創建一個剪切區域來確定元素的哪些部分是可見的。通過設置一個值，例如circle(0)，我們可以完全隱藏該元素。例如：

.element {
  clip-path: circle(0);
}

使用剪輯路徑為有趣的動畫提供了范圍。

clip-path 屬性可以用于創建復雜的裁剪形狀，從而實現各種有趣的效果。在這種情況下，使用 circle(0) 作為裁剪路徑，是為了將元素完全裁剪掉，即不顯示任何內容。

需要注意的是，clip-path 是一個比較新的 CSS 屬性，不是所有瀏覽器都支持它。另外，即使瀏覽器支持 clip-path，也有可能出現一些兼容性問題，因此在使用 clip-path 時需要進行充分的測試和兼容性處理。

絕對定位

位置屬性允許我們將元素從頁面布局中的默認位置移動。通過使用position:absolute，我們可以將元素重新定位到屏幕外，從而有效地將其隱藏。例如：

.element {
  position: absolute;
  left: -9999px;
}

絕對定位提供了出色的瀏覽器支持，并且元素的原始尺寸保持不變。但是，需要注意的是，更改位置可能會影響頁面的整體布局。此外，屏幕外的元素可能無法交互，因為它們不再位于視口內。

結論

總之，CSS 提供了多種技術來隱藏網頁上的元素。通過了解每種方法的優點和局限性，我們可以為我們的特定用例選擇最合適的方法。

日常開發中，我們通用會選擇使用 javascript 切換類來控制它們的狀態樣式，比如 .open、.closed,.show、.hide。

在本篇文章中，我們將探索以下幾個方面內容：

在元素沒有子元素的情況下，使用 :empty 偽類來隱藏元素
將 :empty 與 :has() 和 :not() 結合使用，可以處理更多情況
梳理隱藏元素的常見方法

1.隱藏一個空元素

:empty 偽類可以匹配任何沒有子元素的元素。當前已經得到所有主流瀏覽器的支持。如果該元素是一個空元素，我們可以結合 display 屬性使用來隱藏元素。

示例：

<style>
  .box {
    display: flex;
    width: 80%;
    height: 80px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    justify-content: center;
    align-items: center;
  }
  .box:empty {
    display: none;
  }
</style>


<div class="box">1</div>
<div class="box"></div>
<div class="box">3</div>
<div class="box">4</div>

效果如下：

2.和 :has() 和 :not() 結合使用

和 :has() 和 :not() 結合使用時，我們可以在更多復雜場景中使用，比如查找子元素有空元素的元素、隱藏一個不包含某個子元素的父元素等。

2.1.查找子元素為空的父元素

下面的例子是每個 .box 盒子都有一個 span 元素，其中 3 個 span 元素是有文本節點的，一個沒有。通過和 :has() 結合使用，我們可以先找到子元素為空的原生 span:empty, 然后通過 .box:has(span:empty) 判斷 .box 下是否有子元素 span 為空的父元素，并隱藏它。

<style>
  .box {
    display: flex;
    width: 80%;
    height: 80px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    justify-content: center;
    align-items: center;
  }
  .box:not(span:has(:empty)) {
    display: none;
  }
</style>
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span></span></div>
<div class="box"><span>4</span></div>

效果如下：

2.2.查找不包含某個子元素的父元素

下面的示例是首先查找 .box 元素下有 .text 子元素的父元素，然后使用 .box:not() 進行取反操作，結合 display 屬性對元素執行隱藏。

<style>
  .box {
    display: flex;
    width: 80%;
    height: 80px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    justify-content: center;
    align-items: center;
  }
  .box:not(.box:has(.text)) {
    display: none;
  }
</style>
<div class="box"><span class="text">1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span class="text">4</span></div>

效果如下：

3.隱藏元素的常見方法

方法一：display: none

此方法使用的最多，該方法會使 DOM 隱藏，觸發 Reflow 和 Repaint。

方法二：visiblity: hidden

此方法 DOM 結構無變化，隱藏后仍占據空間，僅會觸發 Repaint。結構保留，占據空間，僅觸發重繪，不會觸發事件（無法選中）。

方法三：opacity: 0

此方法 DOM 結構無變化，隱藏后仍占據空間。

方法四：content-visibility: hidden

它能讓用戶代理跳過元素的呈現工作（包括布局和繪制），直到需要時才進行，這使得初始頁面加載速度大大加快。

方法五：position + left + top

它能讓元素脫離文檔流，不占用空間，并且通過設置 left 或者 top 屬性負值，可以將元素定位到屏幕之外。

方法六：transform: translate(-999px)

它能讓元素偏移出視圖窗口，空間會占據，但元素實際不在視窗內所以無法交互。

方法七：font-size: 0

通過設置字體大小為0，將行內元素內容隱藏，但是實際空間還在。

方法八：width:0;height:0;overflow:hidden

通過設置元素寬高為0和設置 overflow: hidden 來實現元素隱藏，不占空間。

方法九：hidden property

通過設置 html 標簽的 hidden 來實現元素隱藏。

方法十：clip-path

clip-path屬性會創建一個裁剪區域，用于確定元素的哪些部分可見。使用clip-path: circle(0)可以達到將元素隱藏的效果。

方法十一：filter: blur(0)

將一個元素的模糊度設置為0, 從而使這個元素“消失”在頁面中。

4.最后

隨著瀏覽器對 :empty 、:has() 、:not() 等偽類和方法的支持越來越好，之前使用 js 來實現的功能，完全可以使用 CSS 來替換，替換后有著更好的性能和用戶體驗。本文最后梳理了隱藏元素的常見方法，如果你有其他方法，歡迎在文章下方留言，歡迎一起討論和交流。

個成功的Web App必須有良好的用戶體驗。當我們談及改善用戶體驗時，你會想到什么？

其實，有一點是很容易被開發者忽視的，那就是CSS。我們可以使用一些CSS技巧來改善網頁的表現形式、交互細節和可訪問性。

而且這些技巧不需要花費太多時間，也不需要消耗服務器資源。你只需要花兩個小時學習，然后就可以把它應用到你所有的項目中，并永遠改善用戶體驗。

可點擊區域

有時你的按鈕很小，這可能導致用戶無法準確點擊按鈕。這種現象經常發生在移動端上。如果用戶點擊次數太多，沒有點擊他們想要的按鈕，或者點擊錯誤的按鈕，會讓他們感到非常沮喪。

那么，如何解決這個問題呢？有些開發者可能會說：把按鈕做大點。

但網頁中元素的大小往往是固定的，我們不能輕易調整一個元素的大小。而且如果按鈕太大，感覺很奇怪。

一個更好的解決方案是在不改變按鈕原始尺寸的情況下增加其可點擊區域。具體來說：我們可以使用偽元素來增加一個元素的可點擊區域。

例如，這里有一個按鈕。

<button id="btn">btn</button>

然后我們可以為它添加一個偽類。

#btn::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

這時，如果我們點擊按鈕周圍的區域，我們仍然可以觸發按鈕的點擊事件。

事例地址：

https://codepen.io/bytefishmedium/pen/rNYNoRX

平滑滾動

當頁面被#鏈接滾動時，默認效果是這樣的。

這種突然的跳躍會讓人感到不舒服。為了解決這個問題，我們可以使用這個CSS樣式：sroll-behavior: smooth。

事例地址：https://codepen.io/bytefishmedium/pen/NWwWoKL

選擇所有文本

我們的網頁經常需要提供一些內容供用戶選擇，如電話號碼、地址、標題等。而這些文字應該是一個整體，我們希望當用戶點擊部分文字時，剩余的文字會被自動選擇。

要實現這種效果非常簡單，只需使用這個CSS樣式：user-select: all 。用戶選擇的CSS屬性控制用戶是否可以選擇文本。如果它的值是 all，意味著一個元素的所有內容都將被原子化地選擇。

事例地址：https://codepen.io/bytefishmedium/pen/xxPxMZO

如果你想在文本被選中后添加一些額外的樣式，你可以使用::selection 。::selection CSS偽元素將樣式應用于文檔中被用戶突出顯示的部分（比如在文本上點擊和拖動鼠標）。

但要記住。只有某些CSS屬性可以和::selection一起使用。

color
background-color
text-decoration 及其相關屬性
text-shadow
stroke-color, fill-color 和 stroke-width

事例地址：https://codepen.io/bytefishmedium/pen/gOXOqMz

Cursor

在不同的場景下使用不同的鼠標樣式可以幫助讀者感知頁面的當前狀態，從而改善用戶的互動體驗。

cursor CSS屬性設置鼠標指針在一個元素上時要顯示的鼠標指針（如果有的話）。

光標設置應該告知用戶在當前位置可以進行的鼠標操作，包括文本選擇、激活幫助或上下文菜單、復制內容、調整表格大小，等等。你可以用一個關鍵詞來指定光標的類型，或者加載一個特定的圖標來使用（有可選的回退圖像和強制性的關鍵詞作為最后的回退）。

例如：

事例地址：https://codepen.io/bytefishmedium/pen/bGYGzRz

有很多光標樣式，你可以在MDN文檔中找到它們。

Text Overflow

現在我們來看看 text-overflow 的問題。如果一個文本容器的內容是從服務器返回的，或者是由用戶輸入的，那么就很難預測這個文本會有多長。

如果沒有任何預防措施，你可能會寫出這樣的代碼。

<head>
  <style>
    .container{
      border: 2px solid red;
      width: 200px;
      height: 60px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="username">bytefish</div>
    <p class="profile">FE, UX Designer</p>
  </div>
</body>

這個容器有一個固定的寬度和高度，包裹著名字和介紹。

但如果有些用戶的簡介太長，就會導致文本溢出容器，使頁面看起來很糟糕。

在這一點上，我們可以將溢出的文本折疊起來。做到這一點就像添加三行CSS樣式一樣簡單。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

white-space: nowrap; 可以使文本不被包起來。然后我們使用overflow: hidden來隱藏溢出的文本。最后，我們使用 text-overflow: ellipsis 在文本的末尾添加一個圓點，向用戶表明有一些隱藏的文本。

事例地址：https://codepen.io/bytefishmedium/pen/VwrwgdQ

Image

現在我們來討論一下圖片的風格。網絡應用中使用的圖片一般由后端提供。你可能已經與后端開發者達成協議，將圖片保持在一個固定的尺寸。然后你寫下這樣的代碼。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img-list {
      display: flex;
      flex-direction: row;
      list-style: none;
    }
  </style>
</head>

<body>
  <ul class="img-list">
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*TyRLQdZO7NdPATwSeut8gg.png">
    </li>
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*pKOfOAOvx-fWzfITATgGRg.jpeg">
    </li>
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*mXOVdfMwS0IEcjPXiikJkg.png">
    </li>
  </ul>

</body>

</html>

而網頁看起來是這樣的。

圖片的排列與我們所期望的一樣。

通常情況下是沒有問題的。但是當我們寫代碼時，我們不能假設一切都會按照我們的預期發展。我們需要做好充分的準備。如果后端返回的圖片不正常，不符合預期的尺寸，可能大也可能小，那么布局就會被打亂。

你可以用這個替換其中一張圖片的鏈接。

https://miro.medium.com/max/1400/0*zQaS0awtSTOO-JYa.jpg

你會發現，頁面突然變得雜亂無章。

為了防止這個問題，使我們的頁面更加健壯，我們可以設置圖片的寬度和高度。這樣，我們就不必擔心后端返回的圖片的大小。

img {
  width: 128px;
  height: 128px;
}

但上述寫法有一個缺點：如果圖像本身的長寬比與我們設定的長寬比不一致，圖像將被壓縮或拉伸。

為了保持圖像的原始長寬比，我們可以使用 object-fit: cover 。

img {
  width: 128px;
  height: 128px;
  object-fit: cover;
}

object-fit 的CSS屬性設置一個被替換的元素的內容，如<img>或<video>，應該如何調整大小以適合其容器。

如果該值是 cover，那么被替換的內容的大小將保持其長寬比，同時填充元素的整個內容框。如果對象的長寬比與它的盒子的長寬比不一致，那么該對象將被剪掉以適配。

無圖片

我們之前討論的情況都是建立在我們能夠得到圖片的前提下。但是，在實際應用中，可能由于后端服務的不穩定，或者用戶自身的網絡信號不好，我們的網頁可能無法正確加載圖片。

當圖片缺失時，瀏覽器的默認樣式是不優雅的，這里我們可以優化它。

我們可以給 img元素添加一個 onerror 事件。如果在加載圖片時出現了錯誤，那么我們可以通過 onerror事件給該元素添加一個樣式，并使用404圖片。

img 元素:

<img src="https://miro.medium.com/xxx.jpg" alt='fireworks picture' onerror="this.classList.add('error');">

假設這就是我們的404圖像:

https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg

下面是 css 代碼

img.error {
      display: inline-block;
      transform: scale(1);
      content: '';
      color: transparent;
    }
img.error::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #f5f5f5 url('https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg') no-repeat center / 100% 100%;
    }

這樣，當 img 元素中的圖片鏈接無法加載圖片時，我們的404圖片將被使用。

這里還有一點需要優化。在這種情況下，如果原始圖片沒有被正確加載，用戶就不知道這個圖片應該是什么。為了方便用戶理解，我們可以將 img 元素的 alt 屬性顯示在頁面上。

img.error::after {
      content: attr(alt);
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      line-height: 2;
      background-color: rgba(0, 0, 0, .5);
      color: white;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

假設img的 alt 屬性是這樣的。

<img src="https://miro.medium.com/xxx.jpg" alt='Log of Medium' >

事例地址：https://codepen.io/bytefishmedium/pen/vYWYMxG

色彩對比度

當你在設計顏色組合時，你是否考慮過頁面的顏色對比？

你需要知道，世界上有很多色盲和色弱用戶。如果你的頁面的對比度低，可能會導致他們無法正常使用你的產品。無論是出于人文關懷，還是出于留住客戶的考慮，你都應該設計出合適的對比度。

WCAG AA規范指出，所有重要的內容需要有4.5:1以上的色彩對比度。

這里有一個對比度檢查器的工具。

https://webaim.org/resources/contrastchecker/

事例：

我們也可以使用Chrome DevTool來檢查一個元素的顏色對比。然后我們可以發現，Medium的網頁也在實踐這一原則。

總結

俗話說得好，細節決定成敗。如果你的項目有很多可以改善用戶體驗的細節，你就可以讓用戶感到舒服，你就有更高的成功概率。

~完，我是刷碗智，新的一年我們一起刷刷刷！

作者：Shadeed 譯者：前端小智來源：medium 原文：https://betterprogramming.pub/10-css-tricks-that-greatly-improve-user-experience-5ee52886ca4b

在線咨詢

上一篇：HTML元素與大小寫標簽
下一篇：使用 Vue.js 開發購物車功能2

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

8 種在 CSS 中隱藏元素的方法匯總

1.隱藏一個空元素

2.和 :has() 和 :not() 結合使用

2.1.查找子元素為空的父元素

2.2.查找不包含某個子元素的父元素

3.隱藏元素的常見方法

4.最后

可點擊區域

平滑滾動

選擇所有文本

Cursor

Text Overflow

Image

無圖片

色彩對比度

總結

您的項目需求