The sidebar becomes a top bar with more space, and we see the layout look more like the primary inbox. If you adjust the page size and layout, the components respond to their individually allocated space. This is the exact same component within the page, just appearing in different viewsīecause we have a container query, the styles of these components are dynamic. The emails within them adjust their grid layout and show or hide the email timestamp based on available space. In the following inbox example, the Primary Inbox and Favorites sidebar are both containers. Container queries, on the other hand, are a more precise tool that can support any number of layouts or layouts within layouts. Media queries can only access and leverage information from the viewport, which means they can only work on a macro view of a page layout. They allow you to query a parent element’s size and style to determine the styles which should be applied to any of its children. Container QueriesĬontainer queries recently became stable across all modern browsers. New platform features let you build logical interfaces with components that own their responsive styling information, build interfaces that leverage system capabilities to deliver more native-feeling UIs, and let the user become a part of the design process with user preference queries for complete customizability. Let’s get started with some new responsive design capabilities. Here are 20 of the most exciting and impactful features that landed recently or are coming soon: ![]() New platform capabilities have landed with tight cross-browser adoption that support more web capabilities and customization features than ever. ![]() ![]() The past few months have ushered in a golden era for web UI.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |