与Elad Shechter的采访有关'新CSS重置”

这次采访探讨了Elad Shechter创新的CSS重置项目“ New-CSS-Reset”，这是一种利用尖端CSS功能的现代方法。我们不简单地介绍代码，而是深入研究其创建背后的原因及其功能的复杂性。

完整的重置代码是：

 /***新的CSS重置 - 版本1.2.0（最后更新23.7.2021）***/

/ *删除除“显示”以外的所有样式 */
*：where（：iframe，canvas，img，svg，视频）：不（svg *））{
  全部：不设置；
  显示：还原；
}

/ *首选盒子尺寸 */
*，，
*：：前，
*：：后 {
  盒子大小：边框框；
}

/ *删除列表样式 */
ol，ul {
  列表风格：无；
}

/ *防止图像超过容器 */
img {
  最大宽度：100％；
}

/ *倒塌的桌子边界 */
桌子 {
  边界爆发：崩溃；
}

/ * safari textareas的“白空间” */
textarea {
  白空间：还原；
}

Elad解释了需要进行新的重置的需求，强调现有重置依赖于较旧的CSS功能。他的方法利用了更新的功能来进行更高效，更有效的重置。他将方法与归一化的方法进行了对比。 Elad倡导使用标准化。CSS和硬重置，结合其优势。

新重置的核心all: unset; 。此功能强大的属性将所有继承的属性重置为inherit和非属性属性，以有效地删除initial浏览器样式。但是， display是一个例外。 all: unset;设置display到inline ，这是不可取的。因此， display: revert;用于还原每个元素的浏览器的默认display值，以确保正确布局。 revert关键字可以智能检索用户代理样式表的默认display值（如果有），否则会落后于unset行为。

选择器*:where(:not(iframe, canvas, img, svg, video):not(svg *))几乎针对所有元素，不包括这些元素（例如<iframe></iframe>，，，，<canvas></canvas> ）。 :where()伪级可最大程度地减少特异性，从而避免与特定于项目的样式发生冲突。单独的:not(svg *)排除保护SVG元素的完整性。

重置还包括诸如box-sizing: border-box之类的自以为是的样式，虽然不是浏览器不一致，但被广泛用作最佳实践。删除列表样式（ list-style: none; ）是通过对标记不必要的导航列表的共同用途来证明的，尽管有语义含义。

埃拉德（Elad）讨论了未来的潜在增加，这是由于他的项目反复出现的需求。 max-width: 100%;图像规则被视为可能的候选人。他还推测了即将到来的喀斯喀特层模块的影响，这表明它可以消除对降低特异性技术的需求，例如:where()通过提供层次的式方法来覆盖。这将允许将重置样式与特定于项目的样式进行清洁分开。

以上是与Elad Shechter的采访有关'新CSS重置”的详细内容。更多信息请关注PHP中文网其他相关文章！