Chrome 64 からリンクの下線が途切れる：text-decoration-skip-ink プロパティについて

Chrome 64 から、リンクの下線の一部が途切れていることに気付いた。

• 参考：Chrome 64 から下線がおかしい

ちょうどこの記事が言っているとおりだった。text-decoration-skip-ink という CSS プロパティに対応するようになったようだ。

実際にサンプルを置いてみた。今のところ Chrome ぐらいしか対応していないようなので、Chrome で見てみてほしい。

• デモ：text-decoration-skip-ink
• コード：frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

このプロパティに auto を指定すると、text-decoration: underline の下線に文字が被らないようになる。文字の視認性は良くなるかもしれないが、リンクっぽさがなくなって見づらい気がする。

一方、これまでのように文字に下線が被る見た目は、text-decoration-skip-ink: none と指定すれば直せる。

…ブラウザのデフォルトスタイルを直してくれないかな…。

• 参考：text-decoration-skip-ink - CSS | MDN