pengzhanbo/caniuse-embed

Embed the CanIUse compatibility table in your site

CanIUse Embed

Embed up-to-date data from caniuse.com and mozilla's browser compat data.

Displays feature support data for multiple versions of the 10 major browsers.

Configurable, reliable, and fully responsive.

Document

See Documention for more details.

Usage

Include the following javascript file in your document.

<script type="module" src="https://caniuse-embed.vercel.app/embed.js"></script>

Paste this snippet where you want the embed to be displayed:

<p class="ciu-embed" data-feature="{feature}" data-past="2" data-future="3" data-meta="be6d"></p>

Example

Why ?

In the past, I often embedded CanIUse data in my technical documents using https://caniuse.bitsofco.de/. However, I found that when embedding it, it required loading @mdn/browser-compat-data (14MB) and caniuse/full-data.json (4MB), totaling over 18MB of data, and then needed to be parsed at runtime, resulting in less than 10kb of effective data.

This consumes too much traffic and seriously affects loading speed!

Therefore, I decided to redevelop using Astro and deploy to Vercel.

By using Astro SSR, a completely independent static page is generated for each feature without requesting any data, and each page is no more than 20kb in size!

At the same time, using Vercel's ISR capability, new pages are regenerated and cached as static files every 7 days to ensure data freshness without the need for redeployment.

Reddit

• mdn-browser-compat-data
• Fyrd/caniuse
• ireade/caniuse-embed

LICENSE

MIT

caniuse-embed's Issues

缺少部分必要的样式

.ciu-embed {
  iframe {
    display: block;
    width: 100%;
    border: none;
  }
}

不然 iframe 的宽度不回撑满 100%。