oficiodesign / initial-css

MIT License
4 stars 1 forks source link

Accessibility media rules #61

Open robsonsobral opened 5 years ago

robsonsobral commented 5 years ago

Original report by sobral (Bitbucket: sobral, GitHub: robsonsobral).


From https://github.com/csstools/sanitize.css/issues/194

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

robsonsobral commented 5 years ago

Original comment by sobral (Bitbucket: sobral, GitHub: sobral).


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

robsonsobral commented 3 years ago

Original comment by sobral (Bitbucket: sobral, GitHub: sobral).


Or/and:

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}