下面是正文~~

display: contents 介紹

CSS（層疊樣式表）中的 display: contents 是一個(gè)相對(duì)較新的屬性值，它對(duì)元素的布局和可視化有特殊的影響。當(dāng)你對(duì)一個(gè)元素應(yīng)用 display: contents，這個(gè)元素本身就像從DOM（文檔對(duì)象模型）中消失了一樣，而它的所有子元素則會(huì)升級(jí)到DOM結(jié)構(gòu)中的下一個(gè)層級(jí)。換句話(huà)說(shuō)，該元素的盒模型將被忽略，它的子元素會(huì)取而代之，就像直接插入到父元素中一樣。

假設(shè)我們有這樣一個(gè)HTML結(jié)構(gòu)：

<div id="parent">
  <div id="child1">Child 1</div>
  <div id="child2">Child 2</div>
</div>

正常情況下，#parent 是 #child1 和 #child2 的父元素，它們?cè)贒OM和布局中有一個(gè)明確的層級(jí)關(guān)系。

現(xiàn)在，如果我們對(duì) #parent 應(yīng)用 display: contents：

#parent {
  display: contents;
}

在這種情況下，#parent 在頁(yè)面布局中就像是“消失了”一樣。它的所有子元素（這里是 #child1 和 #child2）會(huì)直接升級(jí)到#parent所在的DOM層級(jí)。也就是說(shuō)，在布局和渲染過(guò)程中，#child1 和 #child2 將不再被視為 #parent 的子元素，而是像直接插入到 #parent 的父元素中一樣。

這樣做的結(jié)果是，任何應(yīng)用于 #parent 的布局和樣式都不會(huì)影響到頁(yè)面的渲染，但 #child1 和 #child2 會(huì)像正常元素一樣被渲染。

主要用途：

• 語(yǔ)義改進(jìn)：能夠改進(jìn)HTML結(jié)構(gòu)，使其更符合語(yǔ)義，但不影響布局和樣式。
• 布局優(yōu)化：在某些復(fù)雜的布局場(chǎng)景中，它可以簡(jiǎn)化DOM結(jié)構(gòu)，提高渲染性能。

display: contents 和可訪(fǎng)問(wèn)性的長(zhǎng)期問(wèn)題

從字面上看，這個(gè)CSS聲明改變了其應(yīng)用到的元素的顯示屬性。它使元素“消失”，將其子元素提升到DOM中的下一層級(jí)。

這種聲明在很多方面都可能是有用的。諷刺的是，其中一個(gè)用例就是改善你工作的底層語(yǔ)義。然而，這個(gè)聲明一開(kāi)始的效果有點(diǎn)過(guò)頭了。

CSS和可訪(fǎng)問(wèn)性

不是每個(gè)人都意識(shí)到這一點(diǎn)，但某些CSS會(huì)影響輔助技術(shù)的工作方式。就像燒毀你的房子確實(shí)會(huì)成功地除去其中可能存在的蜘蛛一樣，使用 display: contents 可能會(huì)完全消除某些元素被輔助技術(shù)識(shí)別的關(guān)鍵屬性。

簡(jiǎn)而言之，這會(huì)導(dǎo)致按鈕不被聲明為按鈕，表格不被聲明和導(dǎo)航為表格，列表也是如此，等等。

換句話(huà)說(shuō)：當(dāng)人們說(shuō)“HTML默認(rèn)是可訪(fǎng)問(wèn)的”時(shí)，display: contents 徹底破壞了這個(gè)“默認(rèn)”。這不好。

可訪(fǎng)問(wèn)性從業(yè)者注意到了這個(gè)問(wèn)題，并提出了完全合理的修復(fù)要求。特別值得一提的是Adrian Roselli的勤勉、有條理和實(shí)事求是的文檔和報(bào)告工作。

修復(fù)已經(jīng)完成，瀏覽器也已經(jīng)更新，我們得到了一個(gè)快樂(lè)的結(jié)局。對(duì)嗎？并不是那么簡(jiǎn)單。

