-ms-high-contrast
-ms-high-contrast is a Windows-only media query used to set styles when the high contrast setting is active. The media query has 3 states -- active, black-on-white and white-on-black. These states except for active corresponds to 2 specific default settings available for Windows.
Accessibility Use Case
A uses case that someone would use this is to set a dark or light version of an image.
prefers-color-scheme
prefers-color-scheme allows someone to style their website depending on the user's theme preference -- light, dark or no-preference.
Accessibility Use Case
Some people are sensitive to light and it's possible that the user has set their preferred colour scheme to either light or dark. With this query, the website can automatically select a dark or light theme for the user when they visit the website.
prefers-reduced-motion
prefers-reduced-motion is used to know whether or not the user doesn't want animations or unnecessary movement to be happening on the website -- reduce or no-preference.
Accessibility Use Case
Someone who's sensitive to too much movement might want less animations happening on the website. The website might pause any videos being played by default when someone comes to the website.
Top comments (0)