更新時(shí)間:2022-02-17 10:09:21 來(lái)源:動(dòng)力節(jié)點(diǎn) 瀏覽1306次
CSS隱藏元素的方法
display我們?cè)谑褂秒[藏內(nèi)容時(shí)謹(jǐn)慎地開始了這篇文章。正如我們所建立的,使用它來(lái)隱藏元素意味著根本不生成該元素。它在 DOM 中,但從未真正呈現(xiàn)。
該元素仍將顯示在標(biāo)記中,如果您檢查頁(yè)面,您將能夠看到該元素。盒子模型不會(huì)生成也不會(huì)出現(xiàn)在頁(yè)面上,這也適用于它的所有。
更重要的是,如果元素有任何事件監(jiān)聽器——比如點(diǎn)擊或懸停——它們根本不會(huì)注冊(cè)。正如我們已經(jīng)討論過的,屏幕閱讀器將忽略所有內(nèi)容。在這里,我們有兩個(gè)可見的按鈕和一個(gè)隱藏的按鈕display: none。所有三個(gè)按鈕都有點(diǎn)擊事件,但只有兩個(gè)可見按鈕會(huì)呈現(xiàn)并注冊(cè)點(diǎn)擊。
Display 是唯一會(huì)影響圖像請(qǐng)求觸發(fā)的屬性。如果圖像標(biāo)簽(或父元素)的display屬性設(shè)置為none通過內(nèi)聯(lián) CSS 或選擇器,則圖像將被下載。另一方面,如果圖像應(yīng)用了background屬性,則不會(huì)下載。
<img>之所以會(huì)出現(xiàn)這種情況,是因?yàn)樵诮馕?HTML 文檔并遇到標(biāo)簽時(shí),解析器沒有應(yīng)用 CSS 。另一方面,當(dāng)我們將圖像應(yīng)用到具有background屬性的元素時(shí),圖像不會(huì)被下載,因?yàn)榻馕銎鳑]有應(yīng)用調(diào)用圖像的 CSS。此行為在所有最新瀏覽器中都匹配。唯一的例外是 IE 11,它在這兩種情況下都會(huì)下載圖像。
如果元素的visibility屬性設(shè)置為hidden,則該元素是“視覺隱藏的”。“視覺上隱藏”聽起來(lái)很像display: none,但它的不同之處在于元素是生成和渲染的,但它是不可見的。這意味著元素的盒子模型是存在的,即使它看起來(lái)并不存在,它也會(huì)繼續(xù)占據(jù)屏幕上的空間。
想象一下,你穿著一件隱形斗篷,讓別人看不到你,但你仍然可以撞到東西。即使你是肉眼看不見的,你也確實(shí)在那里。
但這就是“視覺隱藏”和“不顯示”之間的差異結(jié)束的地方。事實(shí)上,隱藏的元素在可訪問性visibility和display事件觸發(fā)器方面表現(xiàn)相同。屏幕閱讀器無(wú)法訪問不可見元素并且不會(huì)注冊(cè)事件,正如我們?cè)谙旅娴难菔局锌吹降哪菢?,它與上一個(gè)示例完全相同,但只是display: none與visibility: hidden.
該opacity屬性僅影響元素的視覺方面。如果我們將元素的值設(shè)置opacity為零,則該元素將是完全透明的。同樣,這很像visibility: hidden我們?cè)谠厣吓想[形斗篷,它是不可見的,但仍然存在。
換句話說(shuō),我們所擁有的是一個(gè)空心的、透明的元素,它的作用與任何其他元素一樣,只是它是不可見的。聽起來(lái)很像visibility方法,對(duì)吧?不同之處在于屏幕閱讀器仍然可以訪問完全透明的元素,并且可以注冊(cè)事件,如點(diǎn)擊,如下面的示例所示。
使用絕對(duì)定位將元素推送到屏幕外是開發(fā)人員經(jīng)常隱藏內(nèi)容的另一種方式。使用topand left,我們可以將元素推離屏幕太遠(yuǎn),以至于永遠(yuǎn)看不到它。這就像把餅干罐藏在屋外,這樣孩子們(或者也許你!)就找不到它們了。
“絕對(duì)”是這里的關(guān)鍵詞。如果我們?cè)O(shè)置position為absolute,則從文檔流中取出一個(gè)元素,這表示它不再堅(jiān)持其在 DOM 中的自然位置。換句話說(shuō),頁(yè)面不會(huì)為其保留任何空間,這會(huì)在視覺上將元素打亂,將其定位到最近的定位元素(如果有),或者文檔根(如果沒有其他元素)。
我們利用絕對(duì)定位的優(yōu)勢(shì),將“隱藏”元素從文檔流中取出,并將其向左上角偏移,值為-9999px.
.hidden {
position: absolute;
top: -9999px;
left: -9999px;
}
到目前為止,該position方法是我們所見過的最接近可訪問性友好的在 CSS 中隱藏內(nèi)容的方法。但是導(dǎo)致突然頁(yè)面跳轉(zhuǎn)的可聚焦內(nèi)容的問題并不大。另一種可訪問隱藏的方法結(jié)合了絕對(duì)定位、clip屬性和隱藏溢出。
.visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
讓我們分解一下。
我們需要從文檔流中刪除元素。最好的方法是使用position: absolute. 這將刪除元素,但我們不會(huì)將其推離屏幕。
.visually-hidden {
position: absolute;
}
我們可以通過將 width 和 height 屬性設(shè)置為零來(lái)隱藏元素。不幸的是,這不起作用,因?yàn)槟承┢聊婚喿x器會(huì)忽略寬度和高度為零的元素。我們能做的就是將它設(shè)置為第二低的值,1px。這意味著內(nèi)容很容易溢出空間,因此我們還需要overflow: hidden確保它不會(huì)在視覺上溢出。
.visually-hidden {
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
要隱藏那個(gè)只有一個(gè)像素的正方形,我們可以使用 CSS剪輯屬性。它非常適合這種情況,因?yàn)樗粫?huì)影響屏幕閱讀器。內(nèi)容在那里,但同樣在視覺上是隱藏的。需要注意的是,它c(diǎn)lip已被棄用,clip-path但如果我們需要支持舊版本的 Internet Explorer,仍然需要它。
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
“視覺隱藏”類難題的另一部分是解決屏幕外可訪問文本的模糊問題,這是一種消除單詞之間空白的奇怪現(xiàn)象,使它們像一大串單詞一樣被大聲朗讀。例如,“Welcome back home”將被讀出為“Welcomebackhome”。
解決此問題的一個(gè)簡(jiǎn)單方法是設(shè)置white-space: nowrap:
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
而且,終于!最后要考慮的事情是允許某些具有本機(jī)焦點(diǎn)和活動(dòng)站點(diǎn)的元素在它們處于焦點(diǎn)時(shí)顯示,同時(shí)繼續(xù)阻止其他元素(如段落)顯示。我們可以為此使用:not偽選擇器。
.visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
通過上述介紹,相信大家對(duì)CSS隱藏元素的方法已經(jīng)有所了解,大家如果對(duì)此比較感興趣,想了解更多相關(guān)知識(shí),不妨來(lái)關(guān)注一下動(dòng)力節(jié)點(diǎn)Java視頻,里面的課程內(nèi)容細(xì)致全面,通俗易懂,從入門到精通,適合沒有基礎(chǔ)的小伙伴學(xué)習(xí),希望對(duì)大家能夠有所幫助。
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
有基礎(chǔ) 直達(dá)就業(yè)
業(yè)余時(shí)間 高薪轉(zhuǎn)行
工作1~3年,加薪神器
工作3~5年,晉升架構(gòu)
提交申請(qǐng)后,顧問老師會(huì)電話與您溝通安排學(xué)習(xí)