在 CSS 中隱藏元素的 10 種方法

CSS中很多隱藏元素的方法，但這些方法的可訪問性、布局、動(dòng)畫、性能和事件處理的方式有所不同。

動(dòng)畫： 一些CSS隱藏元素的方法一般是全有或者全無，元素要么是完全可見，要么是完全不可見，并且沒有中間狀態(tài)。其他的，比如透明度，可以是一個(gè)范圍的值，所以在這中間過程插入動(dòng)畫成為可能；
可訪問性： 下面的每一種方法都會(huì)在視覺上隱藏一個(gè)元素，但不一樣會(huì)真正的去除DOM元素。有一些方式隱藏元素后，屏幕閱讀器仍然能讀取到元素內(nèi)容；
事件處理： 隱藏元素之后，有些方式元素上的事件仍然能被觸發(fā)，而有些方式就會(huì)導(dǎo)致元素上的事件觸發(fā)無效；
表現(xiàn)： 瀏覽器加載并解析 HTML DOM 和 CSS 對(duì)象模型后，頁(yè)面將分三個(gè)階段呈現(xiàn)：布局（生成每個(gè)元素的幾何位置）、繪制（繪制每個(gè)元素的像素）、組合（以適當(dāng)?shù)捻樞蚍胖迷貙樱H導(dǎo)致構(gòu)圖變化的效果明顯比影響布局的效果更好。在某些情況下，瀏覽器還可以使用硬件加速。

下面就來看看CSS中隱藏元素的方式，以及每種方式的優(yōu)缺點(diǎn)。

1. opacity 和 filter: opacity()

opacity: N 和 filter: opacity(N) 屬性可以傳遞一個(gè) 0 到 1 之間的數(shù)字，或者 0% 和 100% 之間的百分比，對(duì)應(yīng)地表示完全透明和完全不透明。

opacity: N：該屬性用來設(shè)置元素的透明度；
filter: opacity(N) ：filter屬性用來設(shè)置元素的濾鏡，opacity是濾鏡重的透明度，用來設(shè)置元素的透明度。

div {
    opacity: 0;
}

div {
    filter: opacity(0%);
}
復(fù)制代碼

在現(xiàn)代瀏覽器中，這兩者之間幾乎沒有實(shí)際的區(qū)別，但如果同時(shí)應(yīng)用多種效果（模糊、對(duì)比度、灰度等）時(shí)，應(yīng)該使用 filter 屬性。

注意：opacity 可以設(shè)置動(dòng)畫并提供出色的性能，但頁(yè)面上保留完全透明的元素可能會(huì)觸發(fā)事件。

2. color alpha 透明度

可以將元素的color、background-color 和 border-color 等屬性設(shè)置為rgba(0,0,0,0)，這樣就會(huì)使元素完全透明：

div {
	color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}
復(fù)制代碼

這三個(gè)屬性都是支持設(shè)置動(dòng)畫效果的，需要注意，透明度不能應(yīng)用于帶有背景圖片的元素，除非它們是使用 linear-gradient 或類似方法生成的。

Alpha 通道可以設(shè)置為：

transparent：完全透明（中間不能插入動(dòng)畫）；
rgba(r, g, b, a)：紅色、綠色、藍(lán)色和 alpha；
hsla(h, s, l, a)：色相、飽和度、亮度和 alpha；
#RRGGBBAA 或 #RGBA。

3. transform

transform 屬性可以用于元素的平移、縮放、旋轉(zhuǎn)或傾斜等?？梢允褂?scale(0) 或者 translate(-9999px, 0px) 屬性值來將元素隱藏：

div {
	transform: scale(0);
}

div {
	translate(-9999px, 0px)
}
復(fù)制代碼

transform 屬性提供了出色的性能和硬件加速，因?yàn)樵乇挥行У匾苿?dòng)到了單獨(dú)的層中，并且可以在 2D 或 3D 中進(jìn)行動(dòng)畫處理。原始的布局空間會(huì)保持原樣，并不會(huì)受影響。使用這種方式隱藏的元素不會(huì)觸發(fā)任何事件。

4. clip-path

