Don't display dotted underline on `abbr[title]` tags to browsers that don't support hover

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Currently the Abbreviation styles show the dotted underline on all browsers, even mobile devices where it isn’t possible to hover over them to show the title.

I’d like to propose that the styles for abbr and .initialism be limited to only browsers/devices which support the hover:hover media query (namely iOS/iPadOS) by updating reboot.scss. I think it’d look something like this:

@media (hover: none) {
  abbr[title] {
    -webkit-text-decoration: none;
    text-decoration: none;
  }
}

@media (hover: hover) {
  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
    text-decoration-skip-ink: none;
  }
}

I’ve tested this on desktop Chrome 102, Edge 102 and it works exactly as expected there - the text is not underlined on iPadOS 15, iOS 15 and Android 7 (Chrome 102) where it isn’t possible to see the title - even with a pointing device (mouse) connected.

CodePen: https://codepen.io/coliff/pen/rNJbEoM

I used this to make a simplified page test: https://tests.christianoliff.com/title-style-hover/

Motivation and context

Currently the Abbreviation styles show the dotted underline on mobile devices which don’t support hover and it can be frustrating for users to see the dotted underlines on abbr text but have no way to interact with it. It’d be better if the text just appeared as normal text.

[patrickhlauke]

quickfire: don’t use @media (hover: ...). use @media (any-hover: ...)

https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/

[julien-deramond]

Yes you’re right, let’s not do it by default. If we still find it useful maybe we could mention this trick only in the documentation as an option or we could create a specific class (utility) for the users to use it only when it’s needed.