整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
Web 開(kāi)發(fā)中出于多種原因，我們需要隱藏元素。例如，一個(gè)按鈕應(yīng)該在移動(dòng)中可見(jiàn)，而在桌面視口中隱藏。或者，在移動(dòng)設(shè)備上隱藏但要在桌面上顯示的導(dǎo)航元素。隱藏元素時(shí)有三種不同的狀態(tài)：
在這篇文章中，我們將學(xué)習(xí)在html和css中隱藏元素，并涵蓋易訪問(wèn)性、動(dòng)畫(huà)和隱藏用例等方面，讓我們開(kāi)始吧。
它是一個(gè)布爾 HTML 屬性，隱藏了附加到它的元素。當(dāng)瀏覽器加載一個(gè)web頁(yè)面時(shí)，它不會(huì)渲染帶有hidden屬性的元素，除非該元素被CSS手動(dòng)覆蓋，這與應(yīng)用display: none的效果類(lèi)似。
考慮下面的例子：
我們有一個(gè)title、一個(gè)figure和一個(gè)描述。只有當(dāng)視口寬度大于400px時(shí)，才會(huì)顯示該圖。我向元素添加了hidden`屬性。
在CSS中，我使用hidden屬性僅在所需的視口大小中顯示元素。
img[hidden] {
display: none;
}
@media (min-width: 400px) {
img[hidden] {
display: block;
}
}事例源碼：https://codepen.io/shadeed/pen/373c8a132e5d72201b935689d6990d16?editors=1100
那么，你可能會(huì)問(wèn)為什么不使用display: none呢?這是個(gè)好問(wèn)題。當(dāng)通過(guò)其hidden屬性調(diào)用圖像選擇器時(shí)，我們可以確定即使CSS因?yàn)槟撤N原因沒(méi)有加載，元素也會(huì)被隱藏。
從可訪問(wèn)性的角度來(lái)看，hidden將元素完全隱藏在web頁(yè)面之外，因此屏幕閱讀器無(wú)法訪問(wèn)它。一定要避免使用它來(lái)隱藏僅用于表示目的的元素。
每個(gè)元素都有一個(gè)默認(rèn)的display值，比如inline-block、block、table等等。要隱藏具有display屬性的元素，我們應(yīng)該使用display: none。當(dāng)一個(gè)元素使用display: none隱藏時(shí)，它的所有后代都將被刪除。
考慮下面的例子：
img {
display: none;
}
@media (min-width: 400px) {
img {
display: block;
}
}這將完全隱藏文檔流和屏幕閱讀器中的圖像。也許你想知道文檔流是什么？請(qǐng)參見(jiàn)下圖：
注意，當(dāng)藍(lán)皮書(shū)被隱藏時(shí)，它已被完全從堆棧中刪除。為它保留的空間已經(jīng)消失了。同樣的概念也適用于在HTML中隱藏元素時(shí)。元素的預(yù)留空間已經(jīng)沒(méi)有了，它更改了文檔流，或者在我們的示例中，更改了圖書(shū)流堆棧。
下面是一個(gè)動(dòng)畫(huà)，演示當(dāng)移除書(shū)本時(shí)發(fā)生的情況：
是的，會(huì)的。例如，如果<image>被CSS隱藏，并且我們?cè)谀硞€(gè)斷點(diǎn)處顯示它，則它已經(jīng)被加載。即使圖片被CSS隱藏，該圖片也會(huì)引起HTTP請(qǐng)求。
在下面的演示中，我只添加了一個(gè)圖像，并使用CSS隱藏它。然后，我打開(kāi)「DevTools」并檢查networks選項(xiàng)卡，它顯示圖像已加載。
稍后我們將對(duì)此進(jìn)行討論，以解釋如何在特定斷點(diǎn)或視口大小中不需要HTTP請(qǐng)求時(shí)減少HTTP請(qǐng)求。
值得一提的是，有些元素的默認(rèn)值是display: none。可以將<style>元素添加到HTML頁(yè)面中，我們可以將其display屬性更改為block，這樣就可以看到它了。
「html」
<body>
<style>
.title { color: #000; }
</style>
</body>「css」
style {
display: block;
}如果您希望樣式塊始終可見(jiàn)且可編輯，這是非常有用的。可以通過(guò)向style標(biāo)簽添加屬性contentteditable=true來(lái)編輯它。
事例：https://codepen.io/shadeed/pen/3c1e8d7d69bcf03aa875e3e50d0ffe02?editors=1100
使用display：none時(shí)，它將對(duì)屏幕閱讀器完全隱藏。
通過(guò)將opacity度設(shè)置為0，該元素及其所有后代將被隱藏，并且不會(huì)被繼承， 但是，它僅從視覺(jué)角度隱藏它們。除此之外，opacity值為1以外的元素將創(chuàng)建一個(gè)新的堆疊上下文。
在上圖中，藍(lán)皮書(shū)僅在視覺(jué)上隱藏。與使用display: none時(shí)發(fā)生的情況相比，它的空間仍然保留，并且堆棧順序沒(méi)有變化。
img {
opacity: 0;
}根據(jù)最初的示例，如果我們要隱藏不透明的圖像，結(jié)果將如下所示：
該圖像仍然存在，并且已保留其空間。它僅從視覺(jué)角度隱藏。
Dusan Milovanovic指出，pointer-events: none | auto可以用來(lái)禁用opacity為0的隱藏元素上的鼠標(biāo)事件。這一點(diǎn)很重要，因?yàn)橛脩艨赡軙?huì)對(duì)單擊、懸停或選擇隱藏元素的文本感到困惑。
事例：https://codepen.io/shadeed/pen/4900ddd4a4d324cc531c1980088f775a?editors=1100
一個(gè)元素以opacity: 0仍然可以被屏幕閱讀器訪問(wèn)，并且可以用鍵盤(pán)進(jìn)行聚焦。
通過(guò)使用visibility: hidden，我們可以顯示或隱藏類(lèi)似于使用opacity: 0的元素，而不會(huì)影響文檔的視覺(jué)流。
請(qǐng)注意，藍(lán)皮書(shū)是如何從可視流中隱藏的，但是它并沒(méi)有影響圖書(shū)堆棧的順序。
當(dāng)在父元素上使用visibility: hidden時(shí)，所有內(nèi)容都是隱藏的，但是當(dāng)該父元素的子元素具有visibility: visible時(shí)，將顯示該子元素。
「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可以讓圖片顯示。同樣，這是因?yàn)関isibility應(yīng)用于元素的后代，但是可以從具有該元素的子元素重寫(xiě)它。
事例源碼：https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
該元素被隱藏，其后代將從可訪問(wèn)性樹(shù)中刪除，并且屏幕閱讀器不會(huì)渲染該元素。
要隱藏帶有position屬性的元素，我們應(yīng)該將它移到屏幕外，并將其大小設(shè)置為0(寬度和高度)。個(gè)例子就是跳轉(zhuǎn)導(dǎo)航鏈接。考慮下面的圖:
要將鏈接放置在屏幕之外，我們應(yīng)該添加以下內(nèi)容
「css」
.skip-link {
position: absolute;
top: -100%;
}值-100%將推動(dòng)元素100%的視口高度。結(jié)果，它將被完全隱藏。一旦它聚焦在鍵盤(pán)上，它就會(huì)像這樣顯示出來(lái)
.skip-link:focus {
position: absolute;
top: 0;
}事例源碼：https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
屏幕閱讀器可訪問(wèn)該元素，并且鍵盤(pán)可聚焦。它只是從視口中隱藏起來(lái)。
當(dāng)在元素上使用clip-path時(shí)，它創(chuàng)建一個(gè)裁剪區(qū)域，該區(qū)域定義應(yīng)該顯示和隱藏哪些部分。
在上面的例子中，透明的黑色區(qū)域有clip-path。當(dāng)clip-path應(yīng)用于元素時(shí)，透明黑色區(qū)域下的任何內(nèi)容都不會(huì)顯示。
為了更直觀地演示以上內(nèi)容，我將使用clippy工具。在下面的GIF中，我有如下的clip-path:
將每個(gè)方向的多邊形值設(shè)置為0 0，則裁剪區(qū)域的大小將調(diào)整為0。結(jié)果，圖像將不會(huì)顯示。同樣，這也可以用一個(gè)圓來(lái)代替多邊形:
img {
clip-path: circle(0 at 50% 50%);
}元素僅在視覺(jué)上隱藏， 屏幕閱讀器和鍵盤(pán)焦點(diǎn)仍然可以使用它。
事例源碼：https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100
雖然這兩種技術(shù)不像我們前面討論的那樣常見(jiàn)，但它們可能對(duì)某些用例有用。
通過(guò)使文本的顏色透明，它將隱藏在視覺(jué)上。這對(duì)于只有圖標(biāo)的按鈕非常有用。
此外，將字體大小設(shè)置為0也很有用，因?yàn)檫@會(huì)在視覺(jué)上隱藏文本。考慮下面的示例，其中有一個(gè)具有以下結(jié)構(gòu)的按鈕：
我們的目標(biāo)是以可訪問(wèn)的方式隱藏文本。為此，我添加了以下CSS
.button span {
color: transparent;
font-size: 0;
}這樣，文本就被隱藏了。它甚至可以在不更改顏色的情況下工作，但是我出于解釋目的添加了它。
事例源碼：https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100
當(dāng)向元素添加aria-hidden屬性時(shí)，它將從可訪問(wèn)性樹(shù)中刪除該元素，這可以增強(qiáng)屏幕閱讀器用戶的體驗(yàn)。注意，它并沒(méi)有在視覺(jué)上隱藏元素，它只針對(duì)屏幕閱讀器用戶。
<button>
Menu
<svg aria-hidden="true"><!-- --></svg>
</button>在上面的例子中，我們有一個(gè)帶有標(biāo)簽和圖標(biāo)的菜單按鈕。為了向屏幕閱讀器隱藏圖標(biāo)，添加了aria-hidden。
根據(jù)Mozilla Developer Network (MDN)，下面是屬性的用例
是為屏幕閱讀器設(shè)計(jì)的，因?yàn)樗粚?duì)屏幕閱讀器隱藏內(nèi)容。然而，內(nèi)容對(duì)于有視力的用戶仍然是可見(jiàn)的，并且鍵盤(pán)是可聚焦的。
當(dāng)我們想讓一個(gè)隱藏的元素動(dòng)起來(lái)時(shí)，例如，顯示隱藏的移動(dòng)導(dǎo)航，它需要以一種可訪問(wèn)的方式來(lái)完成。為了獲得一種可訪問(wèn)的體驗(yàn)，我們將探索一些值得學(xué)習(xí)的好例子，以及一些不好的例子，以避免犯可能會(huì)給屏幕閱讀器用戶帶來(lái)不好體驗(yàn)的錯(cuò)誤。
#### 菜單動(dòng)畫(huà)-不好的例子
我們有一個(gè)菜單，在展開(kāi)時(shí)需要有滑動(dòng)動(dòng)畫(huà)。最簡(jiǎn)單的方法是在菜單中添加以下內(nèi)容：
ul {
opacity: 0;
transform: translateX(100%);
transition: 0.3s ease-out;
}
ul.active {
opacity: 1;
transform: translateX(0);
}有了上述內(nèi)容，菜單將根據(jù).active類(lèi)展開(kāi)和折疊，該類(lèi)將通過(guò) JavaScript 如下添加:
menuToggle.addEventListener('click', function(e){
e.preventDefault();
navMenu.classList.toggle('active');
});結(jié)果可能看起來(lái)不錯(cuò)，但它有一個(gè)很大的錯(cuò)誤。使用opacity: 0不會(huì)隱藏可訪問(wèn)性樹(shù)的導(dǎo)航。即使導(dǎo)航在視覺(jué)上是隱藏的，它仍然可以通過(guò)鍵盤(pán)聚焦，并且可以被屏幕閱讀器訪問(wèn)。必須將其隱藏以避免混淆用戶。
下面是來(lái)自Chrome開(kāi)發(fā)工具的 accessibility tree 的截圖:
簡(jiǎn)而言之，accessibility tree是屏幕閱讀器用戶可以訪問(wèn)的所有內(nèi)容的列表。在我們的例子中，導(dǎo)航列表在那里，而它在視覺(jué)上是隱藏的。我們需要解決兩個(gè)問(wèn)題:
1.菜單隱藏時(shí)避免用鍵盤(pán)聚焦 2.當(dāng)導(dǎo)航隱藏時(shí)，避免通過(guò)屏幕閱讀器告知導(dǎo)航
下面的屏幕截圖顯示了Mac OS上的VoiceOver轉(zhuǎn)子是如何看到頁(yè)面的。導(dǎo)航列表在那里，而它是隱藏的
事例源碼：https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100
為了修正這個(gè)錯(cuò)誤，我們需要使用visibility: hidden作為導(dǎo)航菜單。這將確保菜單是隱藏的視覺(jué)和屏幕閱讀器。
「css」
添加后，菜單將從屏幕閱讀器中隱藏。讓我們?cè)俅螠y(cè)試，看看VoiceOver將顯示什么：
事例源碼：https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110
默認(rèn)的復(fù)選框設(shè)計(jì)很難自定義，因此，我們需要為復(fù)選框創(chuàng)建自定義設(shè)計(jì)。讓我們看看基本的 HTML：
要自定義復(fù)選框，我們需要以一種可訪問(wèn)的方式隱藏輸入。為此，應(yīng)該使用position和其他屬性。有一個(gè)常見(jiàn)的CSS類(lèi)，稱(chēng)為sr-only或visual -hidden，它只在視覺(jué)上隱藏一個(gè)元素，并讓鍵盤(pán)和屏幕閱讀器用戶可以訪問(wèn)它。
事例源碼：https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100
### 隱藏按鈕
在Twitter上，有一個(gè)名為“查看新推文”(See New Tweets)的按鈕，對(duì)于帶有aria-hidden內(nèi)容的屏幕閱讀器來(lái)說(shuō)是隱藏的，只有在有新推文可用時(shí)才會(huì)顯示出來(lái)。
作者：Ahmad shaded 譯者：前端小智 來(lái)源：sitepoint
原文：https://www.sitepoint.com/hide-elements-in-css/
tml5移動(dòng)端常用顯示隱藏菜單的實(shí)現(xiàn)，點(diǎn)擊側(cè)邊菜單內(nèi)容展開(kāi)，這些都是移動(dòng)端頁(yè)面經(jīng)常用到的
如下：
點(diǎn)擊菜單按鈕后
展開(kāi)第三級(jí)菜單效果如下
實(shí)現(xiàn)方法
html結(jié)構(gòu)代碼:
\
css:
樣式代碼有點(diǎn)多，想要源碼的可以私信找我要
javascript：
部屬性和全局屬性
局部屬性：有些元素能規(guī)定自己的屬性，這種屬性稱(chēng)為局部屬性。 比如 link 元素，它具有的局部屬性有 href、 rel、 hreflang、 media、 type、 sizes 這六個(gè)。 全局屬性：可以用來(lái)配置所有元素共有的行為，這種屬性稱(chēng)為全局屬性，可以用在任何一個(gè)元素身上。
1、accesskey 屬性
使用 accesskey 屬性可以設(shè)定一個(gè)或幾個(gè)用來(lái)選擇頁(yè)面上的元素的快捷鍵。
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta > <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML全局屬性測(cè)試</title></head><body> <form action=""> <p> Name: <input type="text" > </p> <p> Password: <input type="password" > </p> <p> Name: <input type="submit" > </p> </form></body></html>
在上面的例子中，三個(gè) input 元素添加了 accesskey 屬性，這樣在 Mac 下就可以用 Control+Alt(Option)+ n快捷鍵訪問(wèn)到 Name 的輸入框了。用來(lái)觸發(fā) accesskey 機(jī)制的按鍵組合因平臺(tái)而異，具體如下：
| 瀏覽器 / 平臺(tái) | Window | Linux | Mac |
|---|---|---|---|
| Firefox | Alt + Shift + key | Alt + Shift + key | Control + Alt + key |
| Internet Explorer | Alt + key | N/A | N/A |
| Google Chrome | Alt + key | Alt + key | Control + Alt + key |
| Safari | Alt + key | N/A | Control + Alt + key |
| Opera | 同 Google Chrome | 同 Google Chrome | 同 Google Chrome |
關(guān)于 accesskey 這個(gè)全局屬性的詳解，可以看一下 HTML accesskey 屬性與 web 自定義鍵盤(pán)快捷訪問(wèn)
2、class 屬性
class 屬性用來(lái)將元素歸類(lèi)，這個(gè)就無(wú)需多言了。
3、contenteditable 屬性
contenteditable 是 HTML5 中新增加的屬性，，其用途是讓用戶能夠修改頁(yè)面上的內(nèi)容。
<body> <!-- contenteditable屬性應(yīng)用 --> <p contenteditable="true">設(shè)置為 true 是可編輯的</p></body>
如上例，p 元素的 contenteditable 屬性值設(shè)置為 true 時(shí)，用戶可以單擊文字編輯內(nèi)容。設(shè)置為 false 時(shí)禁止編輯。
4、dir 屬性
dir 屬性用來(lái)規(guī)定元素中文字的方向。有效值有兩個(gè)：ltr(從左到右)、rtl(從右到左)。
<!-- dir屬性應(yīng)用 --><p dir="ltr">從左到右</p><p dir="rtl">從右到左</p>
5、draggable 屬性
draggable 屬性是 HTML5 支持拖放操作的方式之一，用來(lái)表示元素是否可被拖放。
6、dropzone 屬性
dropzone 屬性是 HTML5 支持拖放操作的方式之一，與 draggable 屬性搭配使用。
7、id 屬性
id 屬性用來(lái)給元素分配一個(gè)唯一的標(biāo)識(shí)符。這個(gè)也無(wú)需多言。需要說(shuō)明的一點(diǎn)是，id 屬性還可以用來(lái)導(dǎo)航到文檔中的特定位置。
8、hidden 屬性
hidden 是個(gè)布爾屬性，表示相關(guān)元素當(dāng)前不需要關(guān)注，瀏覽器對(duì)它的處理方式是隱藏相關(guān)元素（隱隱想起來(lái)控制一個(gè)元素的展示隱藏的時(shí)候，會(huì)自定義一個(gè) hidden 類(lèi)，然后在里面寫(xiě)隱藏樣式），具體也可以看一下這篇介紹 HTML5 的 hidden 屬性
<!-- hidden屬性應(yīng)用 --> <div hidden>這個(gè)元素將會(huì)被隱藏</div>
9、lang 屬性
lang 屬性用于說(shuō)明元素內(nèi)容使用的語(yǔ)言。lang 屬性必須使用有效的 ISO 語(yǔ)音代碼，使用這個(gè)屬性的目的在于，讓瀏覽器調(diào)整其表達(dá)元素內(nèi)容的方式，比如在使用了文字朗讀器的情況下正確發(fā)音。
<!-- lang屬性應(yīng)用 --> <p lang="en">Hello - how are you?</p>
10、spellcheck 屬性
spellcheck 屬性用來(lái)表明瀏覽器是否應(yīng)該對(duì)元素的內(nèi)容進(jìn)行拼寫(xiě)檢查，這個(gè)屬性只有用在用戶可以編輯的元素上時(shí)才有意義。 spellcheck 屬性可以接受的值有兩個(gè)：true 和 false。至于拼寫(xiě)檢查的實(shí)現(xiàn)方式則因?yàn)g覽器而異。
<!-- spellcheck屬性應(yīng)用 --> <textarea >This is some lalalala text</textarea>
11、style 屬性
style 屬性用來(lái)直接在元素身上定義 CSS 樣式，這個(gè)也不做過(guò)多描述了。
12、tabindex 屬性
HTML 頁(yè)面的鍵盤(pán)焦點(diǎn)可以通過(guò)按 Tab 鍵在各元素之間切換。用 tabindex 屬性可以改變默認(rèn)的轉(zhuǎn)移順序。
<!-- tabindex屬性應(yīng)用 --> <form action=""> <label>Name: <input type="text" ></label> <label>City: <input type="text" ></label> <label>Country: <input type="text" ></label> <input type="submit" value="" tabindex="3"> </form>
上面的代碼實(shí)現(xiàn)效果是：在按 Tab 鍵的過(guò)程中，tabindex 為 1 的 Country 輸入框第一個(gè)被選中，接著焦點(diǎn)會(huì)跳到 Name 輸入框，最后是 submit 提交。tabindex 設(shè)置為 - 1 的元素不會(huì)在用戶按下 Tab 鍵后被選中。
13、title 屬性
title 屬性提供了元素的額外信息，瀏覽器通常用這些東西顯示工具條提示，這個(gè)在一些展示不全的文本標(biāo)題也經(jīng)常使用。
<!-- title屬性應(yīng)用 --><a title="我的個(gè)人網(wǎng)站">qiqihaobenben.github.io</a>
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
