With new containers and scope queries, CSS is finally catching up with the component-driven revolution.
Over the past few years, component-driven design has become very popular among Web developers. This is not only because of the growing demand for this development strategy, but also because of new tools that address the challenges of the old CDD approach. Arguably the chief of these is the Bit, which has played an important role not only in developing components independently, but also, most importantly, in the Web development world using a new entity called “standalone components” for component collaboration across projects.
- teambit/bit
- Independent components. New building blocks for the network
One thing, however, has failed to keep up with this evolution. CSS!
The wait is over!
CSS will 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 simple insight in this article.
Use @Container to transition from page-based reactive design to container-based reactive design.
Most of us still rely on viewport based media queries (@media) to support different screen sizes.
However, as our designs become more modular and patterned ——.
- We make design decisions at a subtle level. CSS, however, requires us to bind these styles to a larger, often unrelated abstraction of “pages.
- In addition, CSS limits its ability to add responsive styles to components without any help from an external framework.
In its latest addition, CSS Bridges this gap by introducing a new query called @Container.
A demonstration of the effects of container queries deployed on a bit platform
See a complete example of sharing as a component on bit.dev (this only works when using Chrome Canary).
Bit. Dev/enlear/CSS -…
The power of container queries.
1. Ability to control the response behavior of individual components
Using container queries, we can query the amount of space allocated to a component by its parent.
Thus, child components can apply styles independently, depending on the size and dynamics available to their parents.
In short, we no longer have to plan to style our components for weird layout exceptions.
Components have their own responsiveness and can live anywhere in a responsive design. We can refocus our design on the components themselves, making them more robust, flexible, and shareable.
The following image shows how two identical card components, at different container sizes, can be represented separately using a container query.
Use @Container to control the response behavior of individual components. From then on. Article by Una Kravets.
In addition, a component-based design can be responsive by fully using Container queries.
The image below shows several gift cards that are displayed in different views using the Container query.
Demonstrates how to make the entire page responsive using @container. From then on. Article by Una Kravets.
Each commodity card designs its own style based on the space allocated to its container, which is impossible if we rely only on global and viewport styles.
With these additions, it opens the door to creating truly modular applications.
3. Able to separate the micro layout from the macro layout.
Micro layouts can be enhanced by styling individual components using Container Queries, while macro layouts (the entire page) can be styled using media Queries.
The use of media queries in combination with container queries takes us to a new level of control over responsive design. Here is an example of how we control the micro and macro layouts, respectively.
The layout of the entire calendar changes from a single panel to a multi-panel, which uses media queries at a macro level. Container queries affect the macro layout, changing dates and events.
Use @Container and @Media to control the macro and micro layouts, respectively. From then on. Article by Una Kravets.
Note: Since @Container is still in beta, you can try @Container in Chrome Canary for the time being.
- In Canary go to _chrome://flags_.
- Open the _enable-container-queries_ flag.
One of the basic things to note here is that we can design micro – and micro-level layouts as components. This will help build a design system that can be used as a base and even be extended to miniature front ends over time.
Introduce @scope to isolate component styles
As we all know, styling components independently without the influence of global styling can be quite tricky.
By default, using a single style sheet makes them global. Even if we place styles next to component definitions, they are bundled at compile time and injected into the header at run time. As we all know, styling components independently without the influence of global styling can be quite tricky.
By default, using a single style sheet makes them global. Even if we place styles next to component definitions, they are bundled at compile time and injected into the header at run time. In fact, they are not tied to the original component, and collisions are inevitable.
However, we have been overcoming these challenges with plug-ins such as frameworks and CSS modules.
Lucky for us.
Scoped Styles were introduced to encapsulate component Styles natively at the component level with readable CSS.
With the help of scope styles, we can specify that we keep a specific style, or we can jump out of the scope and refer to a more global style for a component.
Take into account user customization and form factors
As mentioned earlier, the macro and micro layout of web design can be controlled independently using container and scope queries.
However, we can see that the development of modern devices is bound to surpass the traditional flat screen.
Therefore, we need to prepare new form factors for our applications, such as dual-screen, foldable or deformable screen devices.
CSS is trying to solve these problems by introducing media queries that span screens.
Create responsive design for form factors
A spanning media query (@Media (Spanning:)) will be introduced to enable developers to build optimized layouts for dual and foldable screens.
This can be used to identify whether the display spans multiple regions and the configuration (vertical or horizontal) of the display region.
The area across the screen. Source. Microsoft Edge explainer
Here is the suggested syntax.
- Single-fold-vertical: The layout viewport has two display areas and the fold is vertical.
- The viewport has two display areas and the fold is horizontal.
- None: The window is not in span mode
With this feature, developers will be able to prevent unnecessary interruptions and mislocations in the user interface.
Allow design personalization
With the help of user preferences in media queries, we can customize the UI design to meet the user’s preferences on their device’s operating system.
It helps to build a more flexible and personalized design for each user, especially those with accessibility requirements.
Some of these configurable preferences are.
- Preference-reduction-action. For those who have their operating system preferences set to reduce action, it can reduce the effect of animations, transitions, and other flashy actions on the screen.
- Prefer contrast. It provides users who prefer high-contrast content compared to the original design.
- ** preference – reduce -** transparency. It reduces translucent layering by analyzing Settings in the user’s operating system.
- Prefers – color – scheme. The UI theme can be customized to light, dark, or automatic depending on the user’s preferences in their operating system.
- May be inverted-**color: This can be used to invert the colors on the screen according to the user’s preference.
conclusion
In my opinion, the main goal of the new CSS features is to reduce the burden of incorporating responsive styles into component-based web design.
They allow us to isolate component styles from page layouts, global styles, and user styles. In addition, it helps us separate the macro layout from the micro layout and apply personalized styles accordingly.
From then on. Article by Una Kravets.
Hopefully these additional features will revolutionize our design practices and prepare us for future devices with unimaginable screen layouts.
Start exploring new responsive design for yourself today!
To learn more
- Storybook using Bit
- Build the React component library — the right way
- Build a React design system for easy adoption and extension
- Independent components. New building blocks for the network
Component-driven responsive design for CSS Queries using Containers and scopes was originally published in Bits and Pieceson Medium, where people continue the conversation by highlighting and responding to the story.