回歸問(wèn)題

在軟件開(kāi)發(fā)中，回歸可能意味著幾件事情。這個(gè)詞通常用于負(fù)面語(yǔ)境，表達(dá)更新后的行為不小心恢復(fù)到以前，不太理想的工作方式。

對(duì)于 display: contents，這意味著每個(gè)人的自動(dòng)或近乎自動(dòng)更新的瀏覽器拋棄了非常必要的錯(cuò)誤修復(fù)，而沒(méi)有任何警告或通知，就回到了破壞語(yǔ)義HTML與輔助技術(shù)交流的基礎(chǔ)屬性。

這種類(lèi)型的回歸不是一個(gè)令人討厭的 bug，而是破壞了 Web 可訪(fǎng)問(wèn)性的基礎(chǔ)方面。

Adrian注意到了這一點(diǎn)。如果你繼續(xù)閱讀我給你鏈接的部分，他繼續(xù)注意到這一點(diǎn)?？傊?，我統(tǒng)計(jì)了關(guān)于 display: contents 的行為以不可訪(fǎng)問(wèn)的方式回歸了16次的更新。

看問(wèn)題的角度

制作瀏覽器是一件困難的事情。需要考慮很多、很多不同的事情，那還沒(méi)考慮到軟件的復(fù)雜性。

可訪(fǎng)問(wèn)性并不是每個(gè)人的首要任務(wù)。我可以在這里稍微寬容一些，因?yàn)槲抑饕菄L試用我擁有的東西工作，而不是我希望能有的東西。我習(xí)慣了應(yīng)對(duì)由于這種優(yōu)先級(jí)而產(chǎn)生的所有小問(wèn)題、陷阱和雜項(xiàng)。

然而，能夠使用Web界面絕非小事。display: contents 的問(wèn)題對(duì)使用它的界面的人們的生活質(zhì)量有非常真實(shí)、非?？闪炕挠绊?。

我還想讓你考慮一下這種打地鼠游戲是如何影響可訪(fǎng)問(wèn)性從業(yè)者的。告訴某人他們不能使用一個(gè)閃亮的新玩具永遠(yuǎn)不會(huì)受到歡迎。然后告訴他們你可以，但后來(lái)又不能了，這會(huì)削弱信任和能力的認(rèn)知。

別用 display: contents

現(xiàn)在，我不認(rèn)為我們這個(gè)行業(yè)可以自信地使用 display: contents。過(guò)去的行為是未來(lái)行為的良好指標(biāo)，而走向地獄的道路是由好意鋪成的。

我現(xiàn)在認(rèn)為這個(gè)聲明是不可預(yù)測(cè)的。常見(jiàn)的“只需用輔助技術(shù)測(cè)試其支持情況”的回應(yīng)在這里也不適用——當(dāng)前瀏覽器版本中該聲明的期望行為并不能保證在該瀏覽器的未來(lái)版本中持續(xù)。

這是一件罕見(jiàn)且令人不安的事情——整個(gè)現(xiàn)代Web都是建立在這樣的假設(shè)之上，即這樣的事情不會(huì)以這種方式停止工作。這不是互操作性問(wèn)題，而是由于疏忽造成的傷害。

display: contents 的回歸給我們提供了一個(gè)小小的窗口，讓我們看到瀏覽器制作的某些方面是如何（或不是如何）被優(yōu)先考慮和測(cè)試的。

人們可以發(fā)誓說(shuō)像可訪(fǎng)問(wèn)性和包容性這樣的事情是重要的，但當(dāng)涉及到這個(gè)特定的CSS聲明時(shí)，很明顯大多數(shù)瀏覽器制造商是不可信的。

這個(gè)聲明在實(shí)踐中的不穩(wěn)定性代表了一種非常真實(shí)、非常嚴(yán)重的風(fēng)險(xiǎn)，即在你無(wú)法控制的情況下，可能會(huì)在你的網(wǎng)站或Web應(yīng)用中引入關(guān)鍵的可訪(fǎng)問(wèn)性問(wèn)題。