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

[atjn]

The official HTML spec calls for text decoration even if the browser does not support hover. I am not sure if that is a bug in the spec, or if there is a reason they chose to do it that way: https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3

@coliff if you are up for it, I think you should open an issue on the spec to figure out which solution is best: https://github.com/whatwg/html/issues

Edit: It just occured to me that the spec probably wants all browsers to display the title, even mobile ones. So that is why it never removes the decoration.

[jssteinberg]

I'm a fan of removing default styling of abbr[title] since it doesn't have across device functionality by default. If a site makes use of abbr[title] without defining the abbreviation visible in text, then it's normally implemented as a more usable functionality (i.e. styled and otherwise implemented more intuitively for the user). Don't know if I was able to make sense of my argumentation...

[atjn]

@jssteinberg If you want to remove the default styling, I think you should open a separate issue for that.

This specific issue is fixed with the removal of the reset in #86 - we no longer force the dotted underline in browsers that don't support it.

[jssteinberg]

Well I'm not sure, but my thought is that when a browser shows the dotted lines for abbr[title] is could give a false sense of universal functionality for content authors. And I feel it's the logical across browser normalization, but is it the best solution... I kind of like that it's removed from this lib as well, hah