https://github.com/pengzhanbo/caniuse-embed
Embed the CanIUse compatibility table in your site
https://github.com/pengzhanbo/caniuse-embed
astro caniuse caniuse-embed ssr
Last synced: 3 months ago
JSON representation
Embed the CanIUse compatibility table in your site
- Host: GitHub
- URL: https://github.com/pengzhanbo/caniuse-embed
- Owner: pengzhanbo
- License: mit
- Created: 2024-04-25T14:43:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-25T19:16:04.000Z (6 months ago)
- Last Synced: 2025-02-28T12:21:09.782Z (4 months ago)
- Topics: astro, caniuse, caniuse-embed, ssr
- Language: TypeScript
- Homepage: https://caniuse-embed.vercel.app
- Size: 1.26 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - pengzhanbo/caniuse-embed - Embed the CanIUse compatibility table in your site (TypeScript)
- awesome - pengzhanbo/caniuse-embed - Embed the CanIUse compatibility table in your site (TypeScript)
README
# CanIUse Embed
Embed up-to-date data from [caniuse.com](https://caniuse.com/) and
[mozilla's browser compat data](https://github.com/mdn/browser-compat-data).
Displays feature support data for multiple versions of the 10 major browsers.
Configurable, reliable, and fully responsive.
## Document
See [Documention](https://caniuse-embed.vercel.app/) for more details.
## Usage
Include the following javascript file in your document.
```html
```
Paste this snippet where you want the embed to be displayed:
```html
```
## Example
## Why ?
In the past, I often embedded CanIUse data in my technical documents using [https://caniuse.bitsofco.de/](https://caniuse.bitsofco.de/). However, I found that when embedding it, it required loading [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) (14MB) and [caniuse/full-data.json](https://github.com/Fyrd/caniuse) (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](https://astro.build/) and deploy to [Vercel](https://vercel.com/).
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](https://github.com/mdn/browser-compat-data)
- [Fyrd/caniuse](https://github.com/Fyrd/caniuse)
- [ireade/caniuse-embed](https://github.com/ireade/caniuse-embed)
## LICENSE
MIT