Possible Addtion: @media(prefers-reduced-motion: reduce)

[bedax]

Hello, I'm comparing css normalizers, and sanitize.css seems to be pretty ideal. However, there is a part of this one which seems like a good idea:

@media(prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

Perhaps it's worth adding to this?

[bedax]

And this one:

*:focus:not(:focus-visible),
*::before:focus:not(:focus-visible),
*::after:focus:not(:focus-visible) {
  outline: none;
}

[markhughes]

Do you know why it requires !important?

[bedax]

@markhughes I'm guessing it's due to css' specificity, if you import a reset.css that contains the above without !important, then any styles with more specific selectors (such as any that come after) will not be affected by the reset. But the idea of above rule is that it enables to the user's preference to disable animation, so you don't want anything to be unaffected, even if it has a more specific selector.

[markhughes]

Makes sense! Thanks!

[clarfonthey]

Thinking more about this, I think that adding !important rules here is a bit much.

I agree that this is a good safety against devs who don't know what they're doing, but there are still cases where easing and small animations are better than none, even for people who prefer reduced motion.

One good example is colour changes-- these aren't "motion" but still require transitions and animations. Fading into a colour can be a lot less jarring than switching to it immediately, and the perception of motion can actually be increased by the lack of an animation, which would be counter to the original plan.

[bedax]

!important isn't there as "safety against devs who don't know what they're doing", it's there because without it the rules are useless. The rules have low specificity, and so they would be overridden by anything that comes after.

As for the example, I understand why developers add transitions, but if a user has asked for reduced motion, then motion should be reduced, 'preferably to the point where all non-essential movement is removed'.

If removing transitions makes it jarring, consider reducing the difference between the states, or better yet don't change the colour at all if the user prefers reduced motion. If you have a situation where you are sure transitions are a good idea, then apply !important to them and they will override given the selector's low specificity.

[clarfonthey]

That's very fair-- when I made that comment I completely wasn't thinking that !important overrides !important. So, you were right there and I wasn't.

In terms of reducing colour contrast, that's actually against web accessibility guidelines, as there should still be high contrast between differing states-- but you're right that there are other options if necessary.

[markhughes]

Note that adding !important breaks regulations with quite a lot of services, including Google AMP.

[jonathantneal]

• After looking into :focus-visible, it looks like :not(:focus-visible) may become a user agent default if and when browsers add it. Since no browsers fully support it, and Firefox has proprietary implementation that matches the expectation we would want, that means this CSS is likely redundant and not future-proof.
• After looking into various prefers-reduced-motion styles, these will be added in a separate reduce-motion.css file in the next version.

[jonathantneal]

Added in a1eb7bc