Can I Use This?
Check if that shiny new CSS feature is safe for your project's browsers
Container queries, :has(), nesting, subgrid — you want to use them but is it safe yet? This recipe checks your project's browser support targets and tells you exactly which modern CSS features you can use, which need fallbacks, and which to avoid.
INGREDIENTS
PROMPT
Create a skill called "Can I Use This?". When I provide my browser support targets (as a browserslist string like "> 0.5%, last 2 versions, not dead", or as Google Analytics browser data, or just a description like "modern browsers, must support Safari 16+"), generate a compatibility report for modern CSS features. Check: container queries, :has(), CSS nesting, subgrid, view transitions, scroll-driven animations, anchor positioning, CSS layers (@layer), color-mix(), relative color syntax, light-dark(), and any other CSS features from the last 2 years. For each feature, report: safe (all target browsers support it), needs fallback (partial support), or avoid (insufficient support). For "needs fallback" features, generate a @supports query with fallback code. Show support percentage based on my targets. Alert me when a feature I'm watching crosses from "needs fallback" to "safe" due to new browser releases.
How It Works
Give your Claw your browser support targets (or a browserslist config, or
your site's Google Analytics data), and it generates a personalized
compatibility report for modern CSS features. Know exactly what you can
ship without worry, what needs a fallback, and what's still too risky.
What You Get
- A feature-by-feature compatibility report for your specific browser targets
- Green/yellow/red status: safe to use, needs fallback, avoid
- For yellow features: ready-to-use @supports fallback code
- Support percentages based on your actual traffic (if GA connected) or global stats
- Alerts when features cross from yellow to green (newly safe to use)
- Coverage of: container queries, :has(), nesting, subgrid, view transitions, scroll-driven animations, anchor positioning, and more
Setup Steps
- Provide your browser targets: browserslist string, analytics data, or just tell your Claw your audience
- Your Claw generates the compatibility report
- Bookmark features you're interested in for ongoing monitoring
- Get alerts when browser support changes
Tips
- Connect Google Analytics for the most accurate report — global stats don't reflect your audience
- The @supports fallback code is ready to copy-paste into your project
- Run this at the start of every project to know your CSS boundaries
- Safari is usually the limiting factor — the report makes this explicit
- Pair with Safari Wrangler for a complete browser compatibility workflow