clip-path 屬性可以創(chuàng)建一個(gè)剪輯區(qū)域，用于確定元素的哪些部分是可見的。使用 clip-path: circle(0) 可以將元素進(jìn)行隱藏。

div {
	clip-path: circle(0);
}
復(fù)制代碼

clip-path為添加動(dòng)畫效果提供了空間，不過它只能在現(xiàn)代瀏覽器中使用。

5. visibility: hidden

visibility 屬性可以設(shè)置為 visible 或 hidden 來顯示和隱藏元素。

div {
	visibility: hidden;
}
復(fù)制代碼

除非使用collapse值，否則元素使用的空間保持不變。

6. display: none

display 可能是最常用的元素隱藏方法; 。當(dāng)其值為 none 時(shí)元素就隱藏了。被隱藏的元素不會(huì)在頁(yè)面中占據(jù)位置，也不會(huì)響應(yīng)綁定的監(jiān)聽事件。

div {
  display: none;
}
復(fù)制代碼

然而，在大多數(shù)情況下，display 可能是最糟糕的 CSS 屬性。除非使用 position:absolute 將元素移出文檔流，或者采用contain屬性，否則它的隱藏過程無法設(shè)置動(dòng)畫，并將觸發(fā)頁(yè)面重新布局。

7. z-index

可以通過將元素的 z-index 屬性設(shè)置為負(fù)值，以實(shí)現(xiàn)元素的隱藏。這實(shí)際上就是將元素放在了我們看不到的層。

div {
  z-index: -1;
}
復(fù)制代碼

8. position

position屬性允許使用top、bottom、left、right 從頁(yè)面中的默認(rèn)位置移動(dòng)元素。因此，絕對(duì)定位的元素可以通過左鍵：-9999px 等值移出屏幕：

div {
  position: absolute;
  left: -999px;
}
復(fù)制代碼

9. 覆蓋另一個(gè)元素

通過在元素的上面放置與背景顏色相同的元素，可以在視覺上隱藏一個(gè)元素。下面來使用::after偽元素來實(shí)現(xiàn)：

div::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}
復(fù)制代碼

雖然這從技術(shù)上講是可以實(shí)現(xiàn)的，但是這樣做需要更多的代碼。

10. 縮小尺寸

可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸以實(shí)現(xiàn)元素的隱藏?？赡苓€需要應(yīng)用 overflow: hidden; 來確保內(nèi)容不會(huì)溢出。

div {
  height: 0;
  padding: 0;
  overflow: hidden;
}
復(fù)制代碼

使用這種形式我們可以在隱藏過程中使用動(dòng)畫效果，并且他的性能會(huì)比 transform 好很多。

分類：

頁(yè)編程之圖片、隱藏。

同學(xué)們好，這里是免費(fèi)少兒編程知識(shí)分享，每天一行代碼誰都能學(xué)會(huì)。今天分享的知識(shí)是為網(wǎng)頁(yè)添加圖片控件和隱藏控件，用到的是input標(biāo)簽的type屬性值，image和hidden。這兩個(gè)控件太過于簡(jiǎn)單，所以我就放在一起講了，同時(shí)介紹了image控件button的image內(nèi)容，以及IMG控件之間的區(qū)別。演示了hidden控件在實(shí)際編程中的作用。

先來看看今天實(shí)例的運(yùn)行效果。網(wǎng)頁(yè)上分為兩段。

·第一段中有三張圖片，第一張就是type屬性等于image的效果，第二張是button中包含IMG標(biāo)簽的效果，第三張是純IMG標(biāo)簽的效果。這三張圖片的共同點(diǎn)是圖片完全一致。不同點(diǎn)是type=image，直接將整張圖片做成了提交按鈕，點(diǎn)擊之后即可提交整張表單，但外觀表現(xiàn)時(shí)仍然和普通的圖片是沒有任何差別的。

·第二張是button按鈕中使用了IMG標(biāo)簽，雖然它也有提交和圖片，但是它最外面仍然保留了按鈕的外邊框，看上去是以按鈕為主。

·第三章中直接使用IMG標(biāo)簽，它沒有提交功能就是一普通的圖片，但是我們?nèi)匀豢梢酝ㄟ^JS的submit函數(shù)來使其提交表單。

