Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

概要

text-decoration-skip-ink は文字のディセンダー(g, p, y など下に突き出る部分)と下線が重なる部分で、下線を自動的に中断します。これによりテキストの読みやすさが大幅に向上します。ほとんどのブラウザでデフォルトが auto に設定されており、標準的な欧文テキストでは自動的に機能します。

対応ブラウザ

デスクトップ

Chrome 64+
Edge 79+
Safari 15.4+
Firefox 70+

モバイル

Chrome Android 64+
Safari iOS 15.4+
Firefox Android 79+

基本構文

CSS
a {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

実務での使いどころ

  • 読みやすい下線リンク

    リンクの下線がグリフのディセンダーと重ならないようにし、テキストの可読性を向上させます。

注意点

  • CJK文字ではデフォルトの auto でスキップが行われない場合があり、all を明示的に指定する必要があるかもしれません。

アクセシビリティ

  • 下線のインクスキップはテキストの読みやすさを向上させ、特にディスレクシアのあるユーザーに有益です。