Component-Driven Responsive Design Using Container and Scope CSS Queries
CSS is finally catching up with the component-driven revolution, using the new container and scope queries
Component-driven development has become a very popular development strategy. This, in turn, has spawned many great tools to support CDD, with the most notable one being Bit (which, essentially, solves most challenges presented by the CDD approach and unlocks scale for many apps).
However, there’s one thing that couldn’t keep up with this evolution: CSS!
The wait is over!
CSS is about to revolutionize the concept of responsive design by introducing some new queries. These will directly enhance the component-based design landscape.
Let me give you a brief insight into them in this article.
The switch from page-based to container-based responsive designs using @container.
Most of us still depend on viewport-based media queries (@media) to support different screen sizes.
However, when our designs become more modular and pattern-driven —
- We make our design decisions at granular levels. But CSS asks us to bind those styles to a bigger, often-irrelevant abstraction of a “page”!
- Besides, CSS limits its ability to add responsive styles to components without any external framework aid.
With the latest additions, CSS is bridging this gap by introducing a new query named @container.
See full example shared as components on bit.dev (this will only function properly using Chrome Canary):
The Powerful Abilities of Container Queries.
1. Ability to control the responsive behavior of individual components
Using Container queries, we can query the amount of space allocated to a component by its parent.
Therefore, child components can apply styles independently, depending on the available size and dynamics of their parent component.
Simply put, we don’t have to plan for weird layout exceptions to apply styles for our components anymore.
The component owns its responsiveness and can live anywhere in the responsive design. We can refocus our design towards the components themselves, making them more robust, flexible, and sharable.
The following image demonstrates how two identical card components with different container sizes could behave separately using Container queries.
Besides, a component-based design can be made responsive by completely using Container queries as well.
The below image shows several shopping cards, that are displayed in different views with Container queries.
Each product card styles itself, depending on the space allocated to its container, which is impossible to do if we rely only on global and viewport styles.
With these additions, it opens the door to create truly modular applications.
3. Ability to separate micro layouts from macro layouts.
We can enhance Micro layouts by styling the individual components using Container queries, while the macro layout (the entire page) can be styled using media queries.
This combined usage of media queries with Container queries gives us a new level of control over our responsive design. Given below is an example of how we can control micro and macro layouts separately.
The entire calendar layout is shifted from a single panel to a multi-panel using media queries at the macro level. And Container queries affect the macro layout changing the date and events.
Note: Since @container is still in the testing stage, you can try out the @container in Chrome Canary for now.
- Got to
chrome://flagsin Canary. - Turn on the Enable-container-queries flag.
One of the essential things to note here is that we can design micro and micro-level layouts as components. It will help build a design system as a foundation that could scale even into micro frontends over time.
Introduction of @scope to isolate component styles
As we all know, styling components independently without the effect of global styles is quite tricky.
Using a separate style sheet by default makes them global. Even if we placed the styles alongside a component definition, the styles are bundled at compile-time and injected into the page header at runtime. As we all know, styling components independently without the effect of global styles is quite tricky.
Using a separate style sheet by default makes them global. Even if we placed the styles alongside a component definition, the styles are bundled at compile-time and injected into the page header at runtime. Effectively they won’t be bounded to the original component, and collisions are inevitable.
However, we have been overcoming these challenges with frameworks and plugins like CSS modules.
Luckily for us,
The introduction of Scoped Styles encapsulates the component styles natively at the component level with readable CSS.
With the aid of Scoped Styles, we can specify to keep a particular style encapsulated or break out of that scope and refer back to a more global style for a component.
Taking user customization and form-factor into account
As previously mentioned, the macro and micro layouts of a web design can be independently controlled using Container and Scope queries.
However, we can see modern devices are bound to evolve beyond the traditional flat screen.
Therefore, we need to prepare our applications for new form-factors such as dual, foldable, or shape-shifting screen devices.
CSS is trying to address these by introducing screen-spanning media queries.
Creating Form-Factor Responsive Designs
The spanning media query (@media (spanning: <type of fold>))will be introduced to enable the developers to build layouts that are optimized for dual and foldable screens.
This can be used to identify whether the display spans across multiple regions and the configuration of the display region (vertical or horizontal).
Following are the proposed syntaxes.
- single-fold-vertical: layout viewport has two display regions, and the fold is vertical.
- single-fold-horizontal: layout viewport has two display regions, and the fold is horizontal.
- none: window is not in spanning mode
With the aid of this feature, the developers will be able to prevent unnecessary breaks and misalignments in the UI.
Allowing Design Personalization
With user preference features in media queries, we can customize the UI design to serve the user preferences set on their device operating system.
It help to build a more flexible and personalized design for each user, especially those with accessibility needs.
Some of these configurable preferences are;
- prefers-reduced-motion: It reduces the effect of animations, transitions, and other flashy motions on screen for the users who have set OS preferences to reduced motion.
- prefers-contrast: It enables to provide content to users who prefer high contrast content compared to the original design.
- prefers-reduced-transparency: It reduces the number of translucent layering effects by analyzing the settings in the user’s OS.
- prefers-color-scheme: The UI theme can be customized to light, dark, or auto themes depending on the preference users have set in their OS.
- inverted-color: This can be used to invert the colors on the screen based on the user’s preference.
Conclusion
In my opinion, the main goal of the new features of CSS is to lower the burden of integrating responsive styles into a component-based web design.
They allow us to isolate the component styles from page layout, global styles, and user styles. Besides, it helps us to separate the macro layout from the micro layout and apply styles accordingly with personalization.
Hopefully, these additions will revolutionize our design practices and prepare us for future devices with unimaginable screen layouts.
Start to explore the new responsive designs today itself!
