Skip to content
GitLab
Open
Issue created by Administrator@rootContributor2 of 2 checklist items completed2/2 checklist items

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

Created by: coliff

Prerequisites

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.