作者 | dev來源 | 大遷世界
文章討論了在網(wǎng)站上使用"display: contents"屬性可能導致的潛在問題。作者強調(diào)了這種做法可能破壞網(wǎng)頁的語義結構，并可能對可訪問性產(chǎn)生不利影響。文章還提到了一些潛在的解決方案，以幫助開發(fā)人員避免這些問題。
display: contents 介紹
CSS（層疊樣式表）中的 display: contents 是一個相對較新的屬性值，它對元素的布局和可視化有特殊的影響。當你對一個元素應用 display: contents，這個元素本身就像從DOM（文檔對象模型）中消失了一樣，而它的所有子元素則會升級到DOM結構中的下一個層級。換句話說，該元素的盒模型將被忽略，它的子元素會取而代之，就像直接插入到父元素中一樣。
<div id="parent">
<div id="child1">Child 1</div>
<div id="child2">Child 2</div>
</div>
正常情況下，#parent 是 #child1 和 #child2 的父元素，它們在DOM和布局中有一個明確的層級關系。現(xiàn)在，如果我們對 #parent 應用 display: contents：
#parent { display: contents;}在這種情況下，#parent 在頁面布局中就像是“消失了”一樣。它的所有子元素（這里是 #child1 和 #child2）會直接升級到#parent所在的DOM層級。也就是說，在布局和渲染過程中，#child1 和 #child2 將不再被視為 #parent 的子元素，而是像直接插入到 #parent 的父元素中一樣。這樣做的結果是，任何應用于#parent 的布局和樣式都不會影響到頁面的渲染，但 #child1 和 #child2 會像正常元素一樣被渲染。- 語義改進：能夠改進HTML結構，使其更符合語義，但不影響布局和樣式。
- 布局優(yōu)化：在某些復雜的布局場景中，它可以簡化DOM結構，提高渲染性能。
display: contents 和可訪問性的長期問題
從字面上看，這個CSS聲明改變了其應用到的元素的顯示屬性。它使元素“消失”，將其子元素提升到DOM中的下一層級。這種聲明在很多方面都可能是有用的。諷刺的是，其中一個用例就是改善你工作的底層語義。然而，這個聲明一開始的效果有點過頭了。CSS和可訪問性
不是每個人都意識到這一點，但某些CSS會影響輔助技術的工作方式。就像燒毀你的房子確實會成功地除去其中可能存在的蜘蛛一樣，使用 display: contents 可能會完全消除某些元素被輔助技術識別的關鍵屬性。簡而言之，這會導致按鈕不被聲明為按鈕，表格不被聲明和導航為表格，列表也是如此，等等。換句話說：當人們說“HTML默認是可訪問的”時，display: contents 徹底破壞了這個“默認”。這不好。可訪問性從業(yè)者注意到了這個問題，并提出了完全合理的修復要求。特別值得一提的是Adrian Roselli的勤勉、有條理和實事求是的文檔和報告工作。修復已經(jīng)完成，瀏覽器也已經(jīng)更新，我們得到了一個快樂的結局。對嗎？并不是那么簡單。回歸問題
在軟件開發(fā)中，回歸可能意味著幾件事情。這個詞通常用于負面語境，表達更新后的行為不小心恢復到以前，不太理想的工作方式。對于 display: contents，這意味著每個人的自動或近乎自動更新的瀏覽器拋棄了非常必要的錯誤修復，而沒有任何警告或通知，就回到了破壞語義HTML與輔助技術交流的基礎屬性。這種類型的回歸不是一個令人討厭的 bug，而是破壞了 Web 可訪問性的基礎方面。Adrian注意到了這一點。如果你繼續(xù)閱讀我給你鏈接的部分，他繼續(xù)注意到這一點?？傊?，我統(tǒng)計了關于 display: contents 的行為以不可訪問的方式回歸了16次的更新。看問題的角度
制作瀏覽器是一件困難的事情。需要考慮很多、很多不同的事情，那還沒考慮到軟件的復雜性。可訪問性并不是每個人的首要任務。我可以在這里稍微寬容一些，因為我主要是嘗試用我擁有的東西工作，而不是我希望能有的東西。我習慣了應對由于這種優(yōu)先級而產(chǎn)生的所有小問題、陷阱和雜項。然而，能夠使用Web界面絕非小事。display: contents 的問題對使用它的界面的人們的生活質(zhì)量有非常真實、非?？闪炕挠绊?。我還想讓你考慮一下這種打地鼠游戲是如何影響可訪問性從業(yè)者的。告訴某人他們不能使用一個閃亮的新玩具永遠不會受到歡迎。然后告訴他們你可以，但后來又不能了，這會削弱信任和能力的認知。別用 display: contents
現(xiàn)在，我不認為我們這個行業(yè)可以自信地使用 display: contents。過去的行為是未來行為的良好指標，而走向地獄的道路是由好意鋪成的。我現(xiàn)在認為這個聲明是不可預測的。常見的“只需用輔助技術測試其支持情況”的回應在這里也不適用——當前瀏覽器版本中該聲明的期望行為并不能保證在該瀏覽器的未來版本中持續(xù)。這是一件罕見且令人不安的事情——整個現(xiàn)代Web都是建立在這樣的假設之上，即這樣的事情不會以這種方式停止工作。這不是互操作性問題，而是由于疏忽造成的傷害。display: contents 的回歸給我們提供了一個小小的窗口，讓我們看到瀏覽器制作的某些方面是如何（或不是如何）被優(yōu)先考慮和測試的。人們可以發(fā)誓說像可訪問性和包容性這樣的事情是重要的，但當涉及到這個特定的CSS聲明時，很明顯大多數(shù)瀏覽器制造商是不可信的。這個聲明在實踐中的不穩(wěn)定性代表了一種非常真實、非常嚴重的風險，即在你無法控制的情況下，可能會在你的網(wǎng)站或Web應用中引入關鍵的可訪問性問題。
該文章在 2023/9/12 11:41:16 編輯過
400 186 1886
