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.
See Documention for more details.
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>
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.
MIT