{"id":21933090,"url":"https://github.com/zeecoder/container-query","last_synced_at":"2025-04-09T11:10:12.542Z","repository":{"id":17218054,"uuid":"80368562","full_name":"ZeeCoder/container-query","owner":"ZeeCoder","description":"A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.","archived":false,"fork":false,"pushed_at":"2022-12-03T15:41:57.000Z","size":5271,"stargazers_count":139,"open_issues_count":35,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-30T01:59:08.654Z","etag":null,"topics":["browser","component","container-query","css","element-query","javascript","media-query","module","postcss","postcss-plugin","query","responsive","responsive-design","rwd"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ZeeCoder.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}},"created_at":"2017-01-29T19:55:55.000Z","updated_at":"2024-08-23T20:31:15.000Z","dependencies_parsed_at":"2023-01-14T07:45:18.486Z","dependency_job_id":null,"html_url":"https://github.com/ZeeCoder/container-query","commit_stats":null,"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Fcontainer-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Fcontainer-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Fcontainer-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Fcontainer-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZeeCoder","download_url":"https://codeload.github.com/ZeeCoder/container-query/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027407,"owners_count":21035594,"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":["browser","component","container-query","css","element-query","javascript","media-query","module","postcss","postcss-plugin","query","responsive","responsive-design","rwd"],"created_at":"2024-11-29T00:07:45.310Z","updated_at":"2025-04-09T11:10:12.511Z","avatar_url":"https://github.com/ZeeCoder.png","language":"JavaScript","funding_links":["https://www.patreon.com/zeecoder"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n\t\u003cbr\u003e\n\t\u003cimg width=\"360\" src=\"https://rawgit.com/ZeeCoder/container-query/master/media/Logo.png\" alt=\"Container Query\"\u003e\n\t\u003cbr\u003e\n    \u003cbr\u003e\n\u003c/h1\u003e\n\n[![npm version](https://badge.fury.io/js/%40zeecoder%2Fcontainer-query.svg)](https://npmjs.com/package/@zeecoder/container-query)\n[![build](https://travis-ci.org/ZeeCoder/container-query.svg?branch=master)](https://travis-ci.org/ZeeCoder/container-query)\n[![Coverage Status](https://coveralls.io/repos/github/ZeeCoder/container-query/badge.svg?branch=master)](https://coveralls.io/github/ZeeCoder/container-query?branch=master)\n[![Greenkeeper badge](https://badges.greenkeeper.io/ZeeCoder/container-query.svg)](https://greenkeeper.io/)\n\n![SauceLabsTestMatrix](https://app.saucelabs.com/browser-matrix/TheC0d3r.svg)\n\n\u003e A PostCSS plugin and Javascript runtime combination, which allows you to write\n\u003e **container queries** in your CSS the same way you would write **media queries**.\n\n🕶 **Uses Resize Observer**: Uses the native ResizeObserver implentation when available,\nand falls back to a [polyfill](https://github.com/que-etc/resize-observer-polyfill)\nto detect size changes. If you use Chrome, [you can test](https://codesandbox.io/s/l3rmm1rz2l)\nhow performant the plugin is with the native implementation. (Shipped in v64.)\n\n📦 **Bundler Support**: Built with bundlers in mind, like [Parcel](https://parceljs.org),\n[webpack](https://webpack.js.org) and [Browserify](http://browserify.org/).\n\n🎲 **Component Support**: Built with component-based libraries in mind, like\n[React](https://reactjs.org), [Vue](https://vuejs.org/), [Ember](https://emberjs.com/)\nand [Angular](https://angularjs.org/).\n\n📄 **Intuitive Syntax**: Uses at-rules, the [same way @media queries do](docs/syntax.md#Queries):\n`@container (...) { ... }`\n\n🎉 **Container Units**: [rh, rw, rmin, rmax,](docs/syntax.md#Units) which are\nrelative to the container element's width and / or height. (Same way viewport\nunits are relative to the viewport's size.)\n\n⚡ **Cross-Browser Testing**: Sponsored with ❤️ by [SauceLabs](https://saucelabs.com).\n\n## Introduction\n\nContainer queries are very similar to media queries; they allow you to apply\nstyles to elements when certain conditions are met.\n\nThe key difference is that while media queries are relative to the viewport's\nsize, container queries are relative to a container element's size.\n\nThanks to this trait, you can have multiple instances of the same container\nelement, all of which changes its own- and its childrens' styles based on the\ncontaining element's size.\n\n**What is a Container?**\n\nA container is just an HTML element, which may (or may not) contain other elements.\n\nYou may want to think of them as \"**Components**\" ([React](https://facebook.github.io/react/docs/components-and-props.html))\nor \"**Blocks**\" ([BEM](http://getbem.com/naming/)).\n\n## Demos\n\nThe best way to understand the concept, is if you try it for yourself.\n\n- [Nested Components](https://codesandbox.io/s/k9n28rkkl7)\n- [Social Posts](https://codesandbox.io/s/0l71yp80w)\n- [Without React](https://codesandbox.io/s/mo7nr90vmj)\n\nNote that because these demos are hosted on [CodeSandbox](https://codesandbox.io),\nwhere webpack or PostCSS cannot ([currently](https://twitter.com/codesandbox/status/1087336337915760640))\nbe configured, styles are simply imported as strings and processed in the browser.\n(Using [@zeecoder/cq-demo-utils](https://github.com/ZeeCoder/cq-demo-utils).)\n\nWhile this works for demo purposes, in a real application it is strongly\nrecommended to process styles build-time, as later described in this\ndocumentation.\n\n## Documentation\n\n- [Getting Started](docs/getting-started.md)\n- [Parcel](docs/parcel.md)\n- [webpack](docs/webpack.md)\n- [Gulp](docs/gulp.md)\n- [React](docs/react.md)\n- [CSS Modules](docs/css-modules.md)\n- [Multiple Containers](docs/multiple-containers.md)\n- [Without React](docs/without-react.md)\n- [CSS Preprocessors](docs/css-preprocessors.md)\n- [Syntax](docs/syntax.md)\n- [JS API](docs/js-api.md)\n- [Caveats](docs/caveats.md)\n- [CSS-in-JS](docs/css-in-js.md)\n\n## What's Next?\n\n[Ideas for Enhancement](https://goo.gl/7XtjDe)\n\n## Support\n\nPlease consider supporting me if you like what I do on my\n[Patreon](https://www.patreon.com/zeecoder) page.\n\n## Thoughts on Design\n\nIn case you're wondering about the tool's design, here is a list of goals I had\nin mind with the initial implementation:\n\n- Should be tested,\n- Should use containers instead of elements (As opposed to other \"element-query\"\n  libraries.),\n- Should use a media query-like syntax so that it's familiar and easy to use,\n- Should uses PostCSS for preprocessing, instead of having a runtime parser,\n- Should be easy enough to use, but a transpiling step would be assumed (Due to\n  the reason above.),\n- Should use ES modules, so it plays nicely with bundlers (Parcel, webpack\n  Browserify, etc.) and with Component-oriented UI libraries (React, Vue, etc.),\n- Should work best with component naming methodologies, like BEM or SUIT, but\n  should also work without them.\n\n## WICG\n\nThe WICG dived into 2018 with renewed effort to make native Container Queries\na reality in browsers.\n\nIf you're interested in how things are progressing, please feel free to visit\nthe following links, where the disussions are happening:\n\n- [Slack](https://join.slack.com/t/containerqueries/shared_invite/enQtMzA2OTc5MDUwNjk1LTEwMWEzNjcwMTY1MGYzYWMyOGMxM2MzNDM1OGZjMjM3NDNiMDMxYTk0YjQxN2FjYTZkYmZkMDZmOWE1ODRkZWI)\n- [Use Cases](https://github.com/WICG/cq-usecases)\n- [General Discussion](https://github.com/WICG/container-queries)\n\n## Related\n\n- [@zeecoder/react-resize-observer](https://github.com/ZeeCoder/react-resize-observer)\n- [use-resize-observer](https://github.com/ZeeCoder/use-resize-observer)\n\n## Alternatives\n\nIf you like the idea of container queries, but are not particularly\nconvinced by this solution, then I encourage you to look at these alternatives:\n\n- [EQCSS](https://github.com/eqcss/eqcss)\n- [CQ Prolyfill](https://github.com/ausi/cq-prolyfill)\n- [React Container Query](https://github.com/d6u/react-container-query)\n- [CSS Element Queries](https://github.com/marcj/css-element-queries)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeecoder%2Fcontainer-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeecoder%2Fcontainer-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeecoder%2Fcontainer-query/lists"}