Limit `abbr[title]` style to browsers that support hover

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 8c390c6e0e27fec49ff87933698783a6431aa4fa..a14a0a15a71fca2dc71106f2c2705dbf61ef0ffa 100644 (file)
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "29.5 kB"
+      "maxSize": "29.75 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 8ac790399feed879ab78bd2515347c1191a9eba7..6a3bc62dd0b458252963b3737be221718e972a3c 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -133,15 +133,23 @@ p {
 
 
 // Abbreviations
-//
-// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
-// 2. Add explicit cursor to indicate changed behavior.
-// 3. Prevent the text-decoration to be skipped.
-
-abbr[title] {
-  text-decoration: underline dotted; // 1
-  cursor: help; // 2
-  text-decoration-skip-ink: none; // 3
+
+@media (hover: none) {
+  abbr[title] {
+    text-decoration: none;
+  }
+}
+
+@media (hover: hover) {
+  // 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
+  // 2. Add explicit cursor to indicate changed behavior.
+  // 3. Prevent the text-decoration to be skipped.
+
+  abbr[title] {
+    text-decoration: underline dotted; // 1
+    cursor: help; // 2
+    text-decoration-skip-ink: none; // 3
+  }
 }