·第二段是一個(gè)密碼框一個(gè)提交按鈕。這一句話只是為了方便你們找到隱藏空間的位置，我還做了兩個(gè)hidden的隱藏控件，但是你們看不到，我隨便在這里輸入密碼，然后點(diǎn)擊按鈕時(shí)，JS就會(huì)取出(密碼)控件的值和隱藏控件中的值并且彈出對(duì)話框提示。

這里有兩點(diǎn)需要注意，可以看到密碼控件中的值在這里仍然是明文顯示的，證明它只是視覺上是*或者圓點(diǎn)，實(shí)際在數(shù)據(jù)傳輸中仍然是明文并沒有加密。

·第二點(diǎn)是隱藏控件中的值被成功讀取，看不到并不代表不存在，效果各位同學(xué)都已經(jīng)看到了。

在我們來看看實(shí)現(xiàn)的代碼，先講image值，它的關(guān)鍵屬性就是src和ID，也就是引用地址和命名，沒有什么好講的。我其實(shí)是不建議你們使用這個(gè)控件的，因?yàn)橐话惚韱翁峤磺?，都?huì)加上一層一層的驗(yàn)證，比如說是必填、b7手勢(shì)、數(shù)字、格式是否正確。這個(gè)時(shí)候除了最基礎(chǔ)的控件類型驗(yàn)證外還會(huì)用到 gs驗(yàn)證。而如果使用 gs驗(yàn)證就需要用到自定義函數(shù)，在提交到服務(wù)器前就驗(yàn)證好。

如果用戶數(shù)據(jù)是正確的就提交，如果不正確就終止提交操作提示用戶修改流程，這樣看上去沒有問題，但因image控件討厭也就討厭在這里。

·若用這種方式提交可能會(huì)發(fā)生表單提交兩次的現(xiàn)象，經(jīng)常會(huì)造成表單元素被重復(fù)提交，數(shù)據(jù)庫(kù)被寫入異常，所以盡量不用或者少用。

·至于hidden控件常用來保存一些不需要或者不希望展示給用戶的數(shù)據(jù)，他的常用屬性就是無這個(gè)Value和這個(gè)id。

我舉個(gè)例子幫助你們理解，現(xiàn)在客戶要求建立一個(gè)注冊(cè)新用戶的界面，但是要求將注冊(cè)步驟分為兩步。第一步，需要用戶填寫手機(jī)和昵稱，然后跳轉(zhuǎn)至第二頁(yè)，輸入密碼和其他的信息，第二頁(yè)肯定就不需要顯示出來用戶在第一頁(yè)的時(shí)候輸入的數(shù)據(jù)了。但這些數(shù)據(jù)又必須在第二頁(yè)的時(shí)候一起提交至服務(wù)器。

這時(shí)候就可以使用到隱藏控件--接收第一頁(yè)提交過來的數(shù)據(jù)并且不顯示，用戶也感受不到。直接填好信息提交時(shí)第一頁(yè)的數(shù)據(jù)也以隱藏空間的方式一起提交了。這僅僅是hidde空間的一個(gè)使用場(chǎng)景，還可以收集用戶信息、確定用戶身份、判斷提交源，在多個(gè)form表單中建立關(guān)節(jié)聯(lián)、做全局變量等，總的來說應(yīng)用方式還是很廣的。

在目前這個(gè)階段就只需要知道這兩控件能干什么和基礎(chǔ)寫法，計(jì)算完成后面到具體的使用場(chǎng)景時(shí)會(huì)再詳細(xì)講解。

好了，今天的分享就到這里，希望各位同學(xué)下去能夠照著寫三遍，做到不看視頻也能夠?qū)懗鰜?，所有的案例及相關(guān)文檔均可以向我獲取。下期見。網(wǎng)頁(yè)編程·服務(wù)端編程·數(shù)據(jù)庫(kù)·算法，點(diǎn)贊點(diǎn)關(guān)注吧！

