v148 · CSS · Progressive Enhancement
Polyfill Loader
Use @supports at-rule(@container), @supports at-rule(@layer), and friends to conditionally load polyfills only for the CSS features this browser is missing. Generate a ready-to-paste loader script.
Feature Registry
| CSS Feature | At-rule / syntax | Browser support | @supports probe | Polyfill action |
|---|
Use the custom probe or missing-support toggle to test fallback branches before generating a loader.
Generated Loader Script
// Click "Generate loader script" above…
Live CSS Tester
Edit the CSS below to try @supports at-rule() queries. The preview shows what this browser renders.
Preview
@container support: check the border colour.
Green = supported. Red = not supported.
Green = supported. Red = not supported.
Styles from editor applied above in real time.
Loader Console
// Loader log will appear here…
how it works
Each feature check uses CSS.supports('at-rule(@name)') — the JavaScript equivalent of the CSS @supports at-rule() function. When the probe returns false, the loader injects a <script> tag pointing to the relevant polyfill CDN URL. Polyfills are loaded only once (idempotent) and in dependency order where required.
// CSS version:
@supports at-rule(@container) { /* native styles */ }
@supports not at-rule(@container) { /* fallback styles */ }
// JS equivalent (what the loader uses):
if (!CSS.supports('at-rule(@container)')) {
loadScript('https://cdn.example/container-queries-polyfill.js');
}