【譯】Web 隱藏技術：幾中隱藏 Web 中的元素方法及優缺點

時間 2020-05-15

標籤 web 隱藏技術元素方法優缺點欄目 HTML 简体版

原文原文鏈接

做者：Ahmad shaded 譯者：前端小智來源：sitepointcss

點贊再看，養成習慣html

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。前端

在 Web 開發中出於多種緣由，咱們須要隱藏元素。例如，一個按鈕應該在移動中可見，而在桌面視口中隱藏。或者，在移動設備上隱藏但要在桌面上顯示的導航元素。隱藏元素時有三種不一樣的狀態：git

元素徹底隱藏並從文檔流中刪除。
元素只是隱藏在視覺上，並且仍然能夠被輔助技術(AT)訪問，好比屏幕閱讀器。
元素是可見的，但僅對屏幕閱讀器隱藏。

在這篇文章中，咱們將學習在html和css中隱藏元素，並涵蓋易訪問性、動畫和隱藏用例等方面，讓咱們開始吧。github

HTML5 隱藏屬性

它是一個布爾 HTML 屬性，隱藏了附加到它的元素。當瀏覽器加載一個web頁面時，它不會渲染帶有hidden屬性的元素，除非該元素被CSS手動覆蓋，這與應用display: none的效果相似。web

考慮下面的例子：面試

