Surveys / State of CSS 2023
This survey closed on July 15, 2023. View Survey Results »

6/13Accessibility

  1. prefers-reduced-motion
  2. prefers-color-scheme
  3. prefers-reduced-data
  4. color-scheme
  5. prefers-contrast
  6. forced-colors
  7. :focus-visible

css 
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

css 
@media (prefers-color-scheme: dark) {
  .foo {
    background: #333;
    color: white;
  }
}

css 
@media (prefers-reduced-data: reduce) {
  body {
    font-family: system-ui;
  }
}

css 
.foo {
  color-scheme: light dark;
}

css 
@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}

css 
@media (forced-colors: active) {
  .button {
    border: 2px green solid;
  }
}

css 
.focus-visible-only:focus-visible {
  outline: 2px dashed darkorange;
}