What

Need to consider Element Queries non-standard feature.

Why

That is a brand new look at the components and their responsive behavior. I believe that in the conjuncture with the traditional media queries this could allow to create immersive responsive experiences.

How

1. CSS Element Queries
2. Alternative

---

Specification

See the Element Query API proposal.

Worth looking into: Solving CSS container queries

There is also a ResiveObserver supported in Chrome, and supposedly having a polyfill.

To update this pending issue: I still cherish the idea of element (container) queries, and I find them a missing piece in the modern responsive layout development.

The primary question I have is the API for this feature, as a part of Atomic layout.

API proposal

Here's a few thoughts on the Element Query API: https://gist.github.com/kettanaito/f315769267c31df2afc904dee291c5bc

I'd appreciate any feedback on the proposal. I think the last suggestion (to treat Element Query as a custom Responsive prop bound to a component) is the most versatile API yet.

Interesting observer-based pattern from Envato:

• react-breakpoints