Karl Castillo
Posted on March 10, 2020
-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.
Posted on March 10, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.