website design in the world of components

mnnuman27@

Responsive web design is a science that has been developed since 2010 and has been continuously developed using the concept of Media Queries until the present day.  What does this article have? Show google design google design pictures of the development of CSS from the past to the present This article is taken from a Google video from the recent Google IO 2021 event. Let's read a summary and see what the new CSS Responsive concept will have added. Are we in a new era of Responsive web design now!!!??? Normally, we think that responsiveness will be designed by using Media queries to resize and change the size of the UI on the screen from Desktop, Tablet, Mobile. Nowadays, we think about designing websites that adapt to all screen sizes. But I didn't think about placing the Responsive into a single component. In the modern era of new design, when we started to have a design system come in, our work has changed.


It has become more common for us to use component-based design concepts. This means that we no longer work with Phone Number List page-based concepts like before. Therefore, we are in an era where the concept of Grid CSS has changed to a new way of writing. and update new sources in the latest era The concepts in order are as follows: User preference-based media queries Container queries Form Factor in this section has a new Media queries for Foldable screens as well. 1. What are user preference-based media queries? That is, we designed it to support the preferences of users. See what screen size our website readers prefer. What is the screen scale like? Some people don't like opening it full screen. Some people like mobile phones etc.. accessibility accessibility In CSS like this, we will see what kind of person we look like. Do we like reduce motion? Do we like a lot of movement that makes us dizzy? Or do we like a lot of contrast because we have bad eyesight? Reduce transparency or do we not have a faint style? Etc.




Sometimes the CSS calculation can be pulled straight from your Macbook's settings. For example, if your Mac is set to want inverted colour, the CSS will be pulled and displayed that way on the website page, which is quite advantageous. and answer the questions you want Accessibility color dark mode macbook color dark mode macbook Or, if your Macbook is set to prefer Dark mode, your new responsive CSS can be written based on your computer's settings. Then adjust the color of the web page to your favorite theme immediately, called automatic dark mode. Adjust automatically. Or sometimes change the theme color according to the time during the day, such as morning, noon, and evening.