何时避免文本剪辑速记属性

我最近有关Chrome CSS强调问题的文章突出了text-decoration-thickness和text-underline-offset ，功能强大的，广泛支持的CSS属性，可提供更精细的下划线控制。

让我们说明text-decoration-thickness 。 Ubuntu的默认下划线非常厚。我们可以完善它：

 ：任何链接{
  文本命中率：0.08em;
}

注意：我使用:any-link而不是<a></a>仅针对实际的超链接（具有href属性的超链接）。浏览器的用户代理样式表也喜欢:any-link 。

悬停强调：微妙的陷阱

许多网站（例如Google Search和Wikipedia）都采用悬停发光，而Underlines仅出现在Mouseover上。尽管通常不适合文本链接，但此方法适合间隔链接（导航，页脚）。这是一个标题示例：

标题：任何链接{
  文本介绍：无；
}

标题：任何链接：悬停{
  文本描述：下划线；
}

但是，悬停的强调将恢复为默认厚度，而忽略了我们先前的text-decoration-thickness设置。为什么？

该问题源于text-decoration是速记属性，而text-decoration-thickness是长期的。将text-decoration为none或underline重置其他文本装饰组件（厚度，样式，颜色）。 CSS文本装饰模块指定以下方式：省略值还原为其初始状态。

浏览器DevTools确认了这一点：检查超链接，扩展text-decoration属性以查看组件值。

为了保留悬停的自定义厚度，我们需要调整。存在几种解决方案：

• 在:hover状态中重新销售text-decoration-thickness 。
• 直接将厚度直接纳入text-decoration速记。
• 利用text-decoration-line而不是text-decoration 。

最佳text-decoration策略

只需在:hover状态下重复text-decoration-thickness ，但它是多余的：

 / *选项A */
标题：任何链接{
  文本介绍：无；
}

标题：任何链接：悬停{
  文本描述：下划线；
  文本命中率：0.08em;
}

理想情况下，利用text-decoration的速记功能：

 / *选项B */
标题：任何链接{
  文本介绍：无；
}

标题：任何链接：悬停{
  文本 - 任务：下划线0.08em;
}

注意：这种速记方法相对较新；较旧的CSS版本缺乏此功能。 Safari的Webkit引擎仍然使用前缀-webkit-text-decoration ，并且缺乏厚度支持（请参阅Webkit Bug 230083）。此渲染选项B Safari不兼容。

最佳方法使用text-decoration-line ，与速记旁边介绍：

 / *选项C */
标题：任何链接{
  文本统一线：无；
}

标题：任何链接：悬停{
  文本统一线：下划线；
}

这仅修改line分量，保留先前设置的厚度。这是最坚固，最跨浏览器兼容的解决方案。

速记财产考虑

请记住：速记属性（例如text-decoration ， background ）重置默认值的值。这解释了为什么background-repeat: no-repeat随后的background: url(flower.jpg)声明。有关更多详细信息，请参见“意外CSS重置”。

以上是何时避免文本剪辑速记属性的详细内容。更多信息请关注PHP中文网其他相关文章！