https://github.com/whtsky/caniuseif
https://github.com/whtsky/caniuseif
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/whtsky/caniuseif
- Owner: whtsky
- Created: 2025-06-05T11:19:54.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-09-11T14:52:10.000Z (5 months ago)
- Last Synced: 2025-09-11T17:33:49.754Z (5 months ago)
- Language: TypeScript
- Homepage: http://caniuseif.whtsky.me
- Size: 150 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CanIUseIf
Ever found yourself wondering: "If my users' browsers can handle Feature X (which I'm already using), can they also handle shiny new Feature Y?" This tool helps answer that!
It's a quick way to see if a new web feature you're eyeing is likely to work for the folks whose browsers already support a feature you're currently relying on. Super handy for planning how to add new goodies to your site without breaking things for people.
## How's it do that (The Gist)
You pick two web features:
* One you're **currently using**.
* One you're **thinking about using**.
CanIUseIf digs into the browser support data.
It then tells you how well the browsers that support your *current* feature also support the *new* one. You'll get a clear "Looks Good!", "It's a Maybe...", or "Probably Not..." along with some numbers.
Cool trick: You can share your feature comparisons with a simple URL! For example: [https://caniuseif.whtsky.me/?base=declarative-shadow-dom&target=webp](https://caniuseif.whtsky.me/?base=declarative-shadow-dom&target=webp)
## Tech Stack (for the curious)
* Frontend: React, Vite, TypeScript
* Styling: Tailwind CSS
* Browser Data: `caniuse-lite`
* Icons: Lucide React
## Local dev
```bash
npm install
npm run build-compat-data
npm run dev
# To build for production:
# npm run build
```