*Please note that this polyfill is now in maintenance mode, as of Nov, 2022. We are not planning to add more features or enhancements.* ____________________________
Please note that this polyfill is now in maintenance mode, as of Nov, 2022. We are not planning to add more features or enhancements.
____________________________
A small (9 kB compressed) polyfill for CSS Container Queries using ResizeObserver and MutationObserver supporting the full @container query syntax:
- Discrete queries (width: 300 and min-width: 300px)
- Range queries (200px < width < 400px and width < 400px)
- Container relative length units (cqw, cqh, cqi, cqb, cqmin, and cqmax) in properties and keyframes
- Firefox 69+
- Chrome 79+
- Edge 79+
- Safari 13.4+
``bash`
npm install --save container-query-polyfill
Alternatively, you can use it directly from a CDN:
`js`
For the best user experience, it's recommended that you initially only use the polyfill for content below-the-fold and use @supports queries to temporarily replace it with a loading indicator until the polyfill is ready to display it:
`css
@supports not (container-type: inline-size) {
.container,
footer {
display: none;
}
.loader {
display: flex;
}
}
`
You can view a more complete demo here. On sufficiently fast networks and devices, or devices that natively support Container Queries, this loading indicator will never be displayed.
> Note
> Keep in mind that this technique effectively limits impact on FID and CLS, potentially at the expense of LCP. You may see regressions in the latter as a result, particularly on lower end devices or in poor network conditions.
- CSS first: The polyfill currently only supports