Best practices - CSS Tutorial

- [Illustrator] When animating on the web, you should keep performance and accessibility in mind. There are a few things you can remember that will help keep your animations performance and be accessible to all users on the web. First, you should know that there are a lot of CSS properties that you can animate, but that doesn't mean that you should. If we go to Mozilla's web docs, we can see all the animatable CSS properties. And there are a lot of them. All modern browsers go through a rendering pipeline when processing CSS. The browser runs through styles, layout, paint, and then composite when rendering. You go here to www.csstriggers.com you can see layout, paint, and composite. This is what we're going to show for the CSS properties and what they actually trigger when you animate them. So these are the different kinds of browsers, and these are like gecko based browsers or web kit so you have Firefox or Chrome and what they actually trigger when you animate these properties. Now we said, opacity is the most reformat. You can see all these other ones pretty much trigger most things. So an opacity, if I have her over here, you're going to see opacity changing opacity does not trigger any geometry changes, which is good but since it's a visual property, it will cause painting to occur in some of the browsers. Painting is typically a super expensive operation so you should be cautious. Within Firefox it's not going to trigger anything besides the composite and with the newer web kits as well. When you animate, you want to try to only affect the composite layer of the rendering pipeline. Modern browsers can animate TSS transforms and opacity cheaply. All other properties, either cause the browser to perform a new layout or a new paint of the browser. Every time you animate the property. Now this may seem limiting, but transforms an opacity can actually do a lot, but you can animate the other properties as well, but you want to be mindful of what they cost, especially if you're going to have a lot of animations on a website, keeping in mind that layouts and new paints of the browser, every single time you animate are not cheap and it is going to cost performance. Besides performance, there are also several accessibility concerns you should be aware of when creating animations for the web. A good amount of people have some form of vestibular disorders. The vestibule system is responsible for sensory information processing and spatial orientation. People with this disorder may experience motion sickness, balance problems, chronic dizziness, headaches, and nausea when watching animations on the web. Let's look at what we can do so we still use animations, but keep accessibility in mind for our users. First, consider the size of an animation and its motion. Small animations on Hover, like a color change to a menu item won't cause issues for most people. If you're creating bigger animations, like whole components animating and on scroll, you will have more users who can not use your site. One example of a large-scale animation that causes problems for users is parallax scrolling. This concept moves the foreground and background at different speeds and can cause many of the symptoms mentioned before. You can still use this concept, but be mindful of how much movement is happening and how subtle the animation is on scrolling. Also be sure not to use scrolljacking. Which is when you take control of the scroll bar away from the user. Another way you can help users is by using the CSS property prefers-reduced-motion. This is a CSS media feature that is used to detect if the user has requested that the system minimize the amount of nonessential motion it uses.