何時避免文本剪輯速記屬性

我最近有關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中文網其他相關文章！