CSS 补救 | CSS-Tricks

CSS 重置已有 15 年的历史。事实上，“重置”并不是一个准确的词。Tantek Çelik 在 2004 年的作品称为“undohtml.css”，直到几年后 Eric Meyer 将他的版本称为重置，这个词才成为默认术语。当 Normalize 出现时，它将自己称为重置的替代方案，这感觉很对，因为它不是试图消除所有样式，而是将浏览器在其用户代理样式表中提供的基本样式统一起来。

我们之前在 Reboot, Resets, and Reasoning 中回顾了这段历史。每一种对这些（我们称之为“基本”样式表）的理解都有不同的角度。它试图保留多少 UA 默认值？它有多固执己见？它考虑了多少浏览器支持的回溯？

现在出现了 CSS 补救（他们说它还没有准备好使用），它又有了不同的想法

将 CSS 属性或值设置为如果 CSSWG 今天从头开始创建 CSS，并且不用担心向后兼容性，它们将是什么样子。

令人着迷的想法。

CSS 补救重新划定了什么是固执己见，什么是合理的界限。我认为像 * { box-sizing: border-box; } 这样的东西对于基本样式表来说是一个相当强烈的意见。没有 UA 样式表这样做，所以它只是因为它很理想而应用了一个全局规则。它绝对很理想！它只是固执己见。

但是，没有将 border-box 设为默认值被认为是 CSS 错误。所以如果 CSS 补救是 UA 样式表应该是什么样子，那么 border-box 就不是固执己见；它是新的默认值。

不幸的是，我们可能永远无法在浏览器中拥有一个全新的 UA 样式表，因为破坏网站的风险太高。如果 Firefox 发布了一些新的现代化的 UA 样式表，它看起来很不错，但只有在你浏览了数十亿个没有为处理应用于它们的新 CSS 而构建的网站时才会出现问题，那么人们就会责怪 Firefox——而且责怪得没错。优雅地处理遗留代码是 Web 的巨大优势，也是阻碍我们前进的原因。不过，前者比后者更重要。

看到 Jen 一直在思考并收集这些想法，真的很有趣

img {
display: inline;
vertical-align: baseline; }

对于 Web 开发来说是一个愚蠢的默认值。

哪个更好？

img {
display: inline;
vertical-align: bottom; }
（移除神秘的间隙）

或者

img {
display: block; }
（块化）https://#/UyBtRO6SAv

— Jen Simmons (@jensimmons) 2019 年 2 月 10 日

我同意！图像下方的那一小块空白让无数人感到困惑。它很容易修复，但将其归咎于 vertical-align 有点傻，而且非常适合在新的 UA 样式表中修复。

我将正在进行的版本放入了比较工具中

查看 Pen
HTML 万用工具 by Chris Coyier (@chriscoyier)
在 CodePen 上。

直接链接 →

评论