如何使用CSS3 text-decoration-skip？

Question

在CSS Text Decoration Module Level 3中，有text-decoration-skip。它像这样做了魔术： 据称，这种表示是使用text-decoration-skip: ink;生成的。对于网页排版而言，如果下划线不再受到原生下划线的影响，那就太棒了。

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

中

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

Answer 1

正如有人在对这个问题的评论中所说，没有说明何时以及如何实施。

为了参考和澄清，the origin article of the picture you posted不是实际规范必然会是什么样的，而是Marcin Wichary在修补它时想到的草稿。所以不要犯这个错误，并认为该图像是CSS3输出的参考，因为它在最终实现时可能看起来完全不同。

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

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

这不仅有趣，因为这是一个过时的浏览器（由于一些CSS3规范当然没有这样做，但可能是因为它们有相同的基本想法），但也因为这可能是属性看起来像最终实施时。

Answer 2

尽管text-decoration-skip的级别已达到{em>“ 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>

请注意，还有更多{@ 3}或text-underline-offset之类的尖端文本装饰内容。