Original link:The new responsive: Web design in a component-driven world

The following is a translation of the full text and my thoughts:

Responsive design today

Today, when you use the term “responsive design,” you’re probably thinking of a solution that uses media gorgeous to switch between mobile, tablet, and desktop layouts.

But soon, the concept of a responsive design layout will be as obsolete as the (old) tabular layout.

Viewport based media queries give you some great tool power, but also a relative loss of skill. This lacks the ability to respond to user needs and inject responsive styles into the components themselves.

When you refer to components in this article, you are referring to elements, including elements made up of other elements, such as cards or sidebars. These components make up our web pages

You can use global viewport information to style components, but components still don’t have their own styles, and this doesn’t work when our design system is component-based rather than page-based.

The good news is that ecosystems are changing, and they are changing very quickly. CSS is evolving and a new era of responsive design is coming.

We see this happen about once every 10 years. Ten years ago, around 2010-2012, we saw huge changes in mobile and responsive design, and the emergence of CSS3.

Source: Web Design Museum

So once again, ecology is ready for some big changes in CSS. Chrome and cross-Web engineers are prototyping, standardizing, and implementing the next era of responsive design.

These updates include media queries based on user preferences, container queries, and new screen types such as foldable screens.

User-based responsiveness

The new user preference media feature allows you to tailor your Web experience to your users’ specific preferences and needs. This means that the preferred media feature allows you to tailor the user experience to the user’s experience

These user media preference features include:

  • prefers-reduced-motion
  • prefers-contrast
  • prefers-reduced-transparency
  • prefers-color-scheme
  • inverted-colors
  • And more

The preferences feature captures a user’s preferences in their operating system, helping to build a more robust and personalized Web experience, especially for users with accessibility requirements.

prefers-reduced-motion

Reduced Motion is incorporated into the operating system to reduce the amount of animation required to use the computer overall. As a result, they probably won’t appreciate flashy intro screens, card-spinning animations, complex loading prompts, or other flashy animations when browsing the web.

With Aspen-reduced Motion, you can design your page with reduced dynamic effects in mind, while also creating an enhanced animation experience for users who may not have this preference enabled.

Demo video

The example card in the video link above has information on both sides. Under the basic dynamic fade experience there is a cross fade display, while under the dynamic enhance experience there is a card flip.

Dynamic attenuation does not necessarily mean “no dynamic” because dynamic plays a critical role in conveying information on a web page. Instead, guide these users with a solid, non-essential dynamic base experience, while gradually enhancing the experience of others who don’t have this preference.

prefers-color-scheme

Another preference media setting is the preference color scheme. This feature helps you customize your theme UI based on user preferences. Whether on their desktop or mobile device, users can set a light, dark, or auto-switch theme that changes with the time of day.

If you use CSS custom variables on your page, switching color values can be quite easy. You can quickly update theme color values, such as backgroundColor and textOnPrimary, to dynamically match new themes in media queries.

Demo video

To make it easier to test these preferences, you can use developer tools to simulate them instead of opening system preferences to make changes every time.

Demo video

For darker themes

When designing for a dark theme, it’s not just about reversing backgrounds, text colors, or dark scrollbars. There are some details you may not be aware of. For example, you may need to desaturate color on a dark background to reduce visual jitter.

Instead of using shadows to create depth and make elements stand out, you might want to use some light on the element’s background color to bring it forward. This is because shadows don’t work as well on a dark background.

Demo video

Material Design is instructive in the design of dark themes

Dark themes not only provide a personalized user experience, but also significantly improve the battery life of the AMOLED screen. For example, how much longer battery life can be extended by using a dark theme 24/7. These screens are often found on newer, high-end phones and are becoming increasingly popular among mobile devices.

A 2018 Android study of dark themes showed up to 60% savings depending on screen brightness and overall user interface. This 60% statistic comes from comparing the power consumption of Youtube paused video pages at 100% screen brightness using dark and light themes respectively.

You should try to provide your audience with a dark themed experience.

Container-based responsiveness

One of the most exciting new areas in CSS is container queries, also known as element queries. It’s hard to underestimate how the shift from page-based responsive design to container-based responsive design has played a role in the evolution of the design ecosystem.

Here is an example of the power provided by container queries. You can manipulate any style of card elements, including the list of links, font size, and overall layout based on their parent container:

Demo video

This example shows two identical components with two different container sizes that use space in a CSS Grid layout. Each component ADAPTS to its unique allocation of space and adjusts its style accordingly.

This kind of flexibility cannot be achieved by media queries alone.

Container queries provide a more dynamic approach to reactive design. This means that if you place this card component in a sidebar or hero view section, or in a grid inside the page body, the component itself displays information in a responsive manner based on the container rather than the viewport.

This requires the @Container rule, which works in a similar way to media queries using @Media, but instead, @Container queries the parent container for information, rather than the UserAgent of the viewport and browser.

.card{/ / the author's note: contain attributes can declare the current element and its content is independent of the rest of the DOM tree / / size: according to the dimensions of the element calculation does not depend on the size of the elements of the sons of it / / layout: Contain: size layout; contain: size layout; }@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25 rem;
  }

  / *... * /
}
Copy the code

Contain first, restrict the parent element to contain. Then, write an @container query, using either minWidth or Max Width, to style any element in the container based on the size of the container.

The code above uses Max Width, sets the link to display: None when the container width is less than 850px, and reduces the time font size.

Container query card

In this plant demonstration site, each product card, including active cards, the sidebar of recently viewed items, and the product grid, is the exact same component with the same markup.

Video presentation

There are no media queries based on the entire layout, only container queries. This allows each product card to convert to the appropriate layout to fill its space. For example, using minmax column layouts in the Grid to let elements flow into their space and rearrange the Grid when the space becomes too compressed (which means it reaches the minimum limit).

