Hacker News Reader

I agree with your sentiment.

But instead of just using CSS units, you can use hard breakpoints, but not for the whole site. Each UI elements needs to be tailored based on width and height of a browser, you cannot bucket everything.

View on HN

The best way to accomplish this is container queries, which are just starting to show up in browsers. Essentially, you define breakouts based on the dimensions of individual elements, not the full browser window. https://css-tricks.com/say-hello-to-css-container-queries/

Sounds like they just dropped in Chrome Canary, so this is very, very early. That typically means it'll take years for it to be supported in all browsers or 99% of browser versions in use. Is there a polyfill solution for this in the meantime?

Container queries have been suggested for a while now, it is not a new idea. But it has gained a lot of momentum recently, for example [1]. So maybe it will not be years until all modern browsers might support it. Until then, you might want to try [2] (not a polyfill, but a workaround with JavaScript).

[1] https://github.com/w3c/csswg-drafts/issues/5796

[2] https://philipwalton.com/articles/responsive-components-a-so...

Reply on news.ycombinator.com