search

WICG / container-queries

Other
91 stars 10 forks source link

Heydon’s “Holy Albatross” #13

Open keithjgrant opened 5 years ago

keithjgrant commented 5 years ago

Heydon Pickering recently posted a great trick for making a flex items wrap below a breakpoint and display inline above the breakpoint — and the breakpoint is dependent on container width, not viewport. The trick involves using calc() to force flex-basis to be either an arbirarily low negative or high positive value.

This is one particular case of container queries, solved using today’s CSS. I know that, using flexbox & grid, there are a few other specific cases that can be accomplished as well. In fact, I believe his technique can be used to solve the specific use-case given in our Use Cases document.

This leaves me with two questions:

  1. What specific use-case(s) remain that cannot be accomplished using similar means?
  2. Can we somehow tap into the existing power of flexbox/grid wrapping, and maybe provide a shorthand syntax that uses existing mechanics to solve some (if not all) container query problems?
keithjgrant commented 5 years ago

I think this sort of thing can cover a lot of layout-changing container queries. The trick is finding a way to apply the same sort of switch to font size and colors. Unfortunately, using percent in a calc() means something different for different properties, so this seems to only be applicable to properties like width and flex-basis.