bootstrap 不要在不支持悬停的浏览器上为abbr[title]标签显示虚线下划线,

fcipmucu 于 4个月前发布在 Bootstrap

关注(0)|答案(6)|浏览(98)

前提条件

我拥有 searched,用于处理重复或已关闭的功能请求
我已阅读了 contributing guidelines

建议

目前，缩写样式在所有浏览器上都显示虚线下划线，即使在移动设备上也无法悬停以显示标题。我建议将 abbr 和 .initialism 的样式限制在仅支持 hover:hover media query(即 iOS/iPadOS)的浏览器/设备上，通过更新 reboot.scss 来实现。我认为它看起来应该像这样：

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

我在桌面 Chrome 102、Edge 102 上进行了测试，效果完全符合预期 - 在 iPadOS 15、iOS 15 和 Android 7(Chrome 102)上，文本没有下划线，因为无法看到标题 - 即使连接了指针设备(鼠标)。
CodePen:
https://codepen.io/coliff/pen/rNJbEoM
我使用这个制作了一个简化的页面测试：
https://tests.christianoliff.com/title-style-hover/

动机和背景

目前，缩写样式在不支持悬停的移动设备上显示虚线下划线，这可能会让用户感到沮丧，因为他们可以看到带有虚线下划线的缩写文本，但却无法与之互动。如果文本只是正常显示，那就更好了。

Bootstrap

来源：https://github.com/twbs/bootstrap/issues/36607

6条答案

按热度按时间

klh5stk11#

我的两分钱：使用 @media (hover: hover) 重置这些样式将减少潜在的副作用。除此之外，为什么不呢？我几乎确定我们在这里和那里都采用这种渐进增强的方法。

赞(0）回复(0）举报 4个月前

crcmnpdw2#

更新：我进行了一些进一步的测试，并在Android上成功地使其正常工作！👍
(基本上我们想要在@media (hover: none)上设置text-decoration: none
我已经更新了我的原始帖子以反映这些更改。

赞(0）回复(0）举报 4个月前

jtoj6r0c3#

移除文本装饰符 @media (hover: none) 似乎是个好主意，以避免让用户感到沮丧。也许我们可以通过显示完整的标题来增强他们的体验(假设这不会引起国际化方面的问题):

@media (hover: none) {
  abbr[title]:after
  {
   content: " (" attr(title) ")";
  }
}

赞(0）回复(0）举报 4个月前

k97glaaz4#

heya @julien-deramond -这是一个有趣的想法，我认为在某些情况下会很有用，但我认为在某些情况下也可能会引起问题。例如，在小手机屏幕上，每次示例后看到较长的缩写展开可能会令人烦恼，而且它可能会破坏格式。
我制作了一个Stackblitz演示，从Bootstrap下拉菜单文档中提取了一段文字进行测试：
https://stackblitz.com/edit/js-4tafmg?file=index.html,style.css
所以在iPhone屏幕上看起来有点杂乱无章：-\