User preferences

[Malvoz]

Add a new section/category (perhaps "User preferences") to help developers apply CSS with respect to the users preferences, such as prefers-contrast or prefers-reduced-motion?

https://drafts.csswg.org/mediaqueries-5/#mf-user-preferences

[cehfisher]

That's a good idea! Will add it to the feature list. If you have any ideas on what all should be in this section, please share.

[Malvoz]

Here's one example:

https://a11yproject.com/posts/understanding-vestibular-disorders/

/* Some random application animations, transitions & transforms. */

img {
  animation: slidein 3s;
}

@keyframes slidein {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }
}

button {
  transition: transform 1s;
}

button:focus,
button:hover { 
  transform: rotate(360deg);
}

/* Disable the above if the user has explicitly opted-in for reduced motion in their browser settings. */

@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  
}

[Malvoz]

Mozilla's CSS Remedy has a more fleshed out version of the above example implementation in https://github.com/mozdevs/cssremedy/blob/master/css/reminders.css#L31-L48

Also I should've been more descriptive why this is needed (the a11yproject.com link explains it well though) - the snippet is meant to ease the web experience for all users who prefers reduced motion, in some cases because they suffer from motion sickness.