Browse Source

WIP - simplify caniuse

caniuse
Marcos Cáceres 6 months ago
parent
commit
dfbf47482e
  1. 46
      src/core/caniuse.js
  2. 30
      src/styles/caniuse.css.js

46
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]"}`;

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

Loading…
Cancel
Save