Intermediate LevelCSS & Modern Layouts
What user preference media queries exist beyond prefers-color-scheme?
❓ Interview Prompt: Explain prefers-reduced-motion, prefers-contrast, prefers-reduced-transparency, and prefers-reduced-data.
CSS exposes several user preference media queries for inclusive design:
1
`prefers-reduced-motion: reduce`: User prefers minimal animations (motion sensitivity). Disable or simplify all animations.
2
`prefers-contrast: more`: User prefers higher contrast. Increase border/text contrast.
3
`prefers-reduced-transparency: reduce`: User prefers opaque elements. Replace translucent overlays with solid backgrounds.
4
`prefers-color-scheme: dark`: User prefers dark theme.
5
`prefers-reduced-data: reduce` (experimental): User prefers less data usage. Skip loading heavy images/fonts.
Code Implementation Example
css
/* Remove all animations for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Increase contrast for users who need it */
@media (prefers-contrast: more) {
.muted-text { color: #000; }
.card { border: 2px solid #000; }
}💡Accessibility media queries for motion and contrast preferences.
🎯 Interview Key Takeaway
Always implement prefers-reduced-motion. It is a WCAG accessibility requirement, not optional.
#Accessibility#User Preferences#Media Queries#Intermediate
Back to all CSS & Modern Layouts Questions→