Web 開發(fā)中出于多種原因，我們需要隱藏元素。例如，一個(gè)按鈕應(yīng)該在移動(dòng)中可見，而在桌面視口中隱藏?；蛘撸谝苿?dòng)設(shè)備上隱藏但要在桌面上顯示的導(dǎo)航元素。隱藏元素時(shí)有三種不同的狀態(tài)：

元素完全隱藏并從文檔流中刪除。
元素只是隱藏在視覺上，而且仍然可以被輔助技術(shù)(AT)訪問，比如屏幕閱讀器。
元素是可見的，但僅對(duì)屏幕閱讀器隱藏。

在這篇文章中，我們將學(xué)習(xí)在html和css中隱藏元素，并涵蓋易訪問性、動(dòng)畫和隱藏用例等方面，讓我們開始吧。

HTML5 隱藏屬性

它是一個(gè)布爾 HTML 屬性，隱藏了附加到它的元素。當(dāng)瀏覽器加載一個(gè)web頁(yè)面時(shí)，它不會(huì)渲染帶有hidden屬性的元素，除非該元素被CSS手動(dòng)覆蓋，這與應(yīng)用display: none的效果類似。

考慮下面的例子：

我們有一個(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ì)問為什么不使用display: none呢?這是個(gè)好問題。當(dāng)通過其hidden屬性調(diào)用圖像選擇器時(shí)，我們可以確定即使CSS因?yàn)槟撤N原因沒有加載，元素也會(huì)被隱藏。

可訪問性對(duì)hidden的影響

從可訪問性的角度來看，hidden將元素完全隱藏在web頁(yè)面之外，因此屏幕閱讀器無法訪問它。一定要避免使用它來隱藏僅用于表示目的的元素。

CSS display 屬性

每個(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)參見下圖：

注意，當(dāng)藍(lán)皮書被隱藏時(shí)，它已被完全從堆棧中刪除。為它保留的空間已經(jīng)消失了。同樣的概念也適用于在HTML中隱藏元素時(shí)。元素的預(yù)留空間已經(jīng)沒有了，它更改了文檔流，或者在我們的示例中，更改了圖書流堆棧。

下面是一個(gè)動(dòng)畫，演示當(dāng)移除書本時(shí)發(fā)生的情況：

如果資源隱藏在CSS中，它們會(huì)加載嗎？

是的，會(huì)的。例如，如果<image>被CSS隱藏，并且我們?cè)谀硞€(gè)斷點(diǎn)處顯示它，則它已經(jīng)被加載。即使圖片被CSS隱藏，該圖片也會(huì)引起HTTP請(qǐng)求。

在下面的演示中，我只添加了一個(gè)圖像，并使用CSS隱藏它。然后，我打開「DevTools」并檢查networks選項(xiàng)卡，它顯示圖像已加載。

稍后我們將對(duì)此進(jìn)行討論，以解釋如何在特定斷點(diǎn)或視口大小中不需要HTTP請(qǐng)求時(shí)減少HTTP請(qǐng)求。

style 元素

值得一提的是，有些元素的默認(rèn)值是display: none。可以將<style>元素添加到HTML頁(yè)面中，我們可以將其display屬性更改為block，這樣就可以看到它了。

「html」

<body>
    <style>
       .title { color: #000; }
    </style>
</body>

「css」

style {
    display: block;
}

如果您希望樣式塊始終可見且可編輯，這是非常有用的。可以通過向style標(biāo)簽添加屬性contentteditable =true來編輯它。

事例：https://codepen.io/shadeed/pen/3c1e8d7d69bcf03aa875e3e50d0ffe02?editors=1100

可訪問性對(duì)display: none的影響

使用display：none時(shí)，它將對(duì)屏幕閱讀器完全隱藏。

Opacity

通過將opacity度設(shè)置為0，該元素及其所有后代將被隱藏，并且不會(huì)被繼承，但是，它僅從視覺角度隱藏它們。除此之外，opacity值為1以外的元素將創(chuàng)建一個(gè)新的堆疊上下文。

在上圖中，藍(lán)皮書僅在視覺上隱藏。與使用display: none時(shí)發(fā)生的情況相比，它的空間仍然保留，并且堆棧順序沒有變化。

img {
    opacity: 0;
}

根據(jù)最初的示例，如果我們要隱藏不透明的圖像，結(jié)果將如下所示：

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

更新:2020年1月13日

Dusan Milovanovic指出，pointer-events: none | auto可以用來禁用opacity為0的隱藏元素上的鼠標(biāo)事件。這一點(diǎn)很重要，因?yàn)橛脩艨赡軙?huì)對(duì)單擊、懸?；蜻x擇隱藏元素的文本感到困惑。

