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:
const supportsContainerQueries = "container" in document.documentElement.style;
if (!supportsContainerQueries) {
import("container-query-polyfill");
}
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:
<script src="https://unpkg.com/container-query-polyfill/cqfill.iife.min.js"></script>
The polyfull should work in all modern browsers. Chrome 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!)
- Only a subset of queries are supported for now. Specifically, only
min-width
,max-width
,min-height
andmax-height
are supported. Additionally, the polyfill does supportand
,or
ornot
. - Container Queries will not work when nested inside a Media Query. For now, the polyfill only supports top-level CQs.
- Container query thresholds can only be specified using pixels.
- Due to the nature of CORS, the polyfill only attempts to handle same-origin and inline stylesheets. Cross-origin stylesheets are ignored, regardless of CORS headers.
- Don’t do weird interspersed comments, okay? Like
@container /* here’s a comment! */ (min-width: 1px) { ... }
. Just don’t.
This project uses esbuild to bundle the project, which is automatically installed via npm. To build the polyfill, run:
npm run build
To run the tests, run
npm run serve
and open your browser at http://127.0.0.1:3474/tests
.
License Apache-2.0