Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Tue, 09 Jul 2024 12:59:05 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 225069128 How to use container queries now https://frontendmasters.com/blog/how-to-use-container-queries-now/ https://frontendmasters.com/blog/how-to-use-container-queries-now/#respond Tue, 09 Jul 2024 12:59:04 +0000 https://frontendmasters.com/blog/?p=2981 Philip Walton for Google responded to our question We’ve Got Container Queries Now, But Are We Actually Using Them? There are a variety of reasons why usage of them seems to be low, but certainly developers worried about browser support is still a factor. The biggest quoted concern is Safari 15, which is entirely reasonable.

Philip lays out a technique where you build a <responsive-container> Web Component which has a ResizeObserver that updates classes on itself you can use for fallback styles in browsers that don’t support @container.

It’s clever and efficient, but there is stuff I worry about:

  1. You can’t just update @media queries to @container queries with the same numbers, they measure very different things and will now break at different places.
  2. Every component is going to have different breakpoints, and now you need to keep those breakpoints synced in both HTML and CSS.
  3. Dealing with that style duplication is tricky. I would think a lot of setups don’t have a processing setup that has mixin abilities.

Still, if this helps you build a better system you can get to production, godspeed.

]]> https://frontendmasters.com/blog/how-to-use-container-queries-now/feed/ 0 2981