CSS :: Media queries

You’ll likely be accustomed to using media queries to detect the width and height of the viewport, and the type of media (most commonly screen or print). The level 5 Media Queries specification brings us some newer media features to (optionally) test for, which are already supported in some browsers. These offer some great benefits for accessibility.

Users with vestibular disorders, and those who suffer from motion sickness, may not appreciate web pages with a lot of motion, such as animations and parallax scrolling effects. Using the prefers-reduced-motion media query, we can provide users who opt out with a reduced-motion alternative.

.my-element {
	animation: shake 500ms ease-in-out 5;
}
@media (prefers-reduced-motion: reduce) {
	.my-element {
		animation: none;
	}
}

It’s becoming increasingly popular for websites to provide an alternative dark theme. Prefers-colors-scheme allows us to query whether the user has set a system-wide preference (using the keywords dark, light, or no-preference), and show the appropriate colour scheme accordingly.

/* Media queries 02 */
body {
	background: linear-gradient(to 
	bottom, #b5faff, #ffe2b4);
}
@media (prefers-color-scheme: dark) {
	body {
		color: white;
		background: linear-gradient(to 
		bottom, #0c1338, #3e3599);
	}
}

Leave a Reply

Your email address will not be published. Required fields are marked *

*