WIP - simplify caniuse

src/core/caniuse.js

@@ -55,6 +55,10 @@ export function prepare(conf) {
   };
 }
 
+function logo(browser) {
+  return `https://cdnjs.cloudflare.com/ajax/libs/browser-logos/71.0.0/${browser}/${browser}.svg`;
+}
+
 export async function run(conf) {
   const options = conf.caniuse;
   if (!options?.feature) return;
@@ -65,7 +69,47 @@ export async function run(conf) {
   const contentPromise = (async () => {
     try {
       const stats = await conf.state[name].fetchPromise;
-      return html`${{ html: stats }}`;
+      const result = html`${{ html: stats }}`;
+      const frag = document.createDocumentFragment();
+      frag.append(...result.childNodes);
+      for (const button of frag.querySelectorAll("button")) {
+        const img = document.createElement("img");
+        img.alt = button.textContent;
+        switch (true) {
+          case button.textContent.startsWith("Chrome"):
+            img.src = logo("chrome");
+            break;
+          case button.textContent.startsWith("Edge"):
+            img.src = logo("edge");
+            break;
+          case button.textContent.startsWith("Firefox"):
+            img.src = logo("firefox");
+            break;
+          case button.textContent.startsWith("Safari"):
+            img.src = logo("safari");
+            break;
+        }
+        button.textContent = "";
+        img.width = 24;
+        img.height = 24;
+        const li = button.closest("div").querySelector("li");
+        const version = button.classList.contains("n")
+          ? "⛔️"
+          : li.textContent.split("–")[0];
+
+        const ariaLabel =
+          version === "⛔️"
+            ? `${button.textContent} is not supported in this browser.`
+            : `${button.textContent} is supported since version ${version}.`;
+        img.title = button.textContent;
+        button.append(
+          html`<span aria-label="${ariaLabel}" class="browser-version"
+            >${version}</span
+          >`
+        );
+        button.prepend(img);
+      }
+      return frag;
     } catch (err) {
       const msg = `Couldn't find feature "${options.feature}" on caniuse.com.`;
       const hint = docLink`Please check the feature key on [caniuse.com](https://caniuse.com) and update ${"[caniuse]"}`;

src/styles/caniuse.css.js

@@ -5,15 +5,21 @@ const css = String.raw;
 // prettier-ignore
 export default css`
 .caniuse-stats {
+  margin-top: .3rem;
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: baseline;
+  width: 75%;
 }
 
 button.caniuse-cell {
-  margin: 1px 1px 0 0;
+  margin: .1em 0;
   border: none;
+  border-radius: 1em;
+  padding: .2em;
+  display: flex;
+  justify-content: space-evenly;
 }
 
 .caniuse-browser {
@@ -59,21 +65,21 @@ button.caniuse-cell {
 
 /* a browser version */
 .caniuse-cell {
+  padding: .3rem .3rem;
   display: flex;
   font-size: 90%;
   height: 0.8cm;
   margin-right: 1px;
   margin-top: 0;
-  min-width: 3cm;
+  min-width: 2cm;
   overflow: visible;
-  justify-content: center;
   align-items: center;
 
-  --supported: #2a8436;
-  --no-support: #c44230;
-  --no-support-alt: #b43b2b;
-  --partial: #807301;
-  --partial-alt: #746c00;
+  --supported: #2a8436dd;
+  --no-support: #c44230dd;
+  --no-support-alt: #b43b2bdd;
+  --partial: #807301dd;
+  --partial-alt: #746c00dd;
 
   color: #fff;
   background: repeating-linear-gradient(
@@ -86,6 +92,12 @@ button.caniuse-cell {
   );
 }
 
+.caniuse-cell span.browser-version {
+  margin-left: 0.4em;
+  text-shadow: 0 0 0.1em #fff;
+}
+
+
 li.caniuse-cell {
   margin-bottom: 1px;
 }