我最近有关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中文网其他相关文章!