下面是正文~~

display: contents 介紹

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

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

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

正常情況下，#parent 是 #child1 和 #child2 的父元素，它們在DOM和布局中有一個明確的層級關(guān)系。

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

#parent {
  display: contents;
}

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

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

主要用途：

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

display: contents 和可訪問性的長期問題

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

這種聲明在很多方面都可能是有用的。諷刺的是，其中一個用例就是改善你工作的底層語義。然而，這個聲明一開始的效果有點過頭了。

CSS和可訪問性

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

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

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

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

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

回歸問題

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

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

這種類型的回歸不是一個令人討厭的 bug，而是破壞了 Web 可訪問性的基礎(chǔ)方面。

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

看問題的角度

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

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

然而，能夠使用Web界面絕非小事。display: contents 的問題對使用它的界面的人們的生活質(zhì)量有非常真實、非常可量化的影響。

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

別用 display: contents

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

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

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

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

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

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