使用CSS文本修饰模块改善链接的外观

Links make the web work. They also have some of the strictest limits for styling in CSS due to security concerns. Designers and typographers have long complained that the default presentation of links can affect text legibility, reducing user interaction. The good news is that the CSS specification now directly addresses these issues, improving the look of links and their usability.

链接使网络工作。 由于安全方面的考虑，它们在CSS样式方面也有一些最严格的限制 。 长期以来，设计师和印刷商一直抱怨链接的默认表示形式会影响文本的可读性，从而减少用户交互。 好消息是CSS规范现在可以直接解决这些问题，从而改善链接的外观及其可用性。

文字装饰-跳过 (text–decoration–skip)

By default, text links on web pages appear blue and underlined. On most browsers the underlining strikes through descenders - letters that dip below the baseline, such as a lowercase j – making links that contain those letters more difficult to read. Historically there have been many answers to this problem, but the CSS specification now has its own direct solution: text–decoration–skip. The property has many possible values, but its intention is always the same: to determine where an underline will not be drawn for a link.

默认情况下，网页上的文本链接显示为蓝色并带有下划线。 在大多数浏览器中，下划线会通过下划线(下降到基线以下的字母，例如小写的j)引起，使包含这些字母的链接更难以阅读。 从历史上看，这个问题有很多答案，但是CSS规范现在有其自己的直接解决方案： text–decoration–skip 。 该属性具有许多可能的值 ，但其意图始终是相同的：确定将不为链接绘制下划线的位置。

The value of this property of primary interest to most designers and developers is ink, which addresses the problem mentioned above. Using this value for text–decoration–skip will cause link underlinking to skip descenders, producing the effect you see at the top of this article.

对于大多数设计人员和开发人员而言，此属性的主要价值在于ink ，它可以解决上述问题。 使用此值进行text–decoration–skip将导致链接欠链接跳过下链，从而产生您在本文顶部看到的效果。

a { text–decoration–skip: ink; }

The property is supported in Chrome 57+ and Safari 8+ (using a webkit prefix, as well as Opera 44 and higher. In Safari 10+ and Chrome 64+, text–decoration–skip: ink is on by default for all links, built into the browser's default styles.

Chrome 57+和Safari 8+(使用webkit前缀以及Opera 44和更高版本)支持该属性。在Safari 10+和Chrome 64+中， text–decoration–skip: ink 默认情况下，所有链接的 text–decoration–skip: ink 处于打开状态 ，内置到浏览器的默认样式中。

文字装饰色 (text–decoration–color)

Traditionally, a link’s underline color inherits the color associated with the a element. In the example below:

传统上，链接的下划线颜色会继承与a元素关联的颜色。 在下面的示例中：

a { color: green; }

…the text and the underline color of any link will be green; the two are inseparable.

…任何链接的文字和下划线颜色为绿色； 两者是密不可分的。

There are also many ways around this, most notably by turning off text-decoration for links by setting the property to none and substituting that effect with border-bottom, which can be set to any color. But CSS now allows the designer direct control over the color of the underline effect with text–decoration–color:

解决此问题的方法也有很多，最显着的是通过将属性设置为none并用border-bottom代替该效果来关闭链接的text-decoration ，后者可以设置为任何颜色。 但是CSS现在允许设计人员使用text–decoration–color直接控制下划线效果text–decoration–color ：

a { text–decoration–color: #ccc; }

Support for text–decoration–color is broader than text–decoration–skip: .text–decoration–color appears in Chrome 57+, Firefox 36+, Opera 44+, and Safari (with a -webkit prefix). Only Microsoft Edge currently lacks support.

支持text–decoration–color比更广泛的text–decoration–skip 。 text–decoration–color出现在Chrome 57 +，Firefox 36 +，Opera 44+和Safari(带有-webkit前缀)中。 当前只有Microsoft Edge缺乏支持。

结论 (Conclusion)

While they don’t yet have complete browser support, both text–decoration–color and text–decoration–skip are very useful, and should be considered for your site stylesheet. I expect text–decoration–skip: ink to become the default for most browsers in the coming years, but including it in your CSS now means you also reach browsers that supported the property before ink became the default behaviour.

尽管它们还没有完全的浏览器支持，但text–decoration–color和text–decoration–skip都是非常有用的，因此应在您的网站样式表中考虑。 我希望text–decoration–skip: ink将在未来几年成为大多数浏览器的默认设置，但是现在将其包含在CSS中意味着在ink成为默认行为之前，您也将获得支持该属性的浏览器。

翻译自: https://thenewcode.com/1168/Improve-the-Look-of-Links-with-the-CSS-Text-Decoration-Module