CSS User Preference Media Features
Beyond prefers-color-scheme, CSS offers several other media features that allow you to adapt your website to the user's system preferences regarding motion, contrast, data usage, and transparency. These are crucial for accessibility and user experience.
1. prefers-reduced-motion
This feature detects if the user has requested the system to minimize the amount of non-essential motion it uses.
no-preference: The user has not made a preference known.reduce: The user prefers less motion.
Usage: You should use this to disable or simplify animations for users who might experience motion sickness or vestibular disorders.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}2. prefers-contrast
This feature detects if the user has requested the system to increase or decrease the amount of contrast between adjacent colors.
no-preference: The user has no preference.more: The user prefers a higher level of contrast.less: The user prefers a lower level of contrast.custom: The user has forced a specific set of colors.
Usage: Increase the contrast of text, borders, and other UI elements.
@media (prefers-contrast: more) {
body {
background-color: black;
color: white;
}
.btn {
border: 2px solid white; /* Make borders clearer */
}
}3. prefers-reduced-transparency
This feature detects if the user has requested the system to minimize the amount of transparent or translucent layer effects used.
no-preference: The user has no preference.reduce: The user prefers reduced transparency.
Usage: Replace semi-transparent backgrounds (like glassmorphism/blur effects) with solid colors to improve readability.
.glass-panel {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
}
@media (prefers-reduced-transparency: reduce) {
.glass-panel {
background: white; /* Solid background */
backdrop-filter: none;
}
}4. prefers-reduced-data
This feature detects if the user has a preference for being served less data (e.g., "Data Saver" mode on mobile).
no-preference: The user has no preference.reduce: The user prefers to save data.
Usage: Avoid loading heavy assets like large background images, custom fonts, or autoplaying videos.
.hero {
background-image: url('high-res-image.jpg');
}
@media (prefers-reduced-data: reduce) {
.hero {
background-image: none;
background-color: #333;
}
}programming/css/css programming/css/prefers-color-scheme programming/css/responsive-design