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 Documentation 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 caniuse to be displayed:
<p class="ciu-embed" data-feature="{feature}" data-past="2" data-future="3"></p>Or use the following snippet for baseline data:
<p class="ciu-baseline-embed" data-feature="{feature}"></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!
Meanwhile, using Github Actions to trigger Vercel's deployment hooks every weekend, regenerating new pages and caching them as static files every 7 days to ensure data timeliness.
MIT