Maarten Van Hoof, senior front-end developer at iO, recently explained at Devoxx Belgium how CSS container queries facilitate modular, component-based responsive web applications. With container queries, micro-front-end components can adjust their internal layout independently from the other components on the page.
In his talk Container Queries: The next step towards a truly modular CSS at Devoxx Belgium, Van Hoof explained his purpose as follows:
This talk is going to be about writing reusable components and how we provide the most optimal responsive layout […].
Given the proliferation of display form factors observed in recent years, responsive design features are a key concern in web applications. As an added concern, to maintain an optimal user experience, applications must also adjust their appearance to the user changing the size of the window or the orientation of the screen. Companies want to write an application once and have it work seamlessly independently of the size of the screen the application is displayed on. With applications now commonly written as an assembly of components, the same goal transfers to application components. In a micro-front-end context, components should minimize assumptions about their surrounding context and contain as much as possible all the logic and configuration that they need to perform their function.
Van Hoof provides an example of a component that displays meteorological information. The relevant information includes the average temperature for the current day, a graph showing the evolution of the temperature over a given time period, and the average temperature for each day of that period.
The component should select which information to display and how to display it depending on how much space is available to it. On a limited viewport, the component may forgo displaying the detailed weekly temperature average. On a large-enough viewport, the component may alternatively reveal the full detailed data. Similarly, the position of any piece of information should be adjusted to the viewport to maximize the user experience.
Without the ability to query their available viewport, components cannot react to it. The closest proxy used by developers is the page’s viewport size combined with configuration options (e.g., size="large", size="small"). Concretely, using CSS media queries and CSS classes, the necessary CSS may quickly grow in size as O(m*n) where m is the number of viewport breakpoints, and n is the number of configuration options.
With CSS Container Queries, developers can directly define component styles in response to different viewport sizes. Configuration options are no longer necessary.
Van Hoof elaborates on the benefits of container queries:
We can remove tons and tons of CSS that take other parts of the web page, parts that we might even not know about. We can remove that and replace them just by styles for that widget and that’s the power of container queries.
The previous animation showcases an e-commerce widget that displays a card with product information. The same widget is repeated at different sizes on the same page. The page layout adapts to the page viewport. The card styling and layout (e.g., font size or ratio between component parts) also adapt to the size of the card.
CSS container queries are still at an early stage of specifications (as part of the CSS Containment Level 3 specification) and are not yet a CSS standard. Container queries are however already available in the latest browsers (e.g., Chrome 105+, Edge 105+, Safari 16).
Current browser polyfills leverage JavaScript’s ResizeObserver API. Container queries thus remove the need to dynamically modify CSS rules with JavaScript. Besides possible performance consequences and impact on user experience (e.g., a flash of unstyled content), declaratively defining style rules in CSS may enforce better separation of concerns.
Developers may find more information in tutorials on container queries. Further examples of usage arising from the community are also available online.
Devoxx Belgium is a developer conference that takes place every year. Devoxx Belgium 2022 took place between the 10th and 14th of October 2022.