咱們有一個title、一個figure和一個描述。只有當視口寬度大於400px時，纔會顯示該圖。我向元素添加了hidden`屬性。瀏覽器

在CSS中，我使用hidden屬性僅在所需的視口大小中顯示元素。bash

img[hidden] {
  display: none;
}

@media (min-width: 400px) {
  img[hidden] {
    display: block;
  }
}
複製代碼

事例源碼：codepen.io/shadeed/pen…微信

那麼，你可能會問爲何不使用display: none呢?這是個好問題。當經過其hidden屬性調用圖像選擇器時，咱們能夠肯定即便CSS由於某種緣由沒有加載，元素也會被隱藏。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

可訪問性對`hidden`的影響

從可訪問性的角度來看，hidden將元素徹底隱藏在web頁面以外，所以屏幕閱讀器沒法訪問它。必定要避免使用它來隱藏僅用於表示目的的元素。

CSS display 屬性

每一個元素都有一個默認的display值，好比inline-block、block、table等等。要隱藏具備display屬性的元素，咱們應該使用display: none。當一個元素使用display: none隱藏時，它的全部後代都將被刪除。

考慮下面的例子：

img {
  display: none;
}

@media (min-width: 400px) {
  img {
    display: block;
  }
}
複製代碼

這將徹底隱藏文檔流和屏幕閱讀器中的圖像。也許你想知道文檔流是什麼？請參見下圖：

注意，當藍皮書被隱藏時，它已被徹底從堆棧中刪除。爲它保留的空間已經消失了。一樣的概念也適用於在HTML中隱藏元素時。元素的預留空間已經沒有了，它更改了文檔流，或者在咱們的示例中，更改了圖書流堆棧。

下面是一個動畫，演示當移除書本時發生的狀況：

若是資源隱藏在CSS中，它們會加載嗎？

是的，會的。例如，若是<image>被CSS隱藏，而且咱們在某個斷點處顯示它，則它已經被加載。即便圖片被CSS隱藏，該圖片也會引發HTTP請求。

在下面的演示中，我只添加了一個圖像，並使用CSS隱藏它。而後，我打開DevTools並檢查networks選項卡，它顯示圖像已加載。

稍後咱們將對此進行討論，以解釋如何在特定斷點或視口大小中不須要HTTP請求時減小HTTP請求。

style 元素

值得一提的是，有些元素的默認值是display: none。能夠將<style>元素添加到HTML頁面中，咱們能夠將其display屬性更改成block，這樣就能夠看到它了。

html

<body>
    <style>
       .title { color: #000; }
    </style>
</body>
複製代碼

css

style {
    display: block;
}
複製代碼

若是您但願樣式塊始終可見且可編輯，這是很是有用的。能夠經過向style標籤添加屬性contentteditable =true來編輯它。

事例：codepen.io/shadeed/pen…

可訪問性對`display: none`的影響

使用display：none時，它將對屏幕閱讀器徹底隱藏。

Opacity

經過將opacity度設置爲0，該元素及其全部後代將被隱藏，而且不會被繼承，可是，它僅從視覺角度隱藏它們。除此以外，opacity值爲1之外的元素將建立一個新的堆疊上下文。

在上圖中，藍皮書僅在視覺上隱藏。與使用display: none時發生的狀況相比，它的空間仍然保留，而且堆棧順序沒有變化。

img {
    opacity: 0;
}
複製代碼

根據最初的示例，若是咱們要隱藏不透明的圖像，結果將以下所示：

該圖像仍然存在，而且已保留其空間。它僅從視覺角度隱藏。

更新:2020年1月13日

Dusan Milovanovic指出，pointer-events: none | auto能夠用來禁用opacity爲0的隱藏元素上的鼠標事件。這一點很重要，由於用戶可能會對單擊、懸停或選擇隱藏元素的文本感到困惑。

事例：codepen.io/shadeed/pen…

可訪問性對`opacity: 0`的影響

一個元素以opacity: 0仍然能夠被屏幕閱讀器訪問，而且能夠用鍵盤進行聚焦。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

Visibility

經過使用visibility: hidden，咱們能夠顯示或隱藏相似於使用opacity: 0的元素，而不會影響文檔的視覺流。

請注意，藍皮書是如何從可視流中隱藏的，可是它並無影響圖書堆棧的順序。

當在父元素上使用visibility: hidden時，全部內容都是隱藏的，可是當該父元素的子元素具備visibility: visible時，將顯示該子元素。

html

<article>
  <h1>Spring is on the way</h1>
  <img src="landscape.jpg" alt="">
  <p><!-- Desc --></p>
</article>
複製代碼

CSS

article {
    visibility: hidden;
}

img {
    visibility: visible;
}
複製代碼

在上面的例子中，<article>元素具備visibility: hidden。可是，添加visibility: visible可讓圖片顯示。一樣，這是由於visibility應用於元素的後代，可是能夠從具備該元素的子元素重寫它。

事例源碼：codepen.io/shadeed/pen…

可訪問性對`visibility: hidden`的影響

該元素被隱藏，其後代將從可訪問性樹中刪除，而且屏幕閱讀器不會渲染該元素。

Positioning

要隱藏帶有position屬性的元素，咱們應該將它移到屏幕外，並將其大小設置爲0(寬度和高度)。個例子就是跳轉導航連接。考慮下面的圖:

要將連接放置在屏幕以外，咱們應該添加如下內容

css

.skip-link {
    position: absolute;
    top: -100%;
}
複製代碼

值-100%將推進元素100%的視口高度。結果，它將被徹底隱藏。一旦它聚焦在鍵盤上，它就會像這樣顯示出來

.skip-link:focus {
    position: absolute;
    top: 0;
}
複製代碼

事例源碼：codepen.io/shadeed/pen…

可訪問性對`position: absolute | fixed`的影響

屏幕閱讀器可訪問該元素，而且鍵盤可聚焦。它只是從視口中隱藏起來。

Clip Path

當在元素上使用clip-path時，它建立一個裁剪區域，該區域定義應該顯示和隱藏哪些部分。

在上面的例子中，透明的黑色區域有clip-path。當clip-path應用於元素時，透明黑色區域下的任何內容都不會顯示。

爲了更直觀地演示以上內容，我將使用clippy工具。在下面的GIF中，我有以下的clip-path:

將每一個方向的多邊形值設置爲0 0，則裁剪區域的大小將調整爲0。結果，圖像將不會顯示。一樣，這也能夠用一個圓來代替多邊形:

img {
    clip-path: circle(0 at 50% 50%);
}
複製代碼

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

可訪問性對`clip-path`的影響

元素僅在視覺上隱藏，屏幕閱讀器和鍵盤焦點仍然可使用它。

事例源碼：codepen.io/shadeed/pen…

控制顏色和字體大小

雖然這兩種技術不像咱們前面討論的那樣常見，但它們可能對某些用例有用。

顏色透明

經過使文本的顏色透明，它將隱藏在視覺上。這對於只有圖標的按鈕很是有用。

字體大小

此外，將字體大小設置爲0也頗有用，由於這會在視覺上隱藏文本。考慮下面的示例，其中有一個具備如下結構的按鈕：

<button>
  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false">
    <!-- Path data -->
  </svg>
  <span>Like</span>
</button>
複製代碼

咱們的目標是以可訪問的方式隱藏文本。爲此，我添加了如下CSS

.button span {
    color: transparent;
    font-size: 0;
}
複製代碼

這樣，文本就被隱藏了。它甚至能夠在不更改顏色的狀況下工做，可是我出於解釋目的添加了它。

事例源碼：codepen.io/shadeed/pen…

Aria Hidden

當向元素添加aria-hidden屬性時，它將從可訪問性樹中刪除該元素，這能夠加強屏幕閱讀器用戶的體驗。注意，它並無在視覺上隱藏元素，它只針對屏幕閱讀器用戶。

<button>
    Menu
    <svg aria-hidden="true"><!-- --></svg>
</button>
複製代碼

在上面的例子中，咱們有一個帶有標籤和圖標的菜單按鈕。爲了向屏幕閱讀器隱藏圖標，添加了aria-hidden。

根據Mozilla Developer Network (MDN)，下面是屬性的用例

隱藏裝飾性的內容，如圖標、圖像。
隱藏複製文本。
隱藏屏幕外或摺疊的內容。

可訪問性對`aria-hidden="true"`的影響

是爲屏幕閱讀器設計的，由於它只對屏幕閱讀器隱藏內容。然而，內容對於有視力的用戶仍然是可見的，而且鍵盤是可聚焦的。

動畫與互動

當咱們想讓一個隱藏的元素動起來時，例如，顯示隱藏的移動導航，它須要以一種可訪問的方式來完成。爲了得到一種可訪問的體驗，咱們將探索一些值得學習的好例子，以及一些很差的例子，以免犯可能會給屏幕閱讀器用戶帶來很差體驗的錯誤。

#### 菜單動畫-很差的例子

咱們有一個菜單，在展開時須要有滑動動畫。最簡單的方法是在菜單中添加如下內容：

ul {
    opacity: 0;
    transform: translateX(100%);
    transition: 0.3s ease-out;
}

ul.active {
    opacity: 1;
    transform: translateX(0);
}
複製代碼

有了上述內容，菜單將根據.active類展開和摺疊，該類將經過 JavaScript 以下添加:

menuToggle.addEventListener('click', function(e){
  e.preventDefault();
  navMenu.classList.toggle('active');
});
複製代碼

結果可能看起來不錯，但它有一個很大的錯誤。使用opacity: 0不會隱藏可訪問性樹的導航。即便導航在視覺上是隱藏的，它仍然能夠經過鍵盤聚焦，而且能夠被屏幕閱讀器訪問。必須將其隱藏以免混淆用戶。

下面是來自Chrome開發工具的 accessibility tree 的截圖:

簡而言之，accessibility tree是屏幕閱讀器用戶能夠訪問的全部內容的列表。在咱們的例子中，導航列表在那裏，而它在視覺上是隱藏的。咱們須要解決兩個問題:

1.菜單隱藏時避免用鍵盤聚焦 2.當導航隱藏時，避免經過屏幕閱讀器告知導航

下面的屏幕截圖顯示了Mac OS上的VoiceOver轉子是如何看到頁面的。導航列表在那裏，而它是隱藏的

事例源碼：codepen.io/shadeed/pen…

菜單動畫-好的例子

爲了修正這個錯誤，咱們須要使用visibility: hidden做爲導航菜單。這將確保菜單是隱藏的視覺和屏幕閱讀器。

css

ul {
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: 0.3s ease-out;
}

ul.active {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}
複製代碼

添加後，菜單將從屏幕閱讀器中隱藏。讓咱們再次測試，看看VoiceOver將顯示什麼：

事例源碼：codepen.io/shadeed/pen…

自定義複選框

默認的複選框設計很難自定義，所以，咱們須要爲複選框建立自定義設計。讓咱們看看基本的 HTML：

<p class="c-checkbox">
  <input class="sr-only" type="checkbox" name="" id="c1">
  <label class="c-checkbox__label" for="c1">Custom checkbox</label>
</p>
複製代碼

要自定義複選框，咱們須要以一種可訪問的方式隱藏輸入。爲此，應該使用position和其餘屬性。有一個常見的CSS類，稱爲sr-only或visual -hidden，它只在視覺上隱藏一個元素，並讓鍵盤和屏幕閱讀器用戶能夠訪問它。

.sr-only {
  border: 0; 
  clip: rect(0 0 0 0); 
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  height: 1px; 
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
複製代碼

事例源碼：codepen.io/shadeed/pen…

#### 隱藏按鈕