Media queries handling for responsive design about histoire HOT 7 OPEN

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

from histoire.

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.

from histoire.

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

from histoire.

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.

from histoire.

from histoire.

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

from histoire.

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?

from histoire.