CSS text-decoration-skip

Looking at twitter this morning I saw a tweet by Monica Dinculescu‏:

Whatttttt how did I miss that `text-decoration-skip: ink` works in Chrome now? 🎉 Monica Dinculescu

Is this right?

Reading further down this twitter thread:

🚨 Oh no, I've led you to dragons.
Previous tweet was a bit wrong. So:
- text-decoration-skip: ink is deprecated
- text-decoration-skip-ink is the new thing, and works in Beta/Stable
(🙌 to @ebidel for sherlocking this with me) Monica Dinculescu

It appears that this has been deprecated.

So I also looked into this

Can I Use

Can I use does not, yet, have an entry for text-decoration-skip-ink¹ but does have an entry for text-decoration-skip².

It states that text-decoration-skip:ink; and text-decoration-skip:object; works in Chrome 61+ and Chrome for Android 62.

MDN (Mozilla Developer Network)

MDN has an entry for both text-decoration-skip-ink and text-decoration-skip .

text-decoration-skip-ink³

This has two values available:

• text-decoration-skip-ink: none; - no effect
• text-decoration-skip-ink: auto; - the underline will skip any characters that break the underline

Example

Support⁴

MDN says this is currently supports (as of 04/01/2018):

• Desktop
  • Chrome 64
  • Opera 50
• Mobile
  • Android webview 64
  • Chrome for Android 64
  • Opera for Android 50

text-decoration-skip⁵

This has seven values available, ink not being one:

• none - Nothing is skipped, i.e. text decoration is drawn for all text content and across atomic inline-level boxes.
• objects - The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.
• spaces - All spacing is skipped, i.e. all Unicode white space characters and all word separators, plus any adjacent letter-spacing or word-spacing .
• leading-spaces - The same as spaces , except that only leading spaces are skipped.
• trailing-spaces - The same as spaces , except that only trailing spaces are skipped.
• edges - The start and end of the text decoration is placed slightly inward (e.g. by half of the line thickness) from the content edge of the decorating box. E.g. two underlined elements side-by-side do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.)
• box-decoration - The text decoration is skipped over the box's margin, border and padding areas. This only has an effect on decorations imposed by an ancestor; a decorating box never draws over its own box decoration.

Support⁶

MDN says this is currently supports (as of 04/01/2018):

• Desktop
  • Chrome 57
  • Opera 44
  • Safari 8 with webkit- prefix
• Mobile
  • Android webview 57
  • Chrome for Android 57
  • Opera for Android 44
  • Safari 8 with webkit- prefix

Footnotes

¹ Can I Use text-decoration-skip-ink

² Can I Use text-decoration-skip

³ MDN text-decoration-skip-ink

⁴ MDN text-decoration-skip-ink Browser support

⁵ MDN text-decoration-skip

⁶ MDN text-decoration-skip Browser support