Media Queries can also be used to help users with disabilities understand your website better.
Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.
Also, this method of switching animation off according to the user's preference can also benefit users with low battery or low-end phones or computers.
no-preference
Indicates that the user has made no preference known to the system.
reduce
Indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.
This example has an annoying animation unless you turn on Reduce Motion in your accessibility preferences.
<div class="animation">animated box</div>
.animation {
-webkit-animation: vibrate 0.3s linear infinite both;
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}
非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。
-ms-high-contrast CSS media feature 是 Microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.
This will help not only users with low vision and contrast sensitivity issues but also users that are working on a computer or phone with direct sunlight.
-ms-high-contrast
media feature is specified as one of the following values.
active
Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation.
black-on-white
Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a black-on-white color variation.
white-on-black
Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a white-on-black color variation.
The following declarations will match applications that are being displayed in high contrast mode with any color variation, a black-on-white color variation, and a white-on-black color variation, respectively.
@media screen and (-ms-high-contrast: active) {
/* All high contrast styling rules */
}
@media screen and (-ms-high-contrast: black-on-white) {
div { background-image: url('image-bw.png'); }
}
@media screen and (-ms-high-contrast: white-on-black) {
div { background-image: url('image-wb.png'); }
}