As in for the animation: none? I think (and I haven’t tried it) that the other selectors are more specific and may not turn off the animation - also there may be other things you want to stop too, such as transitions and even layout changes if they make less sense without motion!
@@SuperHi yes, the animation: none But in this particular example, you are getting rid of all the animations present on the page. If you had a site with a ton of pages and many animations, and you want to get rid of all if them, why then comb through the stylesheet to find every single selector to remove their animations, when you could just select all of the html? This should be lookd into, as well as the responsible use of animations.
Ah yeh, it's because of the specificity of CSS... doing something like section {} is more specific than * {} so it won't overwrite the animation, so you have to essentially list out the selectors animation is applied to. I did a test over here: codepen.io/riklomas/pen/oNJzBQV I suppose a good analogy is that div.whatever {} is more specific than div {} so even if you put it further down in your CSS, or in a media query, it will still listen to the div.whatever {} style. Just one of the ways that CSS works!
Wow, this is insanely useful on a practical level
Glad it was helpful! More coming soon!
wouldn't it be more efficient to just select the entire html for the reduced motion?
As in for the animation: none? I think (and I haven’t tried it) that the other selectors are more specific and may not turn off the animation - also there may be other things you want to stop too, such as transitions and even layout changes if they make less sense without motion!
@@SuperHi yes, the animation: none
But in this particular example, you are getting rid of all the animations present on the page. If you had a site with a ton of pages and many animations, and you want to get rid of all if them, why then comb through the stylesheet to find every single selector to remove their animations, when you could just select all of the html? This should be lookd into, as well as the responsible use of animations.
Ah yeh, it's because of the specificity of CSS... doing something like section {} is more specific than * {} so it won't overwrite the animation, so you have to essentially list out the selectors animation is applied to. I did a test over here: codepen.io/riklomas/pen/oNJzBQV
I suppose a good analogy is that div.whatever {} is more specific than div {} so even if you put it further down in your CSS, or in a media query, it will still listen to the div.whatever {} style. Just one of the ways that CSS works!