事例：https://codepen.io/shadeed/pen/4900ddd4a4d324cc531c1980088f775a?editors=1100

可訪問性對(duì)opacity: 0的影響

一個(gè)元素以opacity: 0仍然可以被屏幕閱讀器訪問，并且可以用鍵盤進(jìn)行聚焦。

Visibility

通過使用visibility: hidden，我們可以顯示或隱藏類似于使用opacity: 0的元素，而不會(huì)影響文檔的視覺流。

請(qǐng)注意，藍(lán)皮書是如何從可視流中隱藏的，但是它并沒有影響圖書堆棧的順序。

當(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)用于元素的后代，但是可以從具有該元素的子元素重寫它。

事例源碼：https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

可訪問性對(duì)visibility: hidden的影響

該元素被隱藏，其后代將從可訪問性樹中刪除，并且屏幕閱讀器不會(huì)渲染該元素。

Positioning

要隱藏帶有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é)果，它將被完全隱藏。一旦它聚焦在鍵盤上，它就會(huì)像這樣顯示出來

.skip-link:focus {
    position: absolute;
    top: 0;
}

事例源碼：https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

可訪問性對(duì)position: absolute | fixed的影響

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

Clip Path

當(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è)圓來代替多邊形:

img {
    clip-path: circle(0 at 50% 50%);
}

可訪問性對(duì)clip-path的影響

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

事例源碼：https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

控制顏色和字體大小

雖然這兩種技術(shù)不像我們前面討論的那樣常見，但它們可能對(duì)某些用例有用。

顏色透明

通過使文本的顏色透明，它將隱藏在視覺上。這對(duì)于只有圖標(biāo)的按鈕非常有用。

字體大小

此外，將字體大小設(shè)置為0也很有用，因?yàn)檫@會(huì)在視覺上隱藏文本?？紤]下面的示例，其中有一個(gè)具有以下結(jié)構(gòu)的按鈕：

我們的目標(biāo)是以可訪問的方式隱藏文本。為此，我添加了以下CSS

.button span {
    color: transparent;
    font-size: 0;
}

這樣，文本就被隱藏了。它甚至可以在不更改顏色的情況下工作，但是我出于解釋目的添加了它。

事例源碼：https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

Aria Hidden

當(dāng)向元素添加aria-hidden屬性時(shí)，它將從可訪問性樹中刪除該元素，這可以增強(qiáng)屏幕閱讀器用戶的體驗(yàn)。注意，它并沒有在視覺上隱藏元素，它只針對(duì)屏幕閱讀器用戶。

<button>
    Menu
    <svg aria-hidden="true"><!-- --></svg>
</button>

在上面的例子中，我們有一個(gè)帶有標(biāo)簽和圖標(biāo)的菜單按鈕。為了向屏幕閱讀器隱藏圖標(biāo)，添加了aria-hidden。

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

隱藏裝飾性的內(nèi)容，如圖標(biāo)、圖像。
隱藏復(fù)制文本。
隱藏屏幕外或折疊的內(nèi)容。

可訪問性對(duì)aria-hidden="true"的影響

是為屏幕閱讀器設(shè)計(jì)的，因?yàn)樗粚?duì)屏幕閱讀器隱藏內(nèi)容。然而，內(nèi)容對(duì)于有視力的用戶仍然是可見的，并且鍵盤是可聚焦的。

動(dòng)畫與互動(dòng)

當(dāng)我們想讓一個(gè)隱藏的元素動(dòng)起來時(shí)，例如，顯示隱藏的移動(dòng)導(dǎo)航，它需要以一種可訪問的方式來完成。為了獲得一種可訪問的體驗(yàn)，我們將探索一些值得學(xué)習(xí)的好例子，以及一些不好的例子，以避免犯可能會(huì)給屏幕閱讀器用戶帶來不好體驗(yàn)的錯(cuò)誤。

