only do selection grouping if the browser supports :has

Author: shakyShane

special-pages/pages/history/app/components/Item.module.css

@@ -66,28 +66,31 @@
     }
 }
 
-/**
- * The following code handles handles the multi-row selections. It's responsible
- * for ensuring only the first and last elements in a selection have rounded corners.
- */
-[data-is-selected='true'] .row {
-    border-radius: 0;
-}
+@supports selector(:has(*)) {
+    /**
+     * The following code handles handles the multi-row selections. It's responsible
+     * for ensuring only the first and last elements in a selection have rounded corners.
+     */
+    [data-is-selected='true'] .row {
+        border-radius: 0;
+    }
 
-[data-is-selected='true']:first-of-type .row,
-[data-is-selected='true']:not([data-is-selected='true'] + [data-is-selected='true']) .row
-{
-    border-top-left-radius: var(--row-radius);
-    border-top-right-radius: var(--row-radius);
-}
+    [data-is-selected='true']:first-of-type .row,
+    [data-is-selected='true']:not([data-is-selected='true'] + [data-is-selected='true']) .row
+    {
+        border-top-left-radius: var(--row-radius);
+        border-top-right-radius: var(--row-radius);
+    }
 
-[data-is-selected='true']:last-of-type .row,
-[data-is-selected='true']:not(:has(+ [data-is-selected='true'])) .row
-{
-    border-bottom-left-radius: var(--row-radius);
-    border-bottom-right-radius: var(--row-radius);
+    [data-is-selected='true']:last-of-type .row,
+    [data-is-selected='true']:not(:has(+ [data-is-selected='true'])) .row
+    {
+        border-bottom-left-radius: var(--row-radius);
+        border-bottom-right-radius: var(--row-radius);
+    }
 }
 
+
 .favicon {
     flex-shrink: 0;
     min-width: 0;