如何使用 CSS3 文本装饰跳过？答案

【问题标题】：How to use CSS3 text-decoration-skip?如何使用 CSS3 文本装饰跳过？
【发布时间】：2016-07-08 07:43:50
【问题描述】：

在 CSS 文本装饰模块 Level 3 中，有 text-decoration-skip。它有这样的魔力：据称，此表示是使用text-decoration-skip: ink; 生成的。对于网页排版，如果下划线不再被原生下划线击穿，那就太好了。

CSS-Tricks 有一个条目，最近MDN 也有一个条目。在那里，它说它“不在标准轨道上”。那正确吗？该属性列在W3C Candidate Recommendation。

如何使用text-decoration-skip？还是何时？是否有启用它的标志？

【问题讨论】：

我想没有人能回答你什么时候可以开始使用这个。
关于何时，我希望浏览器开发者或社区贡献者。关于如何，我假设有人可能已经找到了使用它的方法，即使它是例如实验性浏览器或 polyfill 或任何有形的东西。

标签： css typography text-decorations

【解决方案1】：

正如 cmets 中有人对这个问题所说，没有说何时以及如何实施。

作为参考和澄清，the origin article of the picture you posted 并不是实际规范的样子，而是 Marcin Wichary 在修改它时所考虑的草稿。所以不要犯错，把这张图片当作 CSS3 输出的参考，因为它在最终实现时可能看起来完全不同。

我也不能告诉你为什么 MDN 没有将它列为必须实现的功能，无论是开发团队决定不实现它，还是他们只是错过了它。但是，我可以告诉你，他们说 “此属性尚未在任何现代浏览器中实现”是正确的。

关于浏览器支持，请注意 CSS-Tricks 文章中的this comment，链接到以下图片：

这不仅有趣，因为它是一个相当过时的浏览器（当然不是因为某些 CSS3 规范，但可能是因为它们具有相同的基本思想），而且还因为这很可能是属性的样子最终实施时。

【讨论】：

感谢您的评价。我可能应该在 OP 中强调 “据称”，因为我从未说过图像显示实际输出。即使实现了，肯定会在浏览器之间呈现差异。然而，Netscape 3 是一个非常好的发现。 iOS 在一段时间内也会自动执行此操作。

【解决方案2】：

虽然text-decoration-skip 似乎已经“deferred 达到 4 级以允许进行重大更改”，但 Chrome 64 (2018-01) 和 Firefox 70 (2019-10) 实现了关闭相对（默认应用），因为“大多数其他浏览器都在支持更简单的text-decoration-skip-ink 属性”，它确实有效：

u{font-size:444%;}
u:first-of-type{ text-decoration-skip-ink: none; }
u:last-of-type{ text-decoration-skip-ink: auto; }

<u>parapsychologists</u>
<br>
<u>parapsychologists</u>

请注意，还有更多尖端的文本装饰，例如 text-underline-offset 或 text-decoration-thickness。

【讨论】：