Don't display dotted underline on `abbr[title]` tags to browsers that don't support hover
Created by: coliff
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.