Css style

Container queries, the next step towards truly modular CSS

Martin Van Hoofsenior front-end developer at iO, recently explained at Devoxx Belgium how CSS container queries facilitate modular, component-based responsive web applications. With container requests, micro-frontend components can adjust their internal layout independently of other components on the page.

In his speech Container Requests: The Next Step Towards Truly Modular CSS at Devoxx Belgium, Van Hoof explained his goal as follows:

This talk will focus on writing reusable components and how we provide the most optimal responsive layout […].

Given the proliferation of display form factors seen in recent years, responsive design features are a major concern in web applications. Another concern, to maintain an optimal user experience, applications must also adjust their appearance to the user by changing the window size or screen orientation. Companies want to write an app once and have it work seamlessly regardless of the size of the screen the app is displayed on. With applications now commonly written as an assembly of components, the same purpose is transferred to application components. In a micro-frontend context, components should minimize assumptions about their surrounding context and contain as much of the logic and configuration they need to perform their function as possible.

Van Hoof provides an example component that displays weather information. Relevant information includes the current day’s average temperature, a graph showing the temperature trend over a given period of time, and the average temperature for each day in that period.

The component must select what information to display and how to display it based on the space it has. On a limited display window, the component can opt out of displaying the detailed weekly temperature average. On a large enough window, the component can also reveal the full detailed data. Likewise, the position of any information should be adjusted to the display window to optimize 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 viewport size combined with the configuration options (e.g., size="large", size="small"). Specifically, using CSS Media Queries and CSS classes, the necessary CSS can quickly grow in size as O(m*n) where m is the number of window breakpoints, and n is the number of configuration options.

Using CSS Media Queries to Adjust Component Style to Component Viewport

With CSS container queries, developers can directly set component styles in response to different window sizes. Configuration options are no longer needed.

Using container queries to fit the component style to the component viewport

Van Hoof details the benefits of container queries:

We can remove tons and tons of CSS that takes up other parts of the web page, parts that we may not even know about. We can remove that and just replace them with styles for that widget and that’s the power of container queries.

Animated use case of container requests

The previous animation shows an e-commerce widget that displays a card with product information. The same widget is repeated at different sizes on the same page. The layout adapts to the display window of the page. The style and layout of the map (for example, the font size or the ratio between components) also adapts to the size of the map.

CSS container requests are always at one first stage of the specifications (as a member of CSS 3 containment level specification) and are not yet a CSS standard. Container requests are however already available in the latest browsers (e.g. Chrome 105+, Edge 105+, Safari 16).

Current browser polyfills take advantage of JavaScript ResizeObserver API. Container requests thus remove the need to dynamically modify CSS rules with JavaScript. Outraged possible consequences on performance and impact on user experience (e.g. flash of unstyled content), declarative definition of style rules in CSS can enforce better separation of concerns.

Developers can find more information in container request tutorials. Further away examples of use from the community are also available online.

Devoxx Belgium is a developer conference that takes place every year. Devoxx Belgium 2022 took place from October 10 to 14, 2022.