--- title: The Four User-Preference Media Queries Your CSS Should Honor description: A practical deep-dive into four user-preference CSS media queries that most developers overlook: prefers-reduced-motion, prefers-contrast, forced-colors, and... canonical: https://daily.dev/posts/the-four-user-preference-media-queries-your-css-should-honor-pnkw8evn5 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The Four User-Preference Media Queries Your CSS Should Honor | daily.dev og:description: A practical deep-dive into four user-preference CSS media queries that most developers overlook: prefers-reduced-motion, prefers-contrast, forced-colors, and... og:url: https://daily.dev/posts/the-four-user-preference-media-queries-your-css-should-honor-pnkw8evn5 og:image: https://api.daily.dev/og/posts/pNkw8EVN5.png og:image:alt: The Four User-Preference Media Queries Your CSS Should Honor og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The Four User-Preference Media Queries Your CSS Should Honor **[Lit](https://daily.dev/sources/lit)** · [@agustinbarrientos](https://daily.dev/agustinbarrientos) · 2 min read · 4 upvotes · 0 comments ## Summary A practical deep-dive into four user-preference CSS media queries that most developers overlook: prefers-reduced-motion, prefers-contrast, forced-colors, and pointer type. Using a Lit-based article card as a case study, the post demonstrates how a visually polished component can still fail real users by ignoring motion preferences, hiding interactive elements from keyboard and touch users, and responding only to viewport width. Six live demos let readers experience each failure mode and its fix, including a hover trap that strands keyboard users. ## Content The Senior Eye is where I **build one small frontend thing carefully and pull out the judgment that separates a senior from a junior**. This one is an article card that **looks finished and still fails real people**. It animates hard when someone asked for reduced motion. It hides the Save button behind hover, so **touch and keyboard users never find it**. If its hero were a large image or video, it would ship in full to someone on a metered connection. The card resizes perfectly as the window narrows, so it feels responsive, but **the only thing it actually responds to is the width of the viewport**. It answers the viewport and **ignores the person**. The same media-query syntax that reports width also reports **reduced motion, a contrast preference, a forced-colors system palette, and what kind of pointer someone is using**. Each one is **an input the user or device already handed you**. The senior skill is reading a media feature as that input and classifying it before styling: **is it a requirement you ship in CSS, an enhancement you layer on, or a signal almost nobody can set**, like `prefers-reduced-data`, that no browser actually supports yet? I built **one typed Lit card that honors motion, contrast, forced colors, and input reachability in pure CSS**, and leaves reduced data to a product-owned setting and asset policy. **Six live demos** let you drag the width slider on the broken card, watch each signal read live, simulate the contrast and forced-colors responses, and **tab through the hover trap to feel it strand a keyboard user**. [**Read the full article here ➡️**](https://agustinbarrientos.com/writing/senior-eye/user-preference-media-queries/) ## Similar posts on daily.dev - [Building a UI Without Breakpoints – Frontend Masters Blog](https://daily.dev/posts/building-a-ui-without-breakpoints-frontend-masters-blog-gttwzftuz) · Frontend Masters · 9 upvotes · 0 comments - [Tailwind CSS v4 Container Queries: Modern Responsive Design](https://daily.dev/posts/tailwind-css-v4-container-queries-modern-responsive-design-migt0pf3e) · SitePoint · 2 upvotes · 0 comments - [What’s \!important \#4: Videos & View Transitions, Named Media Queries, How Browsers Work, and More](https://daily.dev/posts/what-s-important-4-videos-view-transitions-named-media-queries-how-browsers-work-and-more-y9o607ler) · CSS-Tricks · 4 upvotes · 0 comments - [Web components know about the user, device, variables, layout and more · October 30, 2025](https://daily.dev/posts/web-components-know-about-the-user-device-variables-layout-and-more-october-30-2025-kzodn2mlu) · Adam Argyle · 4 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/the-four-user-preference-media-queries-your-css-should-honor-pnkw8evn5) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/the-four-user-preference-media-queries-your-css-should-honor-pnkw8evn5","headline":"The Four User-Preference Media Queries Your CSS Should Honor","text":"A practical deep-dive into four user-preference CSS media queries that most developers overlook: prefers-reduced-motion, prefers-contrast, forced-colors, and pointer type. Using a Lit-based article card as a case study, the post demonstrates how a visually polished component can still fail real users by ignoring motion preferences, hiding interactive elements from keyboard and touch users, and responding only to viewport width. Six live demos let readers experience each failure mode and its fix, including a hover trap that strands keyboard users.","url":"https://daily.dev/posts/the-four-user-preference-media-queries-your-css-should-honor-pnkw8evn5","datePublished":"2026-07-27T15:08:59.900Z","dateModified":"2026-09-13T21:20:21.714Z","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0","description":"Google Developer Expert in Web Technologies | Sr UI/UX Designer & Frontend Engineer","worksFor":{"@type":"Organization","name":"Uncanny Owl","logo":"https://www.google.com/s2/favicons?domain=uncannyowl.com&sz=128"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":27300}},"image":"https://media.daily.dev/image/upload/s--kwRGL-qi--/f_auto/v1785164940/posts/pNkw8EVN5?_a=BAMAMicg0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/lit","name":"Lit"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Lit","item":"https://daily.dev/squads/lit"},{"@type":"ListItem","position":3,"name":"The Four User-Preference Media Queries Your CSS Should Honor"}]} ```