The good news is, the ecosystem is changing, and it's changing pretty rapidly. CSS is evolving, and a new era of responsive design is right on the horizon. 10 years ago, around 2010-2012, we saw a huge change with mobile and responsive design, and the emergence of CSS3. So it works out that, yet again, the ecosystem is ready for some pretty big changes to happen to CSS. The engineers at Chrome and across the web platform are prototyping, speccing, and starting the implementation for the next era of responsive design. These updates include user-preference based media features, container queries, and media queries for new screen types, such as foldable screens. This means that preference media features allow you to adapt your user experiences to your user's experiences New user preference media features, give you the ability to style web experiences that align with the user's own specific preferences and needs. These user preference media features include: Preference features pick up on the preferences a user has set in their operating system, and help to build a more robust and personalized web experience, especially for those with accessibility needs. Users who have set operating system preferences for reduced motion, are requesting fewer animations when using their computer in general. Therefore, it's likely that they wouldn't appreciate a flashy intro screen, card flip animation, intricate loader, or other flashy animations while using the web. With prefers-reduced-motion you can design your pages with reduced-motion in mind, and create a motion-enhanced experience for those who don't have this preference set. The baseline reduced-motion experience is a crossfade to show that information, while the motion-enhanced experience is a card flip. Prefers-reduced-motion shouldn't mean "no motion", since motion is so critical to conveying information online. Instead, provide a solid baseline experience that guides your users without unnecessary movement, and progressively enhance that experience for your users without those accessibility needs or preferences. Prefers-color-scheme #Īnother preference media feature is prefers-color-scheme.
0 Comments
Leave a Reply. |