How to use container queries now

If you want to use container queries in your code now, but you want the experience to look the same in all browsers, you can implement a JavaScript-based fallback for browsers that don't support container queries. The question then becomes: how comprehensive should the fallback be? As with any fallback, the challenge is to strike a good balance between usefulness and performance. For CSS features, it's often impossible to support the full API (see why not use a polyfill). However, you can get pretty far by identifying the core set of functionality that most developers want to use, and then optimize the fallback for just those features. But what is the "core set of functionality" that most developers want for container queries? To answer that question, consider how most developers build responsive sites currently with media queries. Pretty much all modern design systems and component libraries have standardized on mobile-first principles, implemented using a set of predefined breakpoints (such as SM, MD, LG, XL). Components are optimized to display well on small screens by default, and then styles are conditionally layered on to support a fixed set of larger screen widths. (See the Bootstrap and Tailwind documentation for examples of this.)