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

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;
  }
}