Beyond screen sizes, responsive design in 2020. Heart internet article

cheap-dark-mode.css

@media (prefers-color-scheme: dark) {
  :root {
    background: #111;
    filter: invert(1) hue-rotate(180deg);
  }

  img,
  video {
    filter: invert(1) hue-rotate(180deg);
  }
}

cheap-reduced-motion.css

@media (prefers-reduced-motion: reduce) {
  body *,
  body *::before,
  body *::after {
    animation: none !important;
    transition: none !important;
    transition-duration: none !important;
  }
}

environment-blending.css

@media (environment-blending: opaque) { }

@media (environment-blending: additive) { }

@media (environment-blending: subtractive) { }

envs.css

body {
  padding:
    env(save-area-inset-top, 0px)
    env(save-area-inset-right, 0px)
    env(save-area-inset-bottom, 0px)
    env(save-area-inset-left, 0px)
}

interaction.css

@media (hover: none) and (pointer: coarse) {
  /* you're on a touch-only device */
}

@media (hover: none) and (pointer: fine) {
  /* you're on a device without hover but with a stylus
     or other fine pointing device */
}

@media (hover: hover) and (pointer: coarse) {
  /* you're on a device with hover but a coarse pointer, 
     like a gamepad or wii remote*/
}

@media (hover: hover) and (pointer: fine) {
  /* you're on a device with a mouse or trackpad */
}

inverted-colors.css

@media (inverted-colors: none) {
  /* colors are normal */
}

@media (inverted-colors: inverted) {
  /* colors are inverted */
}

light-level.css

@media (light-level: dim) { }

@media (light-level: normal) { }

@media (light-level: washed) { }

ms-high-contrast.css

/* ms high contrast */

@media (-ms-high-contrast: active) { }

@media (-ms-high-contrast: black-on-white) { }

@media (-ms-high-contrast: white-on-black) { }


/* forced colors */

@media (forced-colors: none) { }

@media (forced-colors: active) { }

network-information-api.js

const connection =
  navigator.connection ||
  navigator.mozConnection ||
  navigator.webkitConnection;

if (
  connection.saveData ||
  ['slow-2g', '2g', '3g'].includes(connection.effectiveType)
) {
  /* data-saving measures like not preloading videos */
  preloadVideo = false;
}

prefers-color-scheme.css

@media (prefers-color-scheme: dark) {
  /* wants dark mode */
}

@media (prefers-color-scheme: light) {
  /* wants light mode */
}

prefers-contrast.css

@media (prefers-contrast: high) { }

@media (prefers-contrast: no-preference) { }

@media (prefers-contrast: low) { }

prefers-reduced-data.css

@media (prefers-reduced-data: reduce) { }

@media (prefers-reduced-data: no-preference) { }

prefers-reduced-motion.css

@media (prefers-reduced-motion: reduce) {
  /* wants reduced motion */
}

@media (prefers-reduced-motion: no-preference) {
  /* doesn't want reduced motion */
}

prefers-reduced-motion.js

const video = document.createElement('video');
const canAutoPlay = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;

video.setAttribute('autoplay', canAutoPlay);

prefers-reduced-transparency.css

@media (prefers-reduced-transparency: reduce) { 
  /* wants reduced transparency */
}

@media (prefers-reduced-transparency: no-preference) {
  /* doesn't want reduced transparency */
}

viewport-cover.html

<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />