Media Query

prefers-color-scheme.md

prefers-color-scheme

Light mode

@media (prefers-color-scheme: light) {
    html {
        background: white;
        color: black;
    }
}

Dark mode

@media (prefers-color-scheme: dark) {
    html {
        background: black;
        color: white;
    }
}

Defaults

:root {
    --color-scheme-background: pink;
    --color-scheme-text-color: red;
}

/* Light mode */
@media (prefers-color-scheme: light) {
    :root {
        --color-scheme-background: white;
        --color-scheme-text-color: black;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color-scheme-background: black;
        --color-scheme-text-color: white;
    }
}

/* Usage */
html {
    background: var(--color-scheme-background);
    color: var(--color-scheme-text-color);
}

html {
    content: ""; /* (ab)using the content property */
}

With JavaScript

/* Light mode */
@media (prefers-color-scheme: light) {
    html {
        content: "light"; /* (ab)using the content property */
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    html {
        content: "dark"; /* (ab)using the content property */
    }
}

const mode = getComputedStyle(document.documentElement).getPropertyValue('content');

prefers-reduced-motion.md

prefers-reduced-motion

.animation {
  animation: vibrate 0.2s; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

supports.md

CSS @supports

@supports(prop:value) {
	/* more styles */
}

Basic Property Checks

@supports (display: flex) {
	div { display: flex; }
}

not Keyword

@supports not (display: flex) {
	div { float: left; } /* alternative styles */
}

Multiple Checks and Conditionals

/* or */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
    /* use styles here */
}

/* and */
@supports (display: flex) and (-webkit-appearance: caret) {
		/* something crazy here */
}

/* and and or */
@supports ((display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex)) and (-webkit-appearance: caret) {
    /* use styles here */
}

JavaScript CSS.supports

var supportsFlex = CSS.supports("display", "flex");

var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");

var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);

@supports Usage

section {
	float: left;
}

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
    	display: flex;
    	float: none;
    }
}