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.

The proposal points to reboot.scss and the existing Abbreviation styles documentation; start by locating the abbr and .initialism rules there. Check how the hover media query should govern the current underline and cursor behavior, then verify the result on hover-capable and non-hover devices described in the issue.