Only show dotted underline on abbr[title] if @media (supports: hover) media query

[coliff]

Currently we have this:

abbr[title] {
  text-decoration: underline dotted;
}

This means that abbr tags have dotted underline even on iPhone and iPad where its impossible to see the title as browser doesn't support hover - even with a mouse connected.

I propose to change this to:

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

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

[sindresorhus]

Makes sense to be, but I will leave it open for a while to gather feedback.

It should use this media query: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover