Repository files navigation

A PostCSS plugin and Javascript runtime combination, which allows you to writecontainer queries in your CSS the same way you would writemedia queries.

🕶Uses Resize Observer: Uses the native ResizeObserver implentation when available,and falls back to apolyfillto detect size changes. If you use Chrome,you can testhow performant the plugin is with the native implementation. (Shipped in v64.)

📦Bundler Support: Built with bundlers in mind, likeParcel,webpack andBrowserify.

🎲Component Support: Built with component-based libraries in mind, likeReact,Vue,EmberandAngular.

📄Intuitive Syntax: Uses at-rules, thesame way @media queries do:@container (...) { ... }

🎉Container Units:rh, rw, rmin, rmax, which arerelative to the container element's width and / or height. (Same way viewportunits are relative to the viewport's size.)

⚡Cross-Browser Testing: Sponsored with ❤️ bySauceLabs.

Container queries are very similar to media queries; they allow you to applystyles to elements when certain conditions are met.

The key difference is that while media queries are relative to the viewport'ssize, container queries are relative to a container element's size.

Thanks to this trait, you can have multiple instances of the same containerelement, all of which changes its own- and its childrens' styles based on thecontaining element's size.

What is a Container?

A container is just an HTML element, which may (or may not) contain other elements.

You may want to think of them as "Components" (React)or "Blocks" (BEM).

The best way to understand the concept, is if you try it for yourself.

• Nested Components
• Social Posts
• Without React

Note that because these demos are hosted onCodeSandbox,where webpack or PostCSS cannot (currently)be configured, styles are simply imported as strings and processed in the browser.(Using@zeecoder/cq-demo-utils.)

While this works for demo purposes, in a real application it is stronglyrecommended to process styles build-time, as later described in thisdocumentation.

• Getting Started
• Parcel
• webpack
• Gulp
• React
• CSS Modules
• Multiple Containers
• Without React
• CSS Preprocessors
• Syntax
• JS API
• Caveats
• CSS-in-JS

Ideas for Enhancement

Please consider supporting me if you like what I do on myPatreon page.

In case you're wondering about the tool's design, here is a list of goals I hadin mind with the initial implementation:

• Should be tested,
• Should use containers instead of elements (As opposed to other "element-query"libraries.),
• Should use a media query-like syntax so that it's familiar and easy to use,
• Should uses PostCSS for preprocessing, instead of having a runtime parser,
• Should be easy enough to use, but a transpiling step would be assumed (Due tothe reason above.),
• Should use ES modules, so it plays nicely with bundlers (Parcel, webpackBrowserify, etc.) and with Component-oriented UI libraries (React, Vue, etc.),
• Should work best with component naming methodologies, like BEM or SUIT, butshould also work without them.

The WICG dived into 2018 with renewed effort to make native Container Queriesa reality in browsers.

If you're interested in how things are progressing, please feel free to visitthe following links, where the disussions are happening:

• Slack
• Use Cases
• General Discussion

• @zeecoder/react-resize-observer
• use-resize-observer

If you like the idea of container queries, but are not particularlyconvinced by this solution, then I encourage you to look at these alternatives:

• EQCSS
• CQ Prolyfill
• React Container Query
• CSS Element Queries

MIT