####　菜單動(dòng)畫-不好的例子

我們有一個(gè)菜單，在展開時(shí)需要有滑動(dòng)動(dòng)畫。最簡(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類展開和折疊，該類將通過 JavaScript 如下添加:

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

結(jié)果可能看起來不錯(cuò)，但它有一個(gè)很大的錯(cuò)誤。使用opacity: 0不會(huì)隱藏可訪問性樹的導(dǎo)航。即使導(dǎo)航在視覺上是隱藏的，它仍然可以通過鍵盤聚焦，并且可以被屏幕閱讀器訪問。必須將其隱藏以避免混淆用戶。

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

簡(jiǎn)而言之，accessibility tree是屏幕閱讀器用戶可以訪問的所有內(nèi)容的列表。在我們的例子中，導(dǎo)航列表在那里，而它在視覺上是隱藏的。我們需要解決兩個(gè)問題:

1.菜單隱藏時(shí)避免用鍵盤聚焦 2.當(dāng)導(dǎo)航隱藏時(shí)，避免通過屏幕閱讀器告知導(dǎo)航

下面的屏幕截圖顯示了Mac OS上的VoiceOver轉(zhuǎn)子是如何看到頁(yè)面的。導(dǎo)航列表在那里，而它是隱藏的

事例源碼：https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100

菜單動(dòng)畫-好的例子

為了修正這個(gè)錯(cuò)誤，我們需要使用visibility: hidden作為導(dǎo)航菜單。這將確保菜單是隱藏的視覺和屏幕閱讀器。

「css」

添加后，菜單將從屏幕閱讀器中隱藏。讓我們?cè)俅螠y(cè)試，看看VoiceOver將顯示什么：

事例源碼：https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

自定義復(fù)選框

默認(rèn)的復(fù)選框設(shè)計(jì)很難自定義，因此，我們需要為復(fù)選框創(chuàng)建自定義設(shè)計(jì)。讓我們看看基本的 HTML：

要自定義復(fù)選框，我們需要以一種可訪問的方式隱藏輸入。為此，應(yīng)該使用position和其他屬性。有一個(gè)常見的CSS類，稱為sr-only或visual -hidden，它只在視覺上隱藏一個(gè)元素，并讓鍵盤和屏幕閱讀器用戶可以訪問它。

事例源碼：https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100

###　隱藏按鈕

在Twitter上，有一個(gè)名為“查看新推文”(See New Tweets)的按鈕，對(duì)于帶有aria-hidden內(nèi)容的屏幕閱讀器來說是隱藏的，只有在有新推文可用時(shí)才會(huì)顯示出來。

作者：Ahmad shaded 譯者：前端小智來源：sitepoint

原文：https://www.sitepoint.com/hide-elements-in-css/

在線咨詢

上一篇：HTML 屬性
下一篇：CTF競(jìng)賽介紹以及刷題網(wǎng)址

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

在 CSS 中隱藏元素的 10 種方法

1. opacity 和 filter: opacity()

2. color alpha 透明度

3. transform

4. clip-path

5. visibility: hidden

6. display: none

7. z-index

8. position

9. 覆蓋另一個(gè)元素

10. 縮小尺寸

HTML5 隱藏屬性

可訪問性對(duì)hidden的影響

CSS display 屬性

如果資源隱藏在CSS中，它們會(huì)加載嗎？

style 元素

可訪問性對(duì)display: none的影響

Opacity

更新:2020年1月13日

可訪問性對(duì)opacity: 0的影響

Visibility

可訪問性對(duì)visibility: hidden的影響

Positioning

可訪問性對(duì)position: absolute | fixed的影響

Clip Path

可訪問性對(duì)clip-path的影響

控制顏色和字體大小

顏色透明

字體大小

Aria Hidden

可訪問性對(duì)aria-hidden="true"的影響

動(dòng)畫與互動(dòng)

菜單動(dòng)畫-好的例子

自定義復(fù)選框

您的項(xiàng)目需求

如果資源隱藏在CSS中，它們會(huì)加載嗎？