GoogleChromeLabs / container-query-polyfill Public
A tiny polyfill for CSS Container Queries, weighing about 1.6kB brotli’d. It transpiles CSS code on the client-side and implements Container Query functionality using ResizeObserver and MutationObserver.
Ideally, the polyfill is only loaded if the browser doesn’t support Container Queries natively. In a modern setup with a bundler that uses ES modules, the following snippet should work:
If you are in a legacy setup (or just want to prototype quickly), there’s also an IIFE version that you can include using a <script> tag:
The polyfill relies on ResizeObserver, MutationObserver and :is(). Therefore, it should work in all modern browsers, specifically Chrome/Edge 88+, Firefox 78+ and Safari 14+.
My aim is to make the polyfill work correctly for the majority of use-cases, but cut corners where possible to keep the polyfill simple(-ish), small and efficient. The limitations arising from these tradeoffs are listed below.
(These decisions can be revisited if they pose a significant hurdle and there is a good way to implement them. Please open an issue!)
