( Cheerful music) Hi everyone, I am a developer partnership technologist on the Una Kravets Google Chrome team. Today I want to talk to you about adaptive layout. Now when it comes to adaptive design, our view on it is like this. We will Consider use media inquiries to deepen the organization. Adjust the design size from mobile machine width to tablet size, or desktop manoeuvre size.But soon, this view may become outdated.Just like working components such as counters in sheet layouts. There are a lot strong tools that supportviewport-based media inquiries, but they also shortfall countless advanced capacities. We cant respond to user needs and cant inject adaptive forms into the component itself. In this video, the factor I represent refers to the elements Elements composed of other factors, such as posters or sidebars, constitute a web page. We can be utilized world viewport informationto layout the vogues of these components, but they still dont have their own forms. And when our designing organisation is based on factors instead of pages, the above method is Thegood news is that this ecosystem is changing and changing very fast.CSS is constantly evolving. A new era of adaptive blueprint is coming. We see that this happens about formerly every 10 years. From 2010 to 2012 or so, mobile designs and adaptive motif have undergone awesome changes and CSS3 has appeared. It seems that the same thing will happen again. The ecosystem is ready fora brand-new round of major changes in CSS. Chrome and the part web stage Of architects are prototyping and developing specifications for the next adaptive layout era and are beginning to implement such updates, including media inquiry container queries based on user preferences and media queries for brand-new screen kinds such as foldable screens.Lets talk about some of the new Technology and what it means to respond to user acts, container and invention kinds Let us start from responding to user activities. New favor media inquiries enable us to design web experience styles that match the specific penchants and needs of users. This meant that preferred media inquiries allow you You canadjust the user experience you can provide according to the user’s actual experience. Such wish inquiries includeprefers-reduced-motion, prefers-contrast prefers-reduced-transparencyprefers-color-scheme, inverted-colors, and more experimental predilection queries It helps to create a more powerful and personalized web experience, particularly for useds with accessibility needs, and they are consistent with operating system predilections. For example, customers who adjusted operating system preferences to reduce dynamic results may notusually use computers.They like fancy livings. Therefore, they are not able like liking poster turning livings when using web pages., Complex loadersor other illusion animation effects. We can consider reducing the dynamic results in order to develop the page and creating an enhanced dynamic result know for users who do not have this penchant giving. As shown in the figure, we have a card with information on both sides. As a benchmark, its own experience of crippled dynamic gists is increased by fading in and out to display the information on the back. The utilize of placard flip-flop prefers-reduced-motiondoes not mean that there is no dynamic outcome because dynamic outcomes is important for communicating information online. On the contrary, make sure to provide some Excellent benchmarking experience to guide your users, and gradually enhance the user experience for customers who do not have accessibility needs or predilections. Another favor media queryis prefers-color-scheme. This inquiry allows you tocustomize your topic based on user wishes. Interface users can positioned wishes for light, dark, or automatic topics on the desktop or portable manoeuvre operating system. The automated themes can change according to different times of the working day. The preferences-color-schemeare very interesting media inquiries because you really You can be imaginative when designing themes.This is a new way of boundary designing that allows you to show your firebrand from another angle( drumming ). It will be very helpful if you use CSS custom properties to set the page exchange color costs. You only need Update the shade theme importances such as the background shade and the central verse color to dynamically adjust to the brand-new theme in the preference query. In order to better to research some of the preference inquiries more conveniently, you can use DevTools to simulate instead of opening the system predilections every time.However, When designing a nighttime theme, be aware that this is more than merely changing the background and verse emblazons. Some things you may not pay attention to. For example, you may need to reduce the colouring saturation on a dark background to deteriorate the visual pulse. In order to better to stimulate these components stand out, you It may be necessary to use illuminated colors in part background hues instead of shadows to present a sense of penetration. This is because shadows do not work well on twilight backgrounds. Material Designprovides some good guidelines for designing dark themes on Material.io Dark themes can not only provide a more personalized consumer event, but also greatly extendthe battery life of manoeuvres with AMOLED screens. Newer high-end phones will be implemented by this screen. They are becoming more and more popular in portable devices. A related pitch-dark color in 2018 The themesAndroid research shows that, will vary depending on the screen brightness and the overall interface, it can save up to 60% of the battery. This statistic comes from the YouTube screen where the video is paused. The obscurity topic and the light theme are applied when the screen brightness is 100 %. Comparison of lotion boundaries. Therefore, you should try to provide users with a dark theme event. One of the most exciting emerging areas of CSS is container query, which is also commonly referred to as element query. Adaptive design from page-based The transformation to container-based will have an inestimable impact on the development of the design ecosystem. The following lesson shows the potent capacities that container queriescan provide us. We can manipulate any element wording of this card, including association indices, typeface sizes, and vogues based on it. The overall layout of the parent container. In this sample, we have two identical ingredients. They have the same label but different receptacle sizings. Both components occupy infinite in the CSS grid layout but each can adapt to a unique space allocation.Then adjust your own style accordingly. This kind of flexibility can not be achieved by relying exclusively on media inquiries. This allows us to perform adaptive design more dynamically. That is to say, we can now place this poster constituent in the sidebar or the main banner area or plaza it. In the grid in the body of the page and the ingredient itself has adaptive information, we use the @ container attribute to achieve this. It is similar to using @ media’s media query, but @container inquiries the information of the parent container instead of the world viewport and user. Agent First, we need to set the containment on the mother component. Then we can write @ container queryto use min-widthor max-width to design the mode according to the size of the element in the container.In this sample, we use max-width toset the links Set to expose: none and abbreviate the font-size in time when the receptacle width is less than 850 px. Tells take a closer look. This is a demo version of the embed website. Each produce card includes products in the main banner section and recent sidebar. The examined produces and the commodity grid are identical components with the same markup. This entire layout does not use media inquiries, only container queries. This allows each product to be adjusted to fit the appropriate layout and fill the organization cavity. For example, in the grid expanse, we use the maximum/ minimum line layout tolet the elements flow into the corresponding space and re-layout the grid when the seat is too contracted, which means to reach the minimum size.This is the product grid when there is at least 350 px of room in the grid.The card organization will become horizontal. Themethod is to set the display to flex. The default flex guidance is that the row opening is smaller, and the produce posters can structure a stack.Each commodity card can adjust its own style. If you merely rely on the world-wide vogue and the viewport vogue, it cannot be done. The container inquiry up to this point allows us to truly implementcomponent-based style design. This is really great.Container query has numerous squander occasions, including docket ingredients. You can use container queryto re-layout docket events and other based on the available extent of both parents receptacle. As shown in the video, we use container queries to change the organization and mode of the dates and day of the week on the docket and adjust the margins and typeface sizings of these scheduled episodes to better fit the scheme seat. Then, we use media inquiries to Adjust the entire layout to fit a smaller screen size. This example shows how powerful it is to combine media queriesusing container inquiries to adjust global wordings or macro vogues, and to adjust container child ingredients and micro styles. Therefore, we can consider the same Use macro and micro organizations in boundary constituents to originate very subtle design decisions.You can now try out these demo versions througha emblem of the Chrome Canary version. Enter chrome :// flags in the URL bar of the Canary version to access and enable #enable-container -queries flag This will enable support for the @container, inline-sizeand block-size importances of the contain peculiarity and the LayoutNG Grid implementation. I ought to have experimenting with receptacle inquiries when you are creating these demos.Seriously, I discovered them in the browser The strong perform implemented, it feels immense. Now you can also try toenable the badge. Try @ receptacle, and tell us what you think. Remember, because the container query is still under development, you may encounter some flaws in order to better to query in the container The CSS team is also actively discussing scope styles to help ensure proper namespacesand scaped component vogue conflicts. Scope styles give pass-throughand component-specific style design to avoid such name conflicts such as CSS modules. Countless structures and plug-ins have enabled us to do this within the framework. With this specification, we are nowable to use understandable CSS to write neighbourhood packet wordings for components without adjusting the markup or use the framework. This is also the finalization of the specification, Chrome The work scope that will be prioritized will allow us to create doughnut-shaped selectors.We can specify where to keep the encapsulated wording and where to go out of the scope styleto re-reference a more world wording. An sample of this is the tab page. Panels. We miss the invoices to gain scoped wordings and the panels within the invoices to gain world forms. In this video about the new adaptive motif epoch, the last point I want to talk about is the change of device categories and what we need to design as an online community. Keep in subconsciou that these are new things. There are many things to consider about how design kinds will develop in the future. For example, what happens when we bring CSS into the virtual world? Foldable screens or flexible screensand cross-screen designings are an example of the machine kind transitions that we can observe today. screen-spanning is another specification under developmentto cover these brand-new maneuver sorts and requirements. It can be used in inquiries. Experimental media inquiries to achieve screen-spanninglike @ media Then, in( span 🙂 we provide a grid layout with two pieces. One sidebar width is variable, the default is 5rem and the other is 1fr. When we have one For a single vertical folding doubled screen, we need to update the variable cost of the sidebar width through the fold-left environment value. This allows us to create such a layout where the sidebar, in this case, means that the sailing prohibit is filled with one of the folds The employment interface completes another spaceto prevent the boundary from creases.This is the actual outcome. Now, you can test the foldable screen in the Chrome DevTools emulator to debug immediately in the browserand play cross-screen prototyping. Explore the plane Interface design outside the screen is another reason why container inquiries and scope vogues are so important. They render us the possibility of being separate ingredient vogues from sheet layout world-wide wordings and user styles to achieve more flexible adaptive pattern. This conveys, We can now usepage-based media queries to design macro organizations, including cross-screen nuances and micro-layouts.Use receptacle inquiries on components and media inquiries based on user advantages to customize the user experience according to users unique preferences and needs. This is The adaptation of the new era integrates the macro layout with the micro layout. The most important thing is that it also takes into account user customization and manoeuvre forms. Now, even just one of the changes will bring about a huge change in the way of network design.Together, it recognizes a truly significant change in how we conceptualize adaptive blueprint. Now we should think about adaptive blueprint beyond the viewport and begin to consider all these brand-new parts to create a better component-based personality. The next era of adaptive layout has arrived. You can explore now. Now, if you want to improve your CSS level or scrutinize some basic knowledge, my unit has propelled a new and completely free CSS course and remark on web.dev Resources can be accessed through web.dev/ learnCSS. There are a total of 24 modules, including demos, the examinations and lessons involving many CSS topics such as emblazons, organizations, Z indicator scrolling, etc.You can start from the beginning, browse each module one by one, or you are eligible to encounter Please refer to this page when you have CSS questions or corrects. We are very happy to launch the “Learn CSS” course to help you increase your knowledge of web style design. So, retain to checkthe Learn CSS on web.dev. Hope you like ittoday. A brief introduction to the era of adaptive pattern and some basic content related to it. I too hope that you are as roused as I am about the importance of all this for future entanglement design. It makes great opportunities for our interface society so that we can get in touch with Component wording, brand-new machine kind, and generate user-adaptive experience.I am eagerly looking forward to seeing your work( joyful music ).
