共计 2606 个字符，预计需要花费 7 分钟才能阅读完成。
首发于公众号 大迁世界，欢送关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 😜 分享集体守业过程中的趣事
快来收费体验 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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
