User preferences

Iris CSS follows the settings users choose in their system, with no setup.

Preference	What Iris CSS does
`prefers-color-scheme`	Uses the light or dark colors. See themes.
`prefers-reduced-motion: reduce`	Makes Iris CSS transitions 1ms long, so they finish at once but still fire `transitionend`. Smooth scrolling, the skeleton shimmer and the indeterminate progress bar stop. Loading spinners keep turning, since they carry meaning.
`prefers-reduced-transparency: reduce`	Removes the blur behind modals and drawers.
`prefers-contrast: more`	Wider borders on form controls and table headers, a wider focus ring, and rules in the text color.
`forced-colors: active`	Underlines links, borders buttons, drops shadows and uses system colors for focus, disabled text, highlights and icons.

Testing

Browser developer tools can fake each preference. In Chrome and Edge, open the command menu and search for "Rendering", then pick the media feature to emulate. Firefox and Safari have similar settings.

Your own styles

Iris CSS sets its duration and blur variables for these preferences with !important, so your own value for --i-duration cannot bring the motion back. Your own animations are yours to handle: run them only when the user has no motion preference.

@media (prefers-reduced-motion: no-preference) {
  .hero { animation: fade-in 0.6s ease-out; }
}

For motion done with JavaScript, such as a parallax effect, check the same media query.

const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;

Variables

Variable	Default
`--i-contrast-border-width`	`0.125rem`
`--i-contrast-focus-ring-width`	`0.1875rem`
`--i-border-width`	`var(--i-contrast-border-width)`
`--i-focus-ring-width`	`var(--i-contrast-focus-ring-width)`