首發於公眾號 大遷世界，歡迎關注。? 每週一篇實用的前端文章 ?️ 分享值得關注的開發工具 ? 分享個人創業過程中的趣事
快來免費體驗ChatGpt plus版本的，我們出的錢 體驗地址:https://chat.waixingyun.cn可以加入網站底部技術群，一起找bug，...
文章討論了在網站上使用"display: contents"屬性可能導致的潛在問題。作者強調了這種做法可能破壞網頁的語義結構，並可能對可訪問性產生不利影響。文章還提到了一些潛在的解決方案，以幫助開發人員避免這些問題。
https://ericwbailey.website/published/display-contents-consid...
下面是正文~~
display: contents 介紹
CSS（層疊樣式表）中的 display: contents 是一個相對較新的屬性值，它對元素的佈局和視覺化有特殊的影響。當你對一個元素應用 display: contents，這個元素本身就像從DOM（檔案物件模型）中消失了一樣，而它的所有子元素則會升級到DOM結構中的下一個層級。換句話說，該元素的盒模型將被忽略，它的子元素會取而代之，就像直接插入到父元素中一樣。
假設我們有這樣一個HTML結構：
<div id="parent">
<div id="child1">Child 1</div>
<div id="child2">Child 2</div>
</div>
正常情況下，#parent 是 #child1 和 #child2 的父元素，它們在DOM和佈局中有一個明確的層級關係。
現在，如果我們對 #parent 應用 display: contents：
#parent {
display: contents;
}
在這種情況下，#parent 在頁面佈局中就像是“消失了”一樣。它的所有子元素（這裡是 #child1 和 #child2）會直接升級到 #parent 所在的DOM層級。也就是說，在佈局和渲染過程中，#child1 和 #child2 將不再被視為 #parent 的子元素，而是像直接插入到 #parent 的父元素中一樣。
這樣做的結果是，任何應用於 #parent 的佈局和樣式都不會影響到頁面的渲染，但 #child1 和 #child2 會像正常元素一樣被渲染。
主要用途：
- 語義改進：能夠改進HTML結構，使其更符合語義，但不影響佈局和樣式。
- 佈局最佳化：在某些複雜的佈局場景中，它可以簡化DOM結構，提高渲染效能。
display: contents 和可訪問性的長期問題
從字面上看，這個CSS宣告改變了其應用到的元素的顯示屬性。它使元素“消失”，將其子元素提升到DOM中的下一層級。
這種宣告在很多方面都可能是有用的。諷刺的是，其中一個用例就是改善你工作的底層語義。然而，這個宣告一開始的效果有點過頭了。
CSS和可訪問性
不是每個人都意識到這一點，但某些CSS會影響輔助技術的工作方式。就像燒燬你的房子確實會成功地除去其中可能存在的蜘蛛一樣，使用 display: contents 可能會完全消除某些元素被輔助技術識別的關鍵屬性。
簡而言之，這會導致按鈕不被宣告為按鈕，表格不被宣告和導航為表格，列表也是如此，等等。
換句話說：當人們說“HTML預設是可訪問的”時，display: contents 徹底破壞了這個“預設”。這不好。
可訪問性從業者注意到了這個問題，並提出了完全合理的修復要求。特別值得一提的是Adrian Roselli的勤勉、有條理和實事求是的檔案和報告工作。
修復已經完成，瀏覽器也已經更新，我們得到了一個快樂的結局。對嗎？並不是那麼簡單。
迴歸問題
在軟體開發中，迴歸可能意味著幾件事情。這個詞通常用於負面語境，表達更新後的行為不小心恢復到以前，不太理想的工作方式。
對於 display: contents，這意味著每個人的自動或近乎自動更新的瀏覽器拋棄了非常必要的錯誤修復，而沒有任何警告或通知，就回到了破壞語義HTML與輔助技術交流的基礎屬性。
這種型別的迴歸不是一個令人討厭的 bug，而是破壞了 Web 可訪問性的基礎方面。
Adrian注意到了這一點。如果你繼續閱讀我給你連結的部分，他繼續注意到這一點。總之，我統計了關於 display: contents 的行為以不可訪問的方式迴歸了16次的更新。
看問題的角度
製作瀏覽器是一件困難的事情。需要考慮很多、很多不同的事情，那還沒考慮到軟體的複雜性。
可訪問性並不是每個人的首要任務。我可以在這裡稍微寬容一些，因為我主要是嘗試用我擁有的東西工作，而不是我希望能有的東西。我習慣了應對由於這種優先順序而產生的所有小問題、陷阱和雜項。
然而，能夠使用Web介面絕非小事。display: contents 的問題對使用它的介面的人們的生活質量有非常真實、非常可量化的影響。
我還想讓你考慮一下這種打地鼠遊戲是如何影響可訪問性從業者的。告訴某人他們不能使用一個閃亮的新玩具永遠不會受到歡迎。然後告訴他們你可以，但後來又不能了，這會削弱信任和能力的認知。
別用 display: contents
現在，我不認為我們這個行業可以自信地使用 display: contents。過去的行為是未來行為的良好指標，而走向地獄的道路是由好意鋪成的。
我現在認為這個宣告是不可預測的。常見的“只需用輔助技術測試其支援情況”的回應在這裡也不適用——當前瀏覽器版本中該宣告的期望行為並不能保證在該瀏覽器的未來版本中持續。
這是一件罕見且令人不安的事情——整個現代Web都是建立在這樣的假設之上，即這樣的事情不會以這種方式停止工作。這不是互操作性問題，而是由於疏忽造成的傷害。
display: contents 的迴歸給我們提供了一個小小的視窗，讓我們看到瀏覽器製作的某些方面是如何（或不是如何）被優先考慮和測試的。
人們可以發誓說像可訪問性和包容性這樣的事情是重要的，但當涉及到這個特定的CSS宣告時，很明顯大多數瀏覽器製造商是不可信的。
這個宣告在實踐中的不穩定性代表了一種非常真實、非常嚴重的風險，即在你無法控制的情況下，可能會在你的網站或Web應用中引入關鍵的可訪問性問題。
交流
首發於公眾號 大遷世界，歡迎關注。? 每週一篇實用的前端文章 ?️ 分享值得關注的開發工具 ❓ 有疑問？我來回答
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。