hidden 屬性和 display:none 規則 (CSS) 有什么區別？

Question

HTML 有一個屬性hidden ，可以用來隱藏內容。

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

CSS 具有display:none規則，該規則也可用於隱藏內容並將內容本應占用的空間返回到文檔流。

article { display:none; }

從視覺上看，它們看起來是一樣的。 在語義上有什么區別嗎？ 在計算上？

關於何時使用其中一個或另一個，我應該考慮哪些准則？

Answer 1

關鍵的區別似乎是hidden的元素總是隱藏的，無論呈現方式如何：

hidden 屬性不得用於隱藏可以在另一個演示文稿中合法顯示的內容。 例如，在選項卡式對話框中使用 hidden 來隱藏面板是不正確的，因為選項卡式界面只是一種溢出呈現——同樣可以在一個帶有滾動條的大頁面中顯示所有表單控件。 使用此屬性僅從一個演示文稿中隱藏內容同樣是不正確的——如果某些內容被標記為隱藏，則它會從所有演示文稿中隱藏，包括例如屏幕閱讀器。

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

由於 CSS 可以針對不同的媒體/演示文稿類型，因此display: none將取決於給定的演示文稿。 例如，在桌面瀏覽器中查看時，某些元素可能會display: none ，但在移動瀏覽器中則不會。 或者，在視覺上隱藏但仍然可供屏幕閱讀器使用。

Answer 2

簡單的規則：

您是否隱藏了某些內容，因為它在語義上還不是頁面內容的一部分，例如一系列尚未觸發的潛在錯誤消息？ 使用hidden 。

您是否隱藏了屬於頁面內容的一部分，例如將段落切換到折疊的 state 以避免混亂？ 使用display:none 。

hidden是關於語義（當前是否是頁面內容的一部分）和display: none是關於頁面內容的呈現。

不幸的是， hidden不會覆蓋任何display CSS，即使不應該顯示不屬於頁面的內容在直覺上也是如此。 如果您希望hidden得到尊重，請添加此 css 規則： [hidden] { display: none !important }

例子：

1. 使用hidden表示在填寫表格之前不應作為頁面一部分存在的“謝謝”消息。

2. 對一系列潛在的錯誤消息使用hidden ，這些錯誤消息可能會根據用戶在頁面上的操作顯示給用戶。 在發生錯誤之前，這些錯誤在語義上不是頁面內容的一部分。

3. 使用display: none用於僅在用戶懸停或單擊菜單按鈕時顯示的導航。

4. 將display: none用於選項卡式窗格，其中選項卡式窗格的唯一原因是同時向用戶顯示所有窗格會過於龐大。 （也許如果用戶有足夠寬的屏幕，所有窗格都會顯示。因此，窗格始終是頁面內容的一部分，因此 CSS 表示邏輯是合適的選擇）。

5. 使用display: none折疊文檔中的段落或部分。 這表明該段落仍然是頁面內容的一部分，但為了方便用戶，我們將其隱藏了。

注意：可訪問性設備將受益於了解導航或存在但當前未顯示的內容與當前不被視為頁面一部分且因此不應向用戶描述的內容之間的區別。

Answer 3

hidden屬性 (HTML5) 和display:none規則 (CSS) 有什么區別？

MDN確認：

在具有hidden屬性的元素上更改 CSS display屬性的值會覆蓋該行為。

我們可以直截了當地展示這一點：

 .hidden { display:none; }.not-hidden { display: block }

 <p hidden>Paragraph 1: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p> <p class="hidden">Paragraph 2: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p> <p hidden class="not-hidden">Paragraph 3: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p> <p class="hidden not-hidden">Paragraph 4: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>

這表明以下之間的表現差異為零：

• a) <p hidden>
• b) <p class="hidden"> //.hidden {display: none;}

---

添加輔助功能：

然而......除了視覺呈現之外，還有更多需要考慮的事情。 我們還應該迎合屏幕閱讀器以最大限度地提高可訪問性（對嗎？），所以上面的第二個選項應該更恰當地看起來像這樣：

• b) <p class="hidden" aria-hidden="true"> //.hidden {display: none;}

---

為什么使用class="hidden"和aria-hidden="true"比使用hidden更好？

因為我們知道CSS 可以使用級聯或特異性覆蓋，而且我們知道aria-hidden與屏幕閱讀器等可訪問性用戶代理有關。

相比之下，HTML5 hidden屬性要粗略得多。 它沒有明確說明它做什么或不做什么——更糟糕的是，它似乎暗示它做了它實際上沒有做的事情。

參見： https://meowni.ca/hidden.is.a.lie.html

---

最后注：

無論 HTML、CSS 和 ARIA 與 go 的組合如何，請注意：

我們已經有 6 種方法來隱藏具有不同目的/意圖的內容。

1. display: none;
2. visibility: hidden; （不顯示，但仍保留空間）
3. opacity: 0;
4. width: 0; height: 0;
5. aria-hidden="true"
6. 在表單數據的情況下， input type="hidden"

資料來源： https://davidwalsh.name/html5-hidden#comment-501242

Answer 4

這兩者都隱藏了一個元素，但區別與布局有關，顯示：無