-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 --
white-on-black. These states except for
active corresponds to 2 specific default settings available for Windows.
A uses case that someone would use this is to set a dark or light version of an image.
prefers-color-scheme allows someone to style their website depending on the user's theme preference --
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 is used to know whether or not the user doesn't want animations or unnecessary movement to be happening on the website --
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.
DEV has over 250k posts
Level up every day