{"id":359033,"date":"2021-12-22T16:10:06","date_gmt":"2021-12-23T00:10:06","guid":{"rendered":"https:\/\/css-tricks.com\/?p=359033"},"modified":"2021-12-22T16:11:20","modified_gmt":"2021-12-23T00:11:20","slug":"personalize-it","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/personalize-it\/","title":{"rendered":"Personalize it!"},"content":{"rendered":"\n<p>Ensuring accessibility is a clear path to making your website better. When you make your site accessible, you grow your audience, improve the experience for all people using it (not just those with accessibility needs), and you get <a href=\"https:\/\/www.searchenginejournal.com\/seo-accessibility\/379582\/\" rel=\"noopener\">SEO benefits<\/a> as well.<\/p>\n\n\n\n<p>Along the same lines, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries#media_features\" rel=\"noopener\">preference-query<\/a> customization is another great opportunity to give your users a personalized experience that speaks to them and is more enjoyable to use.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"ticss-42226608\">One preference query you can take advantage of is <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/prefers-reduced-motion\" rel=\"noopener\"><code>prefers-reduced-motion<\/code><\/a>. This preference means that your users would prefer a web experience without flashy, quick animations. You can write your styles in a way that supports this preference, and then write a media query for those who don\u2019t have this preference set to get your \u201clouder\u201d interactive experience:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwwZMKm\" src=\"\/\/codepen.io\/anon\/embed\/RwwZMKm?height=450&amp;theme-id=1&amp;slug-hash=RwwZMKm&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwwZMKm\" title=\"CodePen Embed RwwZMKm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group ticss-6c75af48\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>Another preference to consider is a user\u2019s preferred color scheme. While most sites today use a light theme by default, dark themes have been a top request over the past few years, especially for browsing the web at night. Providing a <a href=\"https:\/\/web.dev\/building-a-color-scheme\/\" rel=\"noopener\">customized theming<\/a> that aligns with your user\u2019s preferences is another way to improve your user&#8217;s experience.&nbsp;<\/p>\n\n\n\n<p>You can do this efficiently by using CSS custom properties, and adjusting those custom property values with the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/prefers-color-scheme\" rel=\"noopener\"><code>prefers-color-scheme<\/code><\/a> media feature. If you use general values like <code>background<\/code>, <code>text<\/code>, and <code>highlight<\/code>, you can update your values all in one place.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwodQZw\" src=\"\/\/codepen.io\/anon\/embed\/RwodQZw?height=550&amp;theme-id=1&amp;slug-hash=RwodQZw&amp;default-tab=css,result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwodQZw\" title=\"CodePen Embed RwodQZw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"ticss-ddbb4a81\">Don\u2019t forget to use the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color-scheme\" rel=\"noopener\"><code>color-scheme<\/code><\/a> property as well to automatically get some theme conversion from the browser. Setting this property tells the browser what color themes (light, dark, or both) the page supports. In turn, the browser will automatically convert form controls and browser UI like scrollbars to the correct theme as well:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBPEGmv\" src=\"\/\/codepen.io\/anon\/embed\/qBPEGmv?height=550&amp;theme-id=1&amp;slug-hash=qBPEGmv&amp;default-tab=css,result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBPEGmv\" title=\"CodePen Embed qBPEGmv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In this demo, even though I\u2019m not setting the text color for my color themes, since I told the browser the site supports both light and dark themes with <code>color-scheme: light dark<\/code> in the <code>:root<\/code>, it automatically switches the typeface from black to white.<\/p>\n\n\n\n<p class=\"ticss-93efa827\">You can test your dark theme without changing your system settings in Chrome DevTools under the \u201cRendering\u201d panel. This illustration shows the site <a href=\"https:\/\/houdini.how\/\" rel=\"noopener\">houdini.how<\/a> in its dark mode:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1575\" height=\"702\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?resize=1575%2C702&#038;ssl=1\" alt=\"Screenshot of the website on the left with a dark blue-gray background and white text, and DevTools open on the right with the rendering panel open and the emulate CSS media type dropdown options open.\" class=\"wp-image-359036\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?w=1575&amp;ssl=1 1575w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?resize=300%2C134&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?resize=1024%2C456&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?resize=768%2C342&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?resize=1536%2C685&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?resize=1000%2C446&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p class=\"ticss-ff01c550\">Another bonus to creating a dark theme is the <a href=\"https:\/\/www.engadget.com\/2019-10-21-dark-mode-ios-13-test.html\" rel=\"noopener\">battery life savings<\/a> you&#8217;re providing your users. In&nbsp; a Pixel 6 Lab study, it was found that for an OLED screen, a dark theme saves 11% in power consumption.&nbsp;<\/p>\n\n\n\n<p class=\"ticss-d91ed382\">So now you&#8217;re respecting your user&#8217;s accessibility needs, preferences, and battery life, which is a pretty great way to make your website better for your users.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ensuring accessibility is a clear path to making your website better. When you make your site accessible, you grow your audience, improve the experience for all people using it (not just those with accessibility needs), and you get SEO benefits as well. Along the same lines, preference-query customization is another great opportunity to give your [&hellip;]<\/p>\n","protected":false},"author":250503,"featured_media":359036,"comment_status":"open","ping_status":"closed","sticky":false,"template":"art-direction\/eoy-2021.php","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[18996,4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?fit=1575%2C702&ssl=1","jetpack-related-posts":[{"id":250791,"url":"https:\/\/css-tricks.com\/introduction-reduced-motion-media-query\/","url_meta":{"origin":359033,"position":0},"title":"An Introduction to the Reduced Motion Media Query","date":"February 10, 2017","format":false,"excerpt":"The open web's success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disabling JavaScript. Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":331670,"url":"https:\/\/css-tricks.com\/responsible-conditional-loading\/","url_meta":{"origin":359033,"position":1},"title":"Responsible, Conditional Loading","date":"December 25, 2020","format":false,"excerpt":"Over on the Polypane blog (there's no byline but presumably it's Kilian Valkhof (it is)), there is a great article, Creating websites with prefers-reduced-data, about the prefers-reduced-data media query. No browser support yet, but eventually you can use it in CSS to make choices that reduce data usage. From the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/network-info-c451ffd2ba.png?fit=1200%2C651&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350298,"url":"https:\/\/css-tricks.com\/some-articles-about-accessibility-ive-saved-recently-iii\/","url_meta":{"origin":359033,"position":2},"title":"Some Articles About Accessibility I\u2019ve Saved Recently III","date":"August 26, 2021","format":false,"excerpt":"The perfect link \u2014 Rian Rietveld defines them: \"When you click on them, they take you somewhere else.\" Not much code in here (we've got that), just a lot of practical accessibility advice. For example, the alt text for a linked image can allude to the fact that it is\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/accessibility-a11y.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363057,"url":"https:\/\/css-tricks.com\/nuking-motion-with-prefers-reduced-motion\/","url_meta":{"origin":359033,"position":3},"title":"No Motion Isn&#8217;t Always prefers-reduced-motion","date":"February 8, 2022","format":false,"excerpt":"There is a code snippet that I see all the time when the media query prefers-reduced-motion is talked about. Here it is: @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } This is CSS that attempts to obliterate any\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/macos-preference-motion.png?fit=1200%2C905&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335485,"url":"https:\/\/css-tricks.com\/weekly-platform-news-reduced-motion-cors-whitehouse-gov-popups-and-100vw\/","url_meta":{"origin":359033,"position":4},"title":"Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw","date":"February 26, 2021","format":false,"excerpt":"In this week's roundup, we highlight a proposal for a new <popup> element, check the use of prefers-reduced-motion on award-winning sites, learn how to opt into cross-origin isolation, see how WhiteHouse.gov approaches accessibility, and warn the dangers of 100vh. Let's get into the news! The new HTML <popup> element is\u2026","rel":"","context":"In &quot;Weekly Platform News&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/wpn-20210226.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":288486,"url":"https:\/\/css-tricks.com\/reducing-motion-with-the-picture-element\/","url_meta":{"origin":359033,"position":5},"title":"Reducing motion with the picture element","date":"May 31, 2019","format":false,"excerpt":"Here\u2019s a bonafide CSS\/HTML trick from Brad Frost and Dave Rupert where they use the element to switch out a GIF file with an image if the user has reduced motion enabled. This is how Brad goes about implementing that: How nifty is this? It makes me wonder if there\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/framed-image.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?fit=1024%2C456&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/359033"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/250503"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=359033"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/359033\/revisions"}],"predecessor-version":[{"id":359413,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/359033\/revisions\/359413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/359036"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=359033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=359033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=359033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}