Respect a reduced-motion preference

Css

One rule that disables animation for people who asked their system for less of it.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Download

Web & CSS accessibility motion chris

More in Web & CSS

A semantic, accessible form field Web & CSS The label is tied to the input by id, and the hint is announced with it via aria-describedby. Visually hidden, still read aloud Web & CSS Hides a label from sight while leaving it in the accessibility tree. display:none would remove it from both. Centre a box, two ways Web & CSS Grid is one line. Flex is three and gives you control over the axes separately. Responsive grid without media queries Web & CSS auto-fill with minmax reflows on its own, so the column count follows the container rather than a breakpoint list. Responsive images that do not blow the bandwidth budget Web & CSS srcset lets the browser pick; sizes tells it how wide the image will actually be rendered. Truncate text to a number of lines Web & CSS Ellipsis after two lines. The -webkit- prefixes are still required despite being supported everywhere.

Random picks

Throttle with a trailing call JavaScript Runs at most once per interval but still fires once more after the last event, so the final state is never dropped. Delete duplicate rows, keeping the oldest Databases Uses a window function to number the duplicates and removes everything but the first of each group. Sort and deduplicate lines by a field Text Processing Sorts on the second column and keeps the first row of each group. Follow redirects and show only the headers Networking Traces a redirect chain to its destination without downloading the body. Upsert a row in SQLite Databases Inserts, or updates the existing row when the unique column already holds that value. Show which process is holding a port Shell Answers 'address already in use' without guessing. Count lines of code by extension Shell A quick census of a repository without installing a tool for it. Tail a log and colour only what matters Shell Follows a growing file and highlights errors and warnings, leaving the rest readable but quiet.