{"id":13496538,"url":"https://github.com/GoogleChromeLabs/container-query-polyfill","last_synced_at":"2025-03-28T18:32:07.899Z","repository":{"id":39702351,"uuid":"427388009","full_name":"GoogleChromeLabs/container-query-polyfill","owner":"GoogleChromeLabs","description":"A polyfill for CSS Container Queries","archived":false,"fork":false,"pushed_at":"2024-09-30T18:05:33.000Z","size":460,"stargazers_count":1142,"open_issues_count":19,"forks_count":50,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-03-26T22:06:40.163Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://npm.im/container-query-polyfill","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GoogleChromeLabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-12T14:27:56.000Z","updated_at":"2025-03-20T06:52:33.000Z","dependencies_parsed_at":"2024-01-13T18:55:24.104Z","dependency_job_id":"aab4cdfe-4156-4ff9-a165-3cdfef6a8676","html_url":"https://github.com/GoogleChromeLabs/container-query-polyfill","commit_stats":{"total_commits":96,"total_committers":11,"mean_commits":8.727272727272727,"dds":"0.32291666666666663","last_synced_commit":"f6831ec85e8db047218f8f8807667f1429aba457"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcontainer-query-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcontainer-query-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcontainer-query-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcontainer-query-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GoogleChromeLabs","download_url":"https://codeload.github.com/GoogleChromeLabs/container-query-polyfill/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246080812,"owners_count":20720597,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:01:51.101Z","updated_at":"2025-03-28T18:32:07.870Z","avatar_url":"https://github.com/GoogleChromeLabs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Polyfill","Polyfills"],"sub_categories":["2017"],"readme":"# Container Query Polyfill\n\n*Please note that this polyfill is now in maintenance mode, as of Nov, 2022. We are not planning to add more features or enhancements.*\n____________________________\n\nA small (9 kB compressed) polyfill for CSS Container Queries using [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) and [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) supporting the full [`@container`](https://drafts.csswg.org/css-contain-3/) query syntax:\n\n- Discrete queries (`width: 300` and `min-width: 300px`)\n- Range queries (`200px \u003c width \u003c 400px` and `width \u003c 400px`)\n- Container relative length units (`cqw`, `cqh`, `cqi`, `cqb`, `cqmin`, and `cqmax`) in properties and keyframes\n\n## Browser Support\n\n- Firefox 69+\n- Chrome 79+\n- Edge 79+\n- Safari 13.4+\n\n## Getting Started\n\n### Installation\n\n```bash\nnpm install --save container-query-polyfill\n```\n\nAlternatively, you can use it directly from a CDN:\n\n```js\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js\"\u003e\u003c/script\u003e\n```\n\nFor 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:\n\n```css\n@supports not (container-type: inline-size) {\n  .container,\n  footer {\n    display: none;\n  }\n\n  .loader {\n    display: flex;\n  }\n}\n```\n\nYou can view a more complete demo [here](https://codesandbox.io/s/smoosh-glitter-m2ub4w?file=/index.html). On sufficiently fast networks and devices, or devices that natively support Container Queries, this loading indicator will never be displayed.\n\n\u003e **Note**\n\u003e 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.\n\n## Limitations\n\n- **CSS first**: The polyfill currently only supports `\u003cstyle\u003e` and same-origin `\u003clink\u003e` elements. Inline styles via the `style` attribute or CSSOM methods are not polyfilled. Likewise, JavaScript APIs like `CSSContainerRule` are not polyfilled, and APIs like `CSS.supports()` are not monkey-patched.\n- **Best effort**: Style changes that do not lead to observable DOM or layout mutations (e.g. changing `font-size` in a container without content) may not be detected, or may be detected a frame late on some browsers. [Complex sibling CSS selectors](https://github.com/GoogleChromeLabs/container-query-polyfill/issues/56) aren't supported.\n- Currently, there is no support for Shadow DOM, or functions like `calc(...)` in container conditions. Your contribution would be welcome!\n\n## Supporting browsers without `:where()`\n\nThe polyfill uses the CSS [`:where()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) pseudo-class to avoid changing the specificity of your rules. This pseudo-class is relatively new, however. If you need to support browsers without it, you will need to append the dummy `:not(container-query-polyfill)` pseudo-class to the originating element of every selector under a `@container` block:\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e Before \u003c/td\u003e \u003ctd\u003e After \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```css\n@container (min-width: 200px) {\n  #foo {\n    /* ... */\n  }\n\n  .bar {\n    /* ... */\n  }\n\n  #foo,\n  .bar {\n    /* ... */\n  }\n\n  ul \u003e li {\n    /* ... */\n  }\n\n  ::before {\n    /* ... */\n  }\n}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\n@container (min-width: 200px) {\n  #foo:not(.container-query-polyfill) {\n    /* ... */\n  }\n\n  .bar:not(.container-query-polyfill) {\n    /* ... */\n  }\n\n  #foo:not(.container-query-polyfill),\n  .bar:not(.container-query-polyfill) {\n    /* ... */\n  }\n\n  ul \u003e li:not(.container-query-polyfill) {\n    /* ... */\n  }\n\n  :not(.container-query-polyfill)::before {\n    /* ... */\n  }\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\nThis is to ensure the specificity of your rules never changes (e.g. while the polyfill is loading, or on browsers with native support for container queries). On browsers without `:where()` supports, rules without the dummy will be ignored.\n\n## ResizeObserver Loop Errors\n\nWhen using the polyfill, you may observe reports of errors like `ResizeObserver loop completed with undelivered notifications` or `ResizeObserver loop limit exceeded`. These are expected, and may safely be ignored.\n\n## License\n\n[Apache 2.0](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGoogleChromeLabs%2Fcontainer-query-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGoogleChromeLabs%2Fcontainer-query-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGoogleChromeLabs%2Fcontainer-query-polyfill/lists"}