Repository files navigation

https://github.com/FormidableLabs/spectacle

• separate questions (titles) from answers on separate pages

• introduction: my name, employer, WICG

• // Disclaimer: my opinions might not represent the opinion of the whole group

• A word on how designing social content was part of the inspiration for me tolook for a solution.

• ‎What is a Container Query?

• basic description: container queries allow us to change styles based on a targetelement's size.

• ‎What does it do?

• ‎Explain by comparing to media queries, where the implicit query target is theviewport, while a container query has an explicit target. The same way mediaqueries apply styles in the context of the viewport, I believe container queriesshould apply styles in the context of their target element. (in most cases youprobably want to avoid affecting the styles outside of the container boundaries.)

• ‎but... what is a Container though?

• ‎for the sake of simplicity I'll spare you the history on where container queryname comes from. A more react-like name would be: component-query, but that's justnot what we call it, since it's not a react-specific idea.

• ‎What are container boundaries?

• ‎example on nestable media component, and illustration on the theory on how scopingwould work.

• Can I start using it today?

• sort of. there are several plugins out there but if you're using react, I'dadvise you to use my solution.

• ‎Showing a dead simple demo featuring multiple and nested components, by walkingthrough them making a Comment component with media queries (maybe using flexbox toshowcase how well it works with container queries), then once we're done, we replaceeverything with @container, and by applying the HoC, everything just starts to work.(mention that there's a render-prop version, if someone likes that better)

• ‎So... how does it work?

• ‎show the basic idea with the postcss plugin and runtime combination, then showingpractical guide about how to set up the postcss plugin configuration. (tip on how Iapply different plugins for different css files to make container queries an opt-infeature)

• ‎Last words, summary

• ‎The plugin is a pet-project of mine (rfc, a lot of enhancements planned), while withcontainer queries we aim to make it available to everyone.

• ‎didn't like my version? give a chance to some of the other great solutions out there.

Title: "@container queries in React"

• The problem: in the advent of reusable components, we should be able toconditionally apply styling based on the space available to a given component.
• Idea:@container queries in CSS, applied with a JS runtime.
• Introducingreact-container-query, example (Gifs / Videos).
• Talk about the current WICG efforts to create a spec for browsers.
• Before it's standardized: ResizeObserver, Houdini.
• Mention other libs, polyfills and size-aware react component.

• Does it work with CSS-in-JS solutions?
• Performance?
• SSR?
• Does it work in non-react environments?
• Does it work with vue.js? Other component libs?