--- title: The Four User-Preference Media Queries Your CSS Should Honor description: A practical deep-dive into four CSS user-preference media queries that developers often overlook: prefers-reduced-motion, prefers-contrast, forced-colors, and... canonical: https://daily.dev/posts/the-four-user-preference-media-queries-your-css-should-honor-d3p1sn2t2 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 CSS user-preference media queries that developers often 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-d3p1sn2t2 og:image: https://api.daily.dev/og/posts/D3P1Sn2t2.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 **[Agustin Barrientos](https://daily.dev/sources/wqyyve5tbj0nj7c7qpoa8)** · [@agustinbarrientos](https://daily.dev/agustinbarrientos) · 2 min read · 2 upvotes · 0 comments ## Summary A practical deep-dive into four CSS user-preference media queries that developers often 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 sensitivity, keyboard/touch reachability, and contrast needs. Six live demos let readers experience the broken patterns firsthand, including a hover trap that strands keyboard users. The core lesson is treating each media feature as a user-provided input and deciding whether it's a CSS requirement, an enhancement, or an unsupported signal like prefers-reduced-data. ## 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 - [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 - [Custom Media · January 23, 2026](https://daily.dev/posts/custom-media-january-23-2026-261jqpxdn) · Adam Argyle · 21 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 --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design), [#accessibility](https://daily.dev/tags/accessibility), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/the-four-user-preference-media-queries-your-css-should-honor-d3p1sn2t2) ```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-d3p1sn2t2","headline":"The Four User-Preference Media Queries Your CSS Should Honor","text":"A practical deep-dive into four CSS user-preference media queries that developers often 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 sensitivity, keyboard/touch reachability, and contrast needs. Six live demos let readers experience the broken patterns firsthand, including a hover trap that strands keyboard users. The core lesson is treating each media feature as a user-provided input and deciding whether it's a CSS requirement, an enhancement, or an unsupported signal like prefers-reduced-data.","url":"https://daily.dev/posts/the-four-user-preference-media-queries-your-css-should-honor-d3p1sn2t2","datePublished":"2026-07-27T15:08:59.900Z","dateModified":"2026-09-13T20:58:38.048Z","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":27310}},"image":"https://media.daily.dev/image/upload/s--gDtquvil--/f_auto/v1785164940/posts/D3P1Sn2t2?_a=BAMAMicg0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/sources/wqyyve5tbj0nj7c7qpoa8","name":"Agustin Barrientos"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Agustin Barrientos","item":"https://daily.dev/sources/wqyyve5tbj0nj7c7qpoa8"},{"@type":"ListItem","position":3,"name":"The Four User-Preference Media Queries Your CSS Should Honor"}]} ```