Media queries handling for responsive design

[hugoattal]

I know this is a long shot, and we certainly won't focus on this in the short term.
But we discussed displaying different resolutions of stories to test responsive design, and there will probably be some problem with the media queries (as we won't use iframe).

I just wanted to mention a couple of links that might help to tackle this problem in the future:

• CSS Container Queries
  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
• Polyfill for CSS Container Queries
  https://github.com/GoogleChromeLabs/container-query-polyfill

It's just a proposal for now, but the fact that a polyfill exists may be a good starting point to make media queries based on a specific div (just to see how Google did this specifically). Also, we may have to create a plugin that change the way CSS is compiled for Histoire?

[elevatebart]

Great idea to put to debate. Thanks.

What is the rationale for not using iframes?

This is how storybook and cypress handle media queries testing so you can bet that browser support is going to stay. Container queries on the other hand are still not used enough to be stable in API.

Using them instead to test Media queries would meant doing some CSS rewriting. I don't mind doing this magic (with sourcemaps of course) if we have a stable API on the other hand.

[hugoattal]

After discussing it with @Akryum, it cames that iframes would be kinda heavy, especially with several versions of an element in a story, and might slow down the hot reload and the whole page.

But you're right, usage of iframes should also be put to debate! The advantage being that we won't need anything special to handle media queries.

Small example to illustrate, imagine an iframe for each element of this page:
https://vuejs.github.io/ui/#/demo/button

[Akryum]

it cames that iframes would be kinda heavy

Specifically for the grid view where 10 or 100s of the component can be displayed at once.

[Akryum]

Maybe we can have an hybrid approach and use iframe only when we want responsive queries to apply?

[Akryum]

[BBoehm]

Would be great if we can get some kind of solution for the container queries

[hugoattal]

This seems to now be commonly supported: https://caniuse.com/css-container-queries

So, the solution would be to just add a css rule on the variant like this:

.variant {
    container: variant / size
}

But then you'll have to use the @container query instead of the @media query.

ex:

@container (min-width: 720px) {
    .child {...}
}

(The usual media query would still work of course) Wdyt?