fix(core/caniuse): use dl markup and CSS Grid layout

src/core/caniuse.js

@@ -170,21 +170,17 @@ async function processJson(json, { feature }) {
   ]);
   const toBrowserCell = browserCellRenderer(feature);
   results.reduce(toBrowserCell, groups);
-  const out = [...groups]
+  const entries = [...groups]
     .filter(([, arr]) => arr.length)
     .map(
       ([key, arr]) =>
         html`<div class="caniuse-group">
-          <div class="caniuse-browsers">${arr}</div>
-          <div class="caniuse-type"><span>${key}</div>
+          <dt class="caniuse-type">${key}</dt>
+          <dd class="caniuse-browsers">${arr}</dd>
         </div>`
     );
-  out.push(
-    html`<a class="caniuse-cell" href="https://caniuse.com/${feature}"
-      >More info</a
-    >`
-  );
-  return out;
+  return html`<dl class="caniuse-groups">${entries}</dl>
+    <a href="https://caniuse.com/${feature}">More info</a>`;
 }
 
 /**

src/styles/caniuse.css.js

@@ -7,41 +7,39 @@ export default css`
 
 .caniuse-stats {
   display: flex;
-  column-gap: 2em;
+  flex-direction: column;
+  gap: 0.5em;
 }
 
-.caniuse-group {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: flex-end;
-  flex-basis: auto;
+.caniuse-groups {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 1fr));
+  gap: 0.5em;
+  margin: 0;
+  padding: 0;
 }
 
-.caniuse-browsers {
+.caniuse-group {
   display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin-top: .2em;
-  column-gap: .4em;
-  border-bottom: 1px solid #ccc;
-  row-gap: .4em;
-  padding-bottom: .4cm;
+  flex-direction: column;
 }
 
 .caniuse-type {
-  align-self: center;
-  border-top: none;
   text-transform: capitalize;
-  font-size: .8em;
-  margin-top: -.8em;
+  font-size: 0.8em;
   font-weight: bold;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 0.2em;
 }
 
-.caniuse-type span {
-  background-color: var(--bg, white);
-  padding: 0 0.4em;
+.caniuse-browsers {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  column-gap: 0.4em;
+  row-gap: 0.4em;
+  margin: 0;
+  padding: 0.4em 0;
 }
 
 /* a browser version */
@@ -52,7 +50,7 @@ export default css`
   display: flex;
   font-size: 90%;
   min-width: 1.5cm;
-  padding: .3rem;
+  padding: 0.3rem;
   justify-content: space-evenly;
   --supported: #2a8436dd;
   --no-support: #c44230dd;
@@ -72,15 +70,15 @@ export default css`
 }
 
 img.caniuse-browser {
-  filter: drop-shadow(0px 0px .1cm #666666);
+  filter: drop-shadow(0px 0px 0.1cm #666666);
   background: transparent;
 }
 
 .caniuse-cell span.browser-version {
-  margin-left: 0.4em;
+  margin-inline-start: 0.4em;
   text-shadow: 0 0 0.1em #fff;
   font-weight: 100;
-  font-size: .9em;
+  font-size: 0.9em;
 }
 
 .caniuse-stats a[href] {
@@ -94,7 +92,7 @@ img.caniuse-browser {
 }
 
 /* no support, disabled by default */
-.caniuse-cell:is(.n,.d) {
+.caniuse-cell:is(.n, .d) {
   --caniuse-angle: 45deg;
   --caniuse-bg: var(--no-support);
   --caniuse-bg-alt: var(--no-support-alt);
@@ -110,7 +108,7 @@ img.caniuse-browser {
 
 /* not supported by default / partial support etc
 see https://github.com/Fyrd/caniuse/blob/master/CONTRIBUTING.md for stats */
-.caniuse-cell:is(.a,.x,.p) {
+.caniuse-cell:is(.a, .x, .p) {
   --caniuse-angle: 90deg;
   --caniuse-bg: var(--partial);
   --caniuse-bg-alt: var(--partial-alt);
@@ -128,7 +126,7 @@ see https://github.com/Fyrd/caniuse/blob/master/CONTRIBUTING.md for stats */
     padding: 0.5em;
   }
 
-  .caniuse-cell:is(.a,.d,.p,.x,.u)::before {
+  .caniuse-cell:is(.a, .d, .p, .x, .u)::before {
     content: "⚠️";
     padding: 0.5em;
   }

tests/spec/core/caniuse-spec.js

@@ -83,7 +83,7 @@ describe("Core — Can I Use", () => {
     const doc = await makeRSDoc(ops);
     const stats = doc.querySelector(".caniuse-stats");
     const cells = stats.querySelectorAll(".caniuse-cell");
-    expect(cells).toHaveSize(4);
+    expect(cells).toHaveSize(3);
 
     // Check a cell
     const [cell] = cells;
@@ -123,7 +123,7 @@ describe("Core — Can I Use", () => {
     );
 
     // More info link
-    const moreInfoLink = cells.item(3);
+    const moreInfoLink = stats.querySelector("a[href*='caniuse.com']");
     expect(moreInfoLink.href).toBe("https://caniuse.com/FEATURE");
     expect(moreInfoLink.textContent.trim()).toBe("More info");
   });
@@ -224,11 +224,7 @@ describe("Core — Can I Use", () => {
     expect(desktopBrowsers).toHaveSize(1);
     const [firefox] = desktopBrowsers;
     expect(firefox.src).toContain("firefox.svg");
-    expect(desktop.querySelector(".caniuse-type > span").textContent).toBe(
-      "desktop"
-    );
-    expect(mobile.querySelector(".caniuse-type > span").textContent).toBe(
-      "mobile"
-    );
+    expect(desktop.querySelector(".caniuse-type").textContent).toBe("desktop");
+    expect(mobile.querySelector(".caniuse-type").textContent).toBe("mobile");
   });
 });