.product {
  contain: layout inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5 rem 0 0;
    display: flex;
  }

  .card-container button {
    / *... * /}}Copy the code

When there is at least 350px space in the grid, keep the card layout horizontal by setting display:flex (the default flex direction is “row”).

The smaller the space, the more stacked the product cards become. Each product card has its own style, which cannot be achieved by the overall style alone.

Use a mixture of container and media queries

Container queries have many use cases, one of which is the calendar component. You can use container queries to rearrange the layout based on the widths available for calendar events and other fragments’ parent components.

Video presentation

In this demo, container queries change the layout and style of calendar dates and days of the week, as well as adjust the margins and font sizes of scheduled events to help them better fit the space.

Then, use media queries to fit the entire layout for the smaller screen size. This example demonstrates the power of combining media queries (adjusting global or macro styles) with container queries (adjusting container child elements and their microstyles).

So now we can think about macro and micro layouts within the same UI component to make some subtle design decisions.

Use container query today

These demos can now be experienced by manually turning on experimental features in Chrome. Enter about://flags in your browser and turn on the #enable container Querys flag. This will support the contain property, as well as @container, inline size and block size values, and layout grid implementations.

Scoped style

To improve container queries, the CSS working group is also actively discussing scoped styles to help provide components with proper namespaces to avoid collisions.

Scoped styles allow passing and component-specific styles to avoid naming conflicts, and many frameworks and plug-ins (such as CSS modules) already allow us to do this within frameworks. This specification now allows us to write native-wrapped styles for components in readable CSS without adjusting the markup.

/* @scope (
      
       #) [to (
       
        #)]? {... } * /
       
      

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */}}Copy the code

Scopes allow us to create “donut shaped” selectors, where we can specify where to encapsulate styles and where to break out of scope to use global styles.

One example is the TAB panel, where we want the TAB to have a range style and the panel within the TAB to have a parent style.

Response based on dimensional shape

In the new era of responsive design, the next topic to be discussed is the shift in size and the increasing likelihood that we, as a web community, will need to design for it (such as morphing screens or virtual reality).

Foldable or flexible screens, designed for this screen span, are an example of the change in form we can see today. Screen extension is another specification being studied to cover these new sizes and requirements.

An experimental cross-screen media query can help. Its current behavior is as follows: @media (span:

). The demo sets up a grid layout with two columns: one column is –sidebar Width, which is 5REM by default, and the other column is 1FR. When viewing the layout on a dual screen with a single vertical collapse, the –sidebar Width value is updated with the left-collapsed environment value.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
}
Copy the code

This will enable a layout where the sidebar (navigation in this case) will fill one of the folded Spaces and the APP UI will fill the other. This prevents “creases” in the UI.

Video presentation

You can test the foldable screen in Chrome’s DevTools emulator to directly debug the display of the extensible screen in the browser.

conclusion

Exploring UI design beyond flat screens is another reason container query and style scope is so important. They give you the opportunity to isolate component styles from page layouts, global styles, and user styles for a more resilient response design. This means that you can now design macro layouts using page-based media queries, including cross-screen nuances. At the same time, a micro-layout with container queries is used on the components, and media queries based on user preferences are added to achieve a customized experience based on the unique preferences and needs of users.

That’s the new response.

It combines macro and micro layouts and, most importantly, takes user customization and size into account.

Any one of these changes would constitute a major shift in the way we design the Web. But together, they represent a huge shift in how we conceptualize even responsive design. It’s time to think about responsive design that goes beyond viewport size, and start thinking about all these new directions for better component-based and customizable experiences.

The next era of responsive design is here, and you can start exploring it yourself.

Web.dev /learnCSS (original author AD)

Now, if you want to brush up on your CSS skills, or brush up on some basics, my team is launching a new, completely free CSS course and resources on Web.dev. You can access it via web.dev/learnCSS.

I hope you enjoyed this overview of the next era of responsive design and some of the concepts that come with it, and that you’re as excited as I am about what it means for the future of Web design.

The reporter

The author of this article explains the latest responsive concept from a design perspective. These new concepts, standards, and demonstrations are impressive.

Back then, the responsive Bootstrap framework popped up in 2012, reimagining how web pages were laid out in the browser. To this day, the classic CSS framework is still out of date, and its rigorous style writing and hierarchy are worth studying closely. These days. With the rapid development of hardware, the STANDARD of W3C specification is also progressing steadily in the direction of normalization. The wider front end is coming to every user and developer.

The responsive ideas the author points out in many directions are forward-looking. Whether it’s user-based customization or container-responsive microlayout, the CSS standards team has cleared the way for developers and designers to make a difference.

CSS, as one of the front-end three musketeers, has also spent a long time with the front-end coder. For this language, we must also love to hate it. While Javascript and Typescript have grown rapidly, CSS learning has been relatively underrepresented. The language is really easy to get started with. Just look at the W3C website for an hour and you can write some normal layouts. But in the interview process, who can confidently claim to be proficient in CSS? But to become a qualified front-end engineer, the developer closest to the user, in-depth learning of the language is still a stiff threshold.

Admittedly, in the rapid development of the Internet today, the actual demand scenario of most companies is still business driven. Probably the vast majority of project iterations don’t even involve responsive layout considerations, at most a simple display adaptation using REM. Maybe the designer is not on the same side of development, or maybe the product doesn’t care about it. But we should not stop this convenient thinking, active communication and communication, and incorporate and extend w3c specifications and Caniuse-compliant standards into requirements discussions and interaction design.

After all, using your own talent and code to create a robust and lively web application is the ultimate goal.