tomit4/notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
notes/web_resources/articles/css_tricks-revisiting-prefers-reduced-motion.html
z3rOR0ne 33d1ff18a2 📝 Made note of media query prefers reduced motion
2022-10-14 13:01:37 -07:00

960 lines
No EOL
112 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" id="top-of-site" class="js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Revisting prefers-reduced-motion | CSS-Tricks - CSS-Tricks</title>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ff7a18">
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="CSS-Tricks Search">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="https://css-tricks.com/feed/">
<link rel="preconnect" href="https://s3.buysellads.com">
<link rel="dns-prefetch" href="https://s3.buysellads.com">
<link rel="preconnect" href="https://srv.buysellads.com">
<link rel="dns-prefetch" href="https://srv.buysellads.com">
<link rel="preconnect" href="https://static.codepen.io">
<link rel="dns-prefetch" href="https://static.codepen.io">
<!-- Search Engine Optimization by Rank Math PRO - https://s.rankmath.com/home -->
<meta name="description" content="We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion."/>
<meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/>
<link rel="canonical" href="https://css-tricks.com/revisiting-prefers-reduced-motion/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Revisting prefers-reduced-motion | CSS-Tricks" />
<meta property="og:description" content="We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion." />
<meta property="og:url" content="https://css-tricks.com/revisiting-prefers-reduced-motion/" />
<meta property="og:site_name" content="CSS-Tricks" />
<meta property="article:publisher" content="https://www.facebook.com/CSSTricks" />
<meta property="article:tag" content="accessibility" />
<meta property="article:tag" content="animation" />
<meta property="article:tag" content="prefers-reduced-motion" />
<meta property="article:section" content="Article" />
<meta property="og:updated_time" content="2022-02-02T14:03:16-08:00" />
<meta property="og:image" content="https://css-tricks.com/wp-json/social-image-generator/v1/image/286790" />
<meta property="og:image:secure_url" content="https://css-tricks.com/wp-json/social-image-generator/v1/image/286790" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="prefers-reduced-motion" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="article:published_time" content="2019-04-30T08:13:19-07:00" />
<meta property="article:modified_time" content="2022-02-02T14:03:16-08:00" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Revisting prefers-reduced-motion | CSS-Tricks" />
<meta name="twitter:description" content="We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion." />
<meta name="twitter:site" content="@CSS" />
<meta name="twitter:creator" content="@ericwbailey" />
<meta name="twitter:image" content="https://css-tricks.com/wp-json/social-image-generator/v1/image/286790" />
<meta name="twitter:label1" content="Written by" />
<meta name="twitter:data1" content="Eric Bailey" />
<meta name="twitter:label2" content="Time to read" />
<meta name="twitter:data2" content="17 minutes" />
<script type="application/ld+json" class="rank-math-schema-pro">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://css-tricks.com/#organization","name":"CSS-Tricks","logo":{"@type":"ImageObject","@id":"https://css-tricks.com/#logo","url":"https://css-tricks.com/wp-content/uploads/2019/06/akqRGyta_400x400.jpg","contentUrl":"https://css-tricks.com/wp-content/uploads/2019/06/akqRGyta_400x400.jpg","caption":"CSS-Tricks","inLanguage":"en-US"}},{"@type":"WebSite","@id":"https://css-tricks.com/#website","url":"https://css-tricks.com","name":"CSS-Tricks","publisher":{"@id":"https://css-tricks.com/#organization"},"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/04/gilberto-parada-423754-unsplash-scaled.jpg?fit=2560%2C1707&amp;ssl=1","url":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/04/gilberto-parada-423754-unsplash-scaled.jpg?fit=2560%2C1707&amp;ssl=1","width":"2560","height":"1707","inLanguage":"en-US"},{"@type":"WebPage","@id":"https://css-tricks.com/revisiting-prefers-reduced-motion/#webpage","url":"https://css-tricks.com/revisiting-prefers-reduced-motion/","name":"Revisting prefers-reduced-motion | CSS-Tricks","datePublished":"2019-04-30T08:13:19-07:00","dateModified":"2022-02-02T14:03:16-08:00","isPartOf":{"@id":"https://css-tricks.com/#website"},"primaryImageOfPage":{"@id":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/04/gilberto-parada-423754-unsplash-scaled.jpg?fit=2560%2C1707&amp;ssl=1"},"inLanguage":"en-US"},{"@type":"Person","@id":"https://css-tricks.com/author/ericwbailey/","name":"Eric Bailey","url":"https://css-tricks.com/author/ericwbailey/","image":{"@type":"ImageObject","@id":"https://secure.gravatar.com/avatar/188a9d4deb76ac6e69c7f65358897476?s=96&amp;d=retro&amp;r=pg","url":"https://secure.gravatar.com/avatar/188a9d4deb76ac6e69c7f65358897476?s=96&amp;d=retro&amp;r=pg","caption":"Eric Bailey","inLanguage":"en-US"},"sameAs":["http://ericwbailey.design/","https://twitter.com/ericwbailey"],"worksFor":{"@id":"https://css-tricks.com/#organization"}},{"@type":"BlogPosting","headline":"Revisting prefers-reduced-motion | CSS-Tricks","keywords":"prefers-reduced-motion","datePublished":"2019-04-30T08:13:19-07:00","dateModified":"2022-02-02T14:03:16-08:00","author":{"@id":"https://css-tricks.com/author/ericwbailey/"},"publisher":{"@id":"https://css-tricks.com/#organization"},"description":"We may not need to throw out all CSS animations. Remember, it\u2019s prefers-reduced-motion, not prefers-no-motion.","name":"Revisting prefers-reduced-motion | CSS-Tricks","@id":"https://css-tricks.com/revisiting-prefers-reduced-motion/#richSnippet","isPartOf":{"@id":"https://css-tricks.com/revisiting-prefers-reduced-motion/#webpage"},"image":{"@id":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/04/gilberto-parada-423754-unsplash-scaled.jpg?fit=2560%2C1707&amp;ssl=1"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://css-tricks.com/revisiting-prefers-reduced-motion/#webpage"}}]}</script>
<!-- /Rank Math WordPress SEO plugin -->
<link rel='dns-prefetch' href='//stats.wp.com' />
<link rel='dns-prefetch' href='//i0.wp.com' />
<link rel='dns-prefetch' href='//c0.wp.com' />
<link rel="alternate" type="application/rss+xml" title="CSS-Tricks &raquo; Revisiting prefers-reduced-motion, the reduced motion media query Comments Feed" href="https://css-tricks.com/revisiting-prefers-reduced-motion/feed/" />
<link rel='stylesheet' id='css-tricks-style-css' href='https://css-tricks.com/wp-content/themes/CSS-Tricks-19/style.css?ver=cache_bust=1664897116689' type='text/css' media='all' />
<link rel='stylesheet' id='fancy-post-css' href='https://css-tricks.com/wp-content/themes/CSS-Tricks-19/css/fancy-post.css?version=2&#038;ver=6.0.2' type='text/css' media='all' />
<link rel='stylesheet' id='mediaelement-css' href='https://c0.wp.com/c/6.0.2/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wp-mediaelement-css' href='https://c0.wp.com/c/6.0.2/wp-includes/js/mediaelement/wp-mediaelement.min.css' type='text/css' media='all' />
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
</style>
<script type='text/javascript' id='jetpack_related-posts-js-extra'>
/* <![CDATA[ */
var related_posts_js_options = {"post_heading":"h4"};
/* ]]> */
</script>
<script src='https://c0.wp.com/p/jetpack/11.3.2/_inc/build/related-posts/related-posts.min.js' id='jetpack_related-posts-js'></script>
<script src='https://c0.wp.com/c/6.0.2/wp-includes/js/dist/vendor/regenerator-runtime.min.js' id='regenerator-runtime-js'></script>
<script src='https://c0.wp.com/c/6.0.2/wp-includes/js/dist/vendor/wp-polyfill.min.js' id='wp-polyfill-js'></script>
<script src='https://c0.wp.com/c/6.0.2/wp-includes/js/dist/hooks.min.js' id='wp-hooks-js'></script>
<script src='https://c0.wp.com/c/6.0.2/wp-includes/js/dist/i18n.min.js' id='wp-i18n-js'></script>
<script id='wp-i18n-js-after'>
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script>
<script src='https://css-tricks.com/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-assets/build/i18n-loader.js?minify=true&#038;ver=ee939953aa2115e2ca59' id='wp-jp-i18n-loader-js'></script>
<script id='wp-jp-i18n-loader-js-after'>
wp.jpI18nLoader.state = {"baseUrl":"https://css-tricks.com/wp-content/languages/","locale":"en_US","domainMap":{"jetpack-config":"plugins/jetpack","jetpack-assets":"plugins/jetpack","jetpack-lazy-images":"plugins/jetpack","jetpack-plugins-installer":"plugins/jetpack","jetpack-admin-ui":"plugins/jetpack","jetpack-licensing":"plugins/jetpack","jetpack-connection":"plugins/jetpack","jetpack-my-jetpack":"plugins/jetpack","jetpack-password-checker":"plugins/jetpack","jetpack-idc":"plugins/jetpack","jetpack-sync":"plugins/jetpack","jetpack-jitm":"plugins/jetpack","jetpack-connection-ui":"plugins/jetpack","jetpack-backup-pkg":"plugins/jetpack","jetpack-compat":"plugins/jetpack","jetpack-google-fonts-provider":"plugins/jetpack","jetpack-post-list":"plugins/jetpack","jetpack-publicize-pkg":"plugins/jetpack","jetpack-waf":"plugins/jetpack","jetpack-wordads":"plugins/jetpack","jetpack-search-pkg":"plugins/jetpack","jetpack-videopress-pkg":"plugins/jetpack"},"domainPaths":{"jetpack-config":"jetpack_vendor/automattic/jetpack-config/","jetpack-assets":"jetpack_vendor/automattic/jetpack-assets/","jetpack-lazy-images":"jetpack_vendor/automattic/jetpack-lazy-images/","jetpack-plugins-installer":"jetpack_vendor/automattic/jetpack-plugins-installer/","jetpack-admin-ui":"jetpack_vendor/automattic/jetpack-admin-ui/","jetpack-licensing":"jetpack_vendor/automattic/jetpack-licensing/","jetpack-connection":"jetpack_vendor/automattic/jetpack-connection/","jetpack-my-jetpack":"jetpack_vendor/automattic/jetpack-my-jetpack/","jetpack-password-checker":"jetpack_vendor/automattic/jetpack-password-checker/","jetpack-idc":"jetpack_vendor/automattic/jetpack-identity-crisis/","jetpack-sync":"jetpack_vendor/automattic/jetpack-sync/","jetpack-jitm":"jetpack_vendor/automattic/jetpack-jitm/","jetpack-connection-ui":"jetpack_vendor/automattic/jetpack-connection-ui/","jetpack-backup-pkg":"jetpack_vendor/automattic/jetpack-backup/","jetpack-compat":"jetpack_vendor/automattic/jetpack-compat/","jetpack-google-fonts-provider":"jetpack_vendor/automattic/jetpack-google-fonts-provider/","jetpack-post-list":"jetpack_vendor/automattic/jetpack-post-list/","jetpack-publicize-pkg":"jetpack_vendor/automattic/jetpack-publicize/","jetpack-waf":"jetpack_vendor/automattic/jetpack-waf/","jetpack-wordads":"jetpack_vendor/automattic/jetpack-wordads/","jetpack-search-pkg":"jetpack_vendor/automattic/jetpack-search/","jetpack-videopress-pkg":"jetpack_vendor/automattic/jetpack-videopress/"}};
</script>
<link rel="https://api.w.org/" href="https://css-tricks.com/wp-json/" /><link rel="alternate" type="application/json" href="https://css-tricks.com/wp-json/wp/v2/posts/286790" /><link rel='shortlink' href='https://css-tricks.com/?p=286790' />
<link rel="alternate" type="application/json+oembed" href="https://css-tricks.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcss-tricks.com%2Frevisiting-prefers-reduced-motion%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://css-tricks.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcss-tricks.com%2Frevisiting-prefers-reduced-motion%2F&#038;format=xml" />
<!-- Better Art Direction Styles -->
<style>
.fancy-post .article-content {
max-width: 620px;
}
.neurodivergence-section {
background: #696F7A;
color: #fff;
padding: 3em 0;
}
.neurodivergence-section blockquote {
margin: 0 auto;
max-width: 800px;
padding: 0 3em;
}
.neurodivergence-section blockquote::before {
width: 0;
}
.neurodivergence-section blockquote code {
color: #3d3d3d;
}
.neurodivergence-section blockquote a {
color: #fff;
text-decoration: underline;
}
</style>
<!-- Generated by Social Image Generator - https://socialimagegenerator.com -->
<meta property="og:image" content="https://css-tricks.com/wp-json/social-image-generator/v1/image/286790">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:image" content="https://css-tricks.com/wp-json/social-image-generator/v1/image/286790">
<meta name="twitter:card" content="summary_large_image">
<!-- / Social Image Generator -->
<style>img#wpstats{display:none}</style>
<link rel="icon" href="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&#038;ssl=1" sizes="32x32" />
<link rel="icon" href="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&#038;ssl=1" sizes="192x192" />
<link rel="apple-touch-icon" href="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&#038;ssl=1" />
<meta name="msapplication-TileImage" content="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&#038;ssl=1" />
<style type="text/css" id="wp-custom-css">
\ </style>
</head>
<body class="post-template post-template-art-direction post-template-fancy-post post-template-art-directionfancy-post-php single single-post postid-286790 single-format-standard jps-theme-CSS-Tricks-19 category-article">
<div id="top-of-site-pixel-anchor"></div>
<header class="site-header" id="site-header">
<a id="skip-nav" class="skip-nav screen-reader-text" href="#maincontent">Skip to main content</a>
<div class="logo">
<a href="/">
<div class="screen-reader-text">CSS-Tricks</div>
<svg class="icon-logo-star" width="35px" height="35px" viewBox="0 0 362.62 388.52" data-spin-me="false">
<path d="M156.58,239l-88.3,64.75c-10.59,7.06-18.84,11.77-29.43,11.77-21.19,0-38.85-18.84-38.85-40C0,257.83,14.13,244.88,27.08,239l103.6-44.74L27.08,148.34C13,142.46,0,129.51,0,111.85,0,90.66,18.84,73,40,73c10.6,0,17.66,3.53,28.25,11.77l88.3,64.75L144.81,44.74C141.28,20,157.76,0,181.31,0s40,18.84,36.5,43.56L206,149.52l88.3-64.75C304.93,76.53,313.17,73,323.77,73a39.2,39.2,0,0,1,38.85,38.85c0,18.84-12.95,30.61-27.08,36.5L231.93,194.26,335.54,239c14.13,5.88,27.08,18.83,27.08,37.67,0,21.19-18.84,38.85-40,38.85-9.42,0-17.66-4.71-28.26-11.77L206,239l11.77,104.78c3.53,24.72-12.95,44.74-36.5,44.74s-40-18.84-36.5-43.56Z" />
</svg>
<svg width="322" height="32" viewBox="0 0 322 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-logo-text">
<path d="M16.4923 21.5221C16.0962 21.5202 15.7132 21.6668 15.4167 21.9339C13.9468 23.1946 12.5055 23.8978 10.3687 23.8978C6.5073 23.8978 3.70719 20.644 3.70719 16.6104V16.5521C3.70719 12.5441 6.53598 9.31211 10.3687 9.31211C12.142 9.31448 13.8542 9.97091 15.1873 11.1595C15.4503 11.3483 15.7586 11.4616 16.0796 11.4875C16.4007 11.5134 16.7227 11.4509 17.0117 11.3067C17.3008 11.1624 17.5463 10.9416 17.7224 10.6676C17.8985 10.3935 17.9987 10.0764 18.0125 9.74936C18.0137 9.47206 17.952 9.19822 17.8319 8.9492C17.7119 8.70017 17.5369 8.4827 17.3205 8.31374C15.5637 6.93643 13.513 6 10.3973 6C4.30235 6 0 10.7769 0 16.6104V16.6687C0 22.5642 4.38481 27.2354 10.2683 27.2354C13.5273 27.2354 15.6928 26.1824 17.5966 24.4808C17.7764 24.3189 17.9207 24.1204 18.0201 23.8982C18.1196 23.676 18.1719 23.435 18.1738 23.1909C18.1617 22.7453 17.9795 22.3219 17.6656 22.0104C17.3518 21.699 16.931 21.5238 16.4923 21.5221V21.5221ZM29.7041 14.9853C25.8069 14.0453 24.8855 13.342 24.8855 11.7607V11.7024C24.8855 10.3506 26.0973 9.26839 28.1732 9.26839C29.7615 9.26839 31.2601 9.79308 32.8341 10.8206C33.1116 10.996 33.4322 11.0882 33.7591 11.0866C33.977 11.089 34.1933 11.0476 34.3954 10.9647C34.5976 10.8818 34.7816 10.7591 34.9369 10.6037C35.0921 10.4482 35.2156 10.2631 35.3002 10.0589C35.3848 9.85479 35.4289 9.63565 35.4298 9.41414C35.4373 9.12618 35.3692 8.84139 35.2324 8.58907C35.0957 8.33675 34.8953 8.12601 34.6518 7.97852C32.7598 6.69182 30.5246 6.02662 28.2485 6.07287C24.2401 6.07287 21.3576 8.50321 21.3576 12.023V12.0813C21.3576 15.8635 23.7776 17.1533 28.0764 18.21C31.8266 19.0881 32.6333 19.8788 32.6333 21.3472V21.4055C32.6333 22.9286 31.2494 23.9853 29.048 23.9853C26.977 23.9843 24.9735 23.2368 23.394 21.8756C23.1425 21.6924 22.8468 21.5819 22.5385 21.5558C22.2301 21.5296 21.9206 21.5888 21.6426 21.7271C21.3647 21.8653 21.1288 22.0774 20.9599 22.3409C20.7911 22.6044 20.6956 22.9095 20.6835 23.2237C20.6822 23.4928 20.7443 23.7583 20.8647 23.9979C20.9851 24.2375 21.1602 24.4444 21.3755 24.601C23.5587 26.2783 26.2216 27.1842 28.9584 27.1808C33.1998 27.1808 36.172 24.8925 36.172 21.0521V20.9938C36.1827 17.5942 33.9706 16.0384 29.7041 14.9853ZM47.5839 14.9853C43.6903 14.0453 42.7689 13.342 42.7689 11.7607V11.7024C42.7689 10.3506 43.9807 9.26839 46.0566 9.26839C47.6413 9.26839 49.1435 9.79308 50.7175 10.8206C50.995 10.996 51.3157 11.0882 51.6425 11.0866C51.8604 11.089 52.0767 11.0476 52.2788 10.9647C52.481 10.8818 52.665 10.7591 52.8203 10.6037C52.9756 10.4482 53.0991 10.2631 53.1837 10.0589C53.2683 9.85479 53.3123 9.63565 53.3132 9.41414C53.3207 9.12618 53.2526 8.84139 53.1158 8.58907C52.9791 8.33675 52.7787 8.12601 52.5352 7.97852C50.6382 6.68823 48.3962 6.02286 46.114 6.07287C42.1056 6.07287 39.2195 8.50321 39.2195 12.023V12.0813C39.2195 15.8635 41.6431 17.1533 45.9419 18.21C49.6921 19.0881 50.4988 19.8788 50.4988 21.3472V21.4055C50.4988 22.9286 49.1149 23.9853 46.9135 23.9853C44.8438 23.9835 42.8417 23.236 41.2631 21.8756C41.0112 21.6927 40.7154 21.5825 40.4069 21.5565C40.0985 21.5304 39.7888 21.5896 39.5108 21.7277C39.2327 21.8659 38.9965 22.0778 38.8272 22.3412C38.6579 22.6045 38.5618 22.9094 38.549 23.2237C38.5485 23.4926 38.611 23.7578 38.7314 23.9973C38.8517 24.2368 39.0264 24.4437 39.241 24.601C41.4259 26.2776 44.0897 27.1834 46.8274 27.1808C51.0688 27.1808 54.0375 24.8925 54.0375 21.0521V20.9938C54.0446 17.5942 51.854 16.0384 47.5839 14.9853ZM63.94 16.1586H58.5155C58.0741 16.1791 57.6574 16.3718 57.3522 16.6965C57.0469 17.0212 56.8766 17.453 56.8766 17.9021C56.8766 18.3512 57.0469 18.783 57.3522 19.1077C57.6574 19.4325 58.0741 19.6251 58.5155 19.6456H63.94C64.3815 19.6251 64.7981 19.4325 65.1034 19.1077C65.4086 18.783 65.5789 18.3512 65.5789 17.9021C65.5789 17.453 65.4086 17.0212 65.1034 16.6965C64.7981 16.3718 64.3815 16.1791 63.94 16.1586V16.1586ZM80.2818 6.36437H66.88C66.6576 6.35381 66.4355 6.3892 66.227 6.4684C66.0185 6.54759 65.828 6.66895 65.667 6.82512C65.506 6.98129 65.3778 7.16903 65.2902 7.37699C65.2027 7.58495 65.1575 7.8088 65.1575 8.035C65.1575 8.2612 65.2027 8.48505 65.2902 8.69301C65.3778 8.90097 65.506 9.08871 65.667 9.24488C65.828 9.40105 66.0185 9.52241 66.227 9.6016C66.4355 9.6808 66.6576 9.71619 66.88 9.70563H71.7811V25.246C71.7811 25.7292 71.9699 26.1925 72.3061 26.5342C72.6423 26.8759 73.0983 27.0678 73.5737 27.0678C74.0491 27.0678 74.5051 26.8759 74.8413 26.5342C75.1775 26.1925 75.3663 25.7292 75.3663 25.246V9.70563H80.2818C80.7045 9.68556 81.1033 9.50079 81.3955 9.18968C81.6876 8.87858 81.8506 8.46505 81.8506 8.035C81.8506 7.60495 81.6876 7.19142 81.3955 6.88032C81.1033 6.56921 80.7045 6.38444 80.2818 6.36437V6.36437ZM94.2106 6.36437H87.0113C86.7749 6.36043 86.54 6.40486 86.3208 6.49502C86.1015 6.58518 85.9024 6.71923 85.7351 6.8892C85.5679 7.05916 85.436 7.26157 85.3473 7.48439C85.2586 7.70721 85.2148 7.94588 85.2187 8.18621V25.2496C85.2796 25.6839 85.4926 26.0812 85.8186 26.3687C86.1447 26.6562 86.5618 26.8145 86.9934 26.8145C87.4251 26.8145 87.8422 26.6562 88.1682 26.3687C88.4942 26.0812 88.7073 25.6839 88.7681 25.2496V19.7331H93.239L98.1401 26.0949C98.3271 26.3875 98.584 26.6271 98.8869 26.7915C99.1897 26.9559 99.5285 27.0397 99.8718 27.035C100.092 27.0389 100.31 26.9987 100.515 26.9167C100.719 26.8348 100.906 26.7126 101.064 26.5573C101.222 26.402 101.349 26.2166 101.436 26.0116C101.524 25.8066 101.571 25.586 101.575 25.3626C101.555 24.847 101.35 24.3568 100.998 23.9853L97.1326 19.0298C99.8431 18.1809 101.718 16.1878 101.718 12.9011V12.8428C101.739 12.0293 101.602 11.2196 101.314 10.46C101.027 9.70038 100.595 9.00573 100.044 8.41577C98.7496 7.1259 96.7741 6.36437 94.2214 6.36437H94.2106ZM98.115 13.1052C98.115 15.1857 96.5016 16.5339 93.9632 16.5339H88.7717V9.64733H93.9345C96.559 9.64733 98.115 10.8498 98.115 13.0505V13.1052ZM107.777 6.21862C107.543 6.21326 107.31 6.25564 107.093 6.34324C106.875 6.43083 106.677 6.56188 106.509 6.72865C106.342 6.89541 106.21 7.09451 106.12 7.31419C106.03 7.53386 105.984 7.76967 105.985 8.00767V25.246C106.005 25.7098 106.201 26.1478 106.531 26.4686C106.861 26.7895 107.301 26.9685 107.758 26.9685C108.214 26.9685 108.654 26.7895 108.984 26.4686C109.314 26.1478 109.51 25.7098 109.531 25.246V8.00403C109.532 7.76947 109.488 7.53695 109.4 7.31992C109.313 7.10289 109.183 6.90565 109.02 6.73962C108.857 6.57359 108.664 6.44206 108.45 6.35263C108.237 6.2632 108.008 6.21765 107.777 6.21862V6.21862ZM130.246 21.5221C129.85 21.5191 129.467 21.6659 129.171 21.9339C127.697 23.1946 126.256 23.8978 124.123 23.8978C120.258 23.8978 117.458 20.644 117.458 16.6104V16.5521C117.458 12.5441 120.286 9.31211 124.123 9.31211C125.895 9.3147 127.606 9.97116 128.938 11.1595C129.246 11.3991 129.625 11.5274 130.013 11.5238C130.243 11.5287 130.472 11.4867 130.686 11.4004C130.9 11.314 131.094 11.185 131.259 11.021C131.423 10.857 131.553 10.6613 131.641 10.4454C131.73 10.2295 131.775 9.9978 131.774 9.76393C131.773 9.48692 131.711 9.21364 131.591 8.96487C131.471 8.71611 131.297 8.4984 131.082 8.32832C129.321 6.951 127.274 6.01458 124.159 6.01458C118.042 6.01458 113.761 10.7915 113.761 16.625V16.6833C113.761 22.5788 118.142 27.25 124.029 27.25C127.288 27.25 129.45 26.197 131.354 24.4954C131.534 24.3335 131.678 24.135 131.778 23.9128C131.877 23.6906 131.93 23.4496 131.931 23.2055C131.923 22.7567 131.742 22.3291 131.427 22.0144C131.112 21.6997 130.688 21.523 130.246 21.5221ZM144.946 15.3934L151.235 9.23924C151.431 9.07489 151.59 8.86863 151.7 8.63504C151.809 8.40145 151.867 8.14624 151.869 7.88743C151.872 7.66729 151.831 7.44889 151.749 7.24507C151.667 7.04126 151.546 6.85615 151.392 6.70065C151.239 6.54515 151.057 6.42239 150.856 6.33961C150.655 6.25683 150.44 6.21569 150.224 6.21862C149.944 6.21503 149.668 6.27539 149.414 6.39524C149.161 6.51509 148.938 6.69134 148.761 6.91092L139.188 16.6833V8.00403C139.168 7.54018 138.972 7.10224 138.642 6.78138C138.311 6.46052 137.872 6.28145 137.415 6.28145C136.958 6.28145 136.519 6.46052 136.189 6.78138C135.858 7.10224 135.663 7.54018 135.642 8.00403V25.2423C135.663 25.7062 135.858 26.1441 136.189 26.465C136.519 26.7858 136.958 26.9649 137.415 26.9649C137.872 26.9649 138.311 26.7858 138.642 26.465C138.972 26.1441 139.168 25.7062 139.188 25.2423V20.9938L142.476 17.7691L148.965 26.186C149.125 26.4441 149.347 26.6571 149.61 26.8054C149.872 26.9538 150.167 27.0327 150.467 27.035C150.7 27.0439 150.932 27.0048 151.149 26.9203C151.367 26.8358 151.565 26.7075 151.733 26.5431C151.9 26.3788 152.033 26.1817 152.124 25.9638C152.214 25.7459 152.261 25.5117 152.26 25.2751C152.257 24.7993 152.084 24.3408 151.772 23.9853L144.946 15.3934ZM163.518 14.9853C159.624 14.0453 158.703 13.342 158.703 11.7607V11.7024C158.703 10.3506 159.915 9.26839 161.99 9.26839C163.579 9.26839 165.077 9.79308 166.651 10.8206C166.929 10.996 167.25 11.0882 167.576 11.0866C167.794 11.089 168.011 11.0476 168.213 10.9647C168.415 10.8818 168.599 10.7591 168.754 10.6037C168.909 10.4482 169.033 10.2631 169.118 10.0589C169.202 9.85479 169.246 9.63565 169.247 9.41414C169.256 9.12724 169.189 8.84317 169.054 8.59095C168.92 8.33873 168.721 8.12739 168.48 7.97852C166.588 6.69182 164.353 6.02662 162.077 6.07287C158.068 6.07287 155.182 8.50321 155.182 12.023V12.0813C155.182 15.8635 157.606 17.1533 161.904 18.21C165.655 19.0881 166.461 19.8788 166.461 21.3472V21.4055C166.461 22.9286 165.077 23.9853 162.876 23.9853C160.806 23.9835 158.804 23.236 157.226 21.8756C156.974 21.6927 156.678 21.5825 156.369 21.5565C156.061 21.5304 155.751 21.5896 155.473 21.7277C155.195 21.8659 154.959 22.0778 154.79 22.3412C154.62 22.6045 154.524 22.9094 154.512 23.2237C154.511 23.4931 154.574 23.7586 154.695 23.9982C154.816 24.2379 154.991 24.4446 155.207 24.601C157.39 26.2783 160.053 27.1842 162.79 27.1808C167.031 27.1808 170 24.8925 170 21.0521V20.9938C169.989 17.5942 167.799 16.0384 163.529 14.9853H163.518Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M211.018 29V23.9655C216.367 23.9655 220.48 18.6838 218.439 13.0624C217.697 10.993 216.027 9.32513 213.955 8.58385C208.328 6.54532 203.04 10.6841 203.04 15.9967V15.9967H198C198 7.50281 206.225 0.862157 215.13 3.64197C219.026 4.84655 222.118 7.96611 223.355 11.8578C226.138 20.7841 219.521 29 211.018 29V29Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M211.017 23.9966H206.008V18.9929V18.9929H211.017V18.9929V23.9966Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M206.007 27.8589H202.142V27.8589V23.998H206.007V27.8589V27.8589Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M202.145 23.9984H198.898V23.9984V20.7861V20.7861H202.114V20.7861V23.9984H202.145Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M239.312 14.8042C238.176 14.0276 236.755 13.6275 235.098 13.6275H231.5V25.0183H235.098C236.755 25.0183 238.176 24.5946 239.312 23.7709C239.927 23.3238 240.425 22.7119 240.756 21.9352C241.087 21.1586 241.277 20.2643 241.277 19.2523C241.277 18.2403 241.111 17.346 240.756 16.5929C240.425 15.8162 239.951 15.2043 239.312 14.8042V14.8042ZM233.609 15.535H234.745C236 15.535 237.041 15.7704 237.823 16.2646C238.699 16.7824 239.148 17.7943 239.148 19.23C239.148 20.7126 238.699 21.7482 237.823 22.313V22.313C237.065 22.8072 236.047 23.0661 234.769 23.0661H233.633V15.535H233.609Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M243.809 13.463C243.454 13.463 243.17 13.5807 242.933 13.816C242.697 14.0514 242.555 14.3338 242.555 14.6868C242.555 15.0398 242.673 15.3222 242.91 15.5811C243.147 15.8165 243.454 15.9341 243.809 15.9341C244.164 15.9341 244.448 15.8165 244.709 15.5811C244.946 15.3458 245.064 15.0398 245.064 14.6868C245.064 14.3338 244.946 14.0514 244.709 13.816C244.448 13.6042 244.141 13.463 243.809 13.463V13.463Z" fill="white"/>
<rect x="242.768" y="16.9687" width="2.03584" height="8.02531" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M252.164 17.6515C251.548 17.1102 250.862 16.8043 250.128 16.8043C249.015 16.8043 248.068 17.1808 247.358 17.9575C246.624 18.7106 246.269 19.6755 246.269 20.8287C246.269 21.9583 246.624 22.9233 247.334 23.6999C248.044 24.453 248.991 24.8296 250.104 24.8296C250.885 24.8296 251.548 24.6178 252.116 24.1941V24.3824C252.116 25.0414 251.927 25.5591 251.595 25.9122C251.24 26.2652 250.743 26.4535 250.151 26.4535C249.204 26.4535 248.636 26.0769 247.902 25.1355L246.529 26.4535L246.577 26.5005C246.885 26.9241 247.334 27.3242 247.926 27.7008C248.518 28.0773 249.299 28.2892 250.175 28.2892C251.382 28.2892 252.353 27.9126 253.063 27.183C253.773 26.4535 254.152 25.465 254.152 24.2647V16.969H252.164V17.6515V17.6515ZM251.619 22.3826C251.264 22.7827 250.814 22.9709 250.223 22.9709C249.631 22.9709 249.181 22.7827 248.85 22.3826C248.495 21.9825 248.329 21.4647 248.329 20.8057C248.329 20.1468 248.495 19.629 248.85 19.2289C249.205 18.8288 249.655 18.6406 250.223 18.6406C250.814 18.6406 251.264 18.8288 251.619 19.2289C251.974 19.629 252.14 20.1703 252.14 20.8057C252.164 21.4647 251.974 21.9825 251.619 22.3826V22.3826Z" fill="white"/>
<rect x="255.883" y="16.9687" width="2.03584" height="8.02531" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M256.924 13.463C256.569 13.463 256.285 13.5807 256.048 13.816C255.811 14.0514 255.669 14.3338 255.669 14.6868C255.669 15.0398 255.788 15.3222 256.024 15.5811C256.261 15.8165 256.569 15.9341 256.924 15.9341C257.279 15.9341 257.563 15.8165 257.823 15.5811C258.06 15.3458 258.178 15.0398 258.178 14.6868C258.178 14.3338 258.06 14.0514 257.823 13.816C257.563 13.6042 257.279 13.463 256.924 13.463V13.463Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M262.367 14.8034H260.379V16.9686H259.219V18.8043H260.379V22.1227C260.379 23.1582 260.592 23.9113 260.994 24.3349C261.421 24.7586 262.154 24.9939 263.172 24.9939C263.504 24.9939 263.835 24.9939 264.167 24.9704H264.261V23.1347L263.575 23.1817C263.101 23.1817 262.77 23.0876 262.604 22.9229C262.438 22.7581 262.367 22.4051 262.367 21.8638V18.8278H264.261V16.9921H262.367V14.8034V14.8034Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M273.78 13.603H275.815V24.9937H273.78V13.603Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M296.291 22.1231C295.936 22.5232 295.557 22.8762 295.273 23.0645V23.0645C294.989 23.2527 294.634 23.3233 294.232 23.3233C293.64 23.3233 293.143 23.1115 292.764 22.6644C292.385 22.2172 292.172 21.6524 292.172 20.9699C292.172 20.2874 292.361 19.7226 292.74 19.2754C293.119 18.8282 293.616 18.6164 294.208 18.6164C294.871 18.6164 295.557 19.0165 296.149 19.7226L297.498 18.4517V18.4517C296.623 17.322 295.51 16.8043 294.184 16.8043C293.072 16.8043 292.101 17.2043 291.32 18.0045C290.539 18.8047 290.136 19.7932 290.136 20.9934C290.136 22.1937 290.539 23.2057 291.32 23.9823C292.101 24.7825 293.072 25.1826 294.184 25.1826C295.652 25.1826 296.836 24.5471 297.64 23.394L296.291 22.1231V22.1231Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M304.624 18.1001C304.34 17.7 303.938 17.3705 303.464 17.1352C302.991 16.8998 302.423 16.7822 301.784 16.7822C300.647 16.7822 299.724 17.2058 299.038 18.006C298.351 18.8297 298.02 19.8417 298.02 21.0184C298.02 22.2422 298.399 23.2307 299.132 24.0073C299.866 24.7604 300.86 25.1605 302.068 25.1605C303.441 25.1605 304.553 24.6192 305.406 23.5366L305.453 23.4895L304.127 22.2187V22.2187C304.009 22.3599 303.82 22.5246 303.678 22.6894C303.488 22.8776 303.299 23.0188 303.086 23.113C302.778 23.2542 302.447 23.3483 302.068 23.3483C301.5 23.3483 301.05 23.1836 300.695 22.8541C300.363 22.5481 300.174 22.1481 300.127 21.6303H305.5L305.524 20.9007C305.524 20.383 305.453 19.8887 305.311 19.418C305.122 18.9238 304.908 18.5002 304.624 18.1001V18.1001ZM300.197 19.982C300.292 19.6055 300.481 19.276 300.718 19.0407C301.002 18.7818 301.357 18.6406 301.783 18.6406C302.281 18.6406 302.659 18.7818 302.92 19.0642C303.156 19.3231 303.298 19.629 303.322 20.0056H300.197V19.982Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M312.414 17.5809V17.5809C311.798 17.0631 310.946 16.8043 309.881 16.8043C309.195 16.8043 308.579 16.9455 308.011 17.2279C307.49 17.4868 306.969 17.9339 306.638 18.5223L306.662 18.5458L307.964 19.7932C308.508 18.9459 309.1 18.64 309.881 18.64C310.307 18.64 310.662 18.7576 310.923 18.9694C311.183 19.1813 311.325 19.4637 311.325 19.8402V20.2403C310.828 20.0991 310.331 20.005 309.834 20.005C308.816 20.005 308.011 20.2403 307.395 20.711C306.78 21.1817 306.472 21.8642 306.472 22.7114C306.472 23.4646 306.733 24.0765 307.253 24.5236C307.774 24.9708 308.437 25.1826 309.218 25.1826C309.999 25.1826 310.71 24.8766 311.372 24.3353V24.9943H313.361V19.8402C313.337 18.8518 313.029 18.0987 312.414 17.5809V17.5809ZM308.814 21.9348C309.051 21.7701 309.359 21.6995 309.785 21.6995C310.282 21.6995 310.803 21.7936 311.323 21.9819V22.7585C310.874 23.1586 310.282 23.3704 309.572 23.3704C309.217 23.3704 308.956 23.2998 308.767 23.1351C308.577 22.9939 308.483 22.8056 308.483 22.5467C308.483 22.2878 308.577 22.076 308.814 21.9348V21.9348Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M321.148 17.721C320.58 17.0856 319.798 16.7797 318.78 16.7797C317.976 16.7797 317.313 17.015 316.839 17.4622V16.9679H314.851V24.9932H316.887V20.5687C316.887 19.9568 317.029 19.4861 317.313 19.1331C317.597 18.7801 317.999 18.6154 318.52 18.6154C318.97 18.6154 319.325 18.7566 319.585 19.0625C319.846 19.3685 319.964 19.7921 319.964 20.3334V24.9697H322V20.3334C322 19.2273 321.716 18.3565 321.148 17.721V17.721Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M271.225 17.5809V17.5809C270.609 17.0631 269.757 16.8043 268.692 16.8043C268.005 16.8043 267.39 16.9455 266.821 17.2279C266.301 17.4868 265.78 17.9339 265.448 18.5223L265.472 18.5458L266.774 19.7932C267.319 18.9459 267.91 18.64 268.692 18.64C269.118 18.64 269.473 18.7576 269.733 18.9694C269.994 19.1813 270.136 19.4637 270.136 19.8402V20.2403C269.638 20.0991 269.141 20.005 268.644 20.005C267.626 20.005 266.821 20.2403 266.206 20.711C265.59 21.1817 265.283 21.8642 265.283 22.7114C265.283 23.4646 265.543 24.0765 266.064 24.5236C266.585 24.9708 267.248 25.1826 268.029 25.1826C268.81 25.1826 269.52 24.8766 270.183 24.3353V24.9943H272.171V19.8402C272.148 18.8518 271.84 18.0987 271.225 17.5809V17.5809ZM267.625 21.9348C267.862 21.7701 268.169 21.6995 268.595 21.6995C269.092 21.6995 269.613 21.7936 270.134 21.9819V22.7585C269.684 23.1586 269.092 23.3704 268.382 23.3704C268.027 23.3704 267.767 23.2998 267.577 23.1351C267.388 22.9939 267.293 22.8056 267.293 22.5467C267.293 22.2878 267.388 22.076 267.625 21.9348V21.9348Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M283.153 25.1587C279.91 25.1587 277.259 22.5228 277.259 19.2986C277.259 16.0744 279.91 13.4385 283.153 13.4385C286.396 13.4385 289.048 16.0744 289.048 19.2986C289.048 22.5228 286.42 25.1587 283.153 25.1587V25.1587ZM283.152 15.4859C281.045 15.4859 279.341 17.1804 279.341 19.275C279.341 21.3696 281.045 23.0641 283.152 23.0641C285.259 23.0641 286.963 21.3696 286.963 19.275C286.963 17.1804 285.259 15.4859 283.152 15.4859V15.4859Z" fill="white"/>
<path d="M231.652 9H231.156L232.412 3.1H233.912C234.315 3.1 234.637 3.16667 234.88 3.3C235.123 3.43333 235.299 3.612 235.408 3.836C235.517 4.06 235.572 4.30667 235.572 4.576C235.572 4.92267 235.513 5.236 235.396 5.516C235.281 5.79333 235.117 6.03333 234.904 6.236C234.693 6.43867 234.441 6.59333 234.148 6.7C233.855 6.80667 233.532 6.86 233.18 6.86H232.108L231.652 9ZM232.148 6.676L231.98 6.424H233.172C233.559 6.424 233.895 6.34667 234.18 6.192C234.465 6.03467 234.687 5.81733 234.844 5.54C235.001 5.26267 235.08 4.94 235.08 4.572C235.08 4.36133 235.037 4.18 234.952 4.028C234.867 3.87333 234.729 3.75333 234.54 3.668C234.351 3.58 234.1 3.536 233.788 3.536H232.592L232.872 3.26L232.148 6.676ZM237.474 9.076C237.111 9.076 236.799 9.004 236.538 8.86C236.276 8.71333 236.075 8.51067 235.934 8.252C235.792 7.99333 235.722 7.692 235.722 7.348C235.722 6.97467 235.786 6.62667 235.914 6.304C236.044 5.98133 236.224 5.7 236.454 5.46C236.686 5.21733 236.956 5.02933 237.266 4.896C237.578 4.76 237.915 4.692 238.278 4.692C238.643 4.692 238.955 4.76667 239.214 4.916C239.475 5.06533 239.675 5.26933 239.814 5.528C239.952 5.784 240.022 6.07467 240.022 6.4C240.022 6.79467 239.955 7.156 239.822 7.484C239.691 7.80933 239.51 8.09067 239.278 8.328C239.046 8.56533 238.775 8.74933 238.466 8.88C238.159 9.01067 237.828 9.076 237.474 9.076ZM237.51 8.632C237.886 8.632 238.224 8.54133 238.526 8.36C238.83 8.176 239.071 7.92133 239.25 7.596C239.428 7.268 239.518 6.88667 239.518 6.452C239.518 6.18533 239.468 5.95467 239.37 5.76C239.271 5.56267 239.127 5.40933 238.938 5.3C238.751 5.19067 238.52 5.136 238.246 5.136C237.952 5.136 237.682 5.192 237.434 5.304C237.188 5.41333 236.975 5.56667 236.794 5.764C236.615 5.96133 236.475 6.19067 236.374 6.452C236.275 6.71333 236.226 6.996 236.226 7.3C236.226 7.71067 236.336 8.036 236.558 8.276C236.782 8.51333 237.099 8.632 237.51 8.632ZM243.959 9L243.627 4.752H244.055L244.379 8.76H244.287L245.967 4.752H246.499L244.639 9H243.959ZM241.159 9L241.095 4.752H241.595L241.579 8.76H241.483L243.503 4.752H243.967L241.843 9H241.159ZM246.97 7.084L247.066 6.64H250.506L250.406 6.78C250.42 6.724 250.432 6.65867 250.442 6.584C250.453 6.50667 250.458 6.42267 250.458 6.332C250.458 6.11067 250.413 5.91067 250.322 5.732C250.234 5.55067 250.1 5.40667 249.918 5.3C249.737 5.19333 249.506 5.14 249.226 5.14C248.925 5.14 248.649 5.196 248.398 5.308C248.15 5.42 247.934 5.576 247.75 5.776C247.569 5.97333 247.428 6.204 247.326 6.468C247.228 6.72933 247.178 7.012 247.178 7.316C247.178 7.57467 247.225 7.80267 247.318 8C247.414 8.19733 247.56 8.35067 247.754 8.46C247.949 8.56933 248.194 8.624 248.49 8.624C248.738 8.624 248.958 8.59467 249.15 8.536C249.345 8.47467 249.51 8.39467 249.646 8.296C249.785 8.19733 249.896 8.09333 249.978 7.984C250.064 7.872 250.122 7.76667 250.154 7.668H250.654C250.614 7.82533 250.534 7.98667 250.414 8.152C250.297 8.31467 250.142 8.46667 249.95 8.608C249.758 8.74933 249.533 8.864 249.274 8.952C249.018 9.03733 248.733 9.08 248.418 9.08C248.056 9.08 247.745 9.00667 247.486 8.86C247.23 8.71067 247.034 8.50533 246.898 8.244C246.765 7.98 246.698 7.676 246.698 7.332C246.698 6.96133 246.764 6.61733 246.894 6.3C247.028 5.98 247.212 5.7 247.446 5.46C247.684 5.21733 247.958 5.02933 248.27 4.896C248.582 4.76 248.917 4.692 249.274 4.692C249.632 4.692 249.933 4.76667 250.178 4.916C250.426 5.06267 250.614 5.26267 250.742 5.516C250.87 5.76933 250.934 6.05467 250.934 6.372C250.934 6.484 250.924 6.60667 250.902 6.74C250.884 6.87333 250.861 6.988 250.834 7.084H246.97ZM251.615 9L252.515 4.752H253.011L252.747 6.004L252.559 5.948C252.604 5.81467 252.673 5.676 252.767 5.532C252.86 5.38533 252.977 5.248 253.119 5.12C253.26 4.992 253.424 4.88933 253.611 4.812C253.8 4.732 254.012 4.692 254.247 4.692C254.415 4.692 254.549 4.70667 254.651 4.736C254.755 4.76533 254.817 4.788 254.839 4.804L254.603 5.284C254.579 5.26533 254.528 5.24133 254.451 5.212C254.376 5.18267 254.261 5.168 254.107 5.168C253.883 5.168 253.685 5.212 253.515 5.3C253.344 5.38533 253.199 5.49733 253.079 5.636C252.959 5.77467 252.861 5.92267 252.787 6.08C252.715 6.23733 252.664 6.38667 252.635 6.528L252.107 9H251.615ZM255.181 7.084L255.277 6.64H258.717L258.617 6.78C258.631 6.724 258.643 6.65867 258.653 6.584C258.664 6.50667 258.669 6.42267 258.669 6.332C258.669 6.11067 258.624 5.91067 258.533 5.732C258.445 5.55067 258.311 5.40667 258.129 5.3C257.948 5.19333 257.717 5.14 257.437 5.14C257.136 5.14 256.86 5.196 256.609 5.308C256.361 5.42 256.145 5.576 255.961 5.776C255.78 5.97333 255.639 6.204 255.537 6.468C255.439 6.72933 255.389 7.012 255.389 7.316C255.389 7.57467 255.436 7.80267 255.529 8C255.625 8.19733 255.771 8.35067 255.965 8.46C256.16 8.56933 256.405 8.624 256.701 8.624C256.949 8.624 257.169 8.59467 257.361 8.536C257.556 8.47467 257.721 8.39467 257.857 8.296C257.996 8.19733 258.107 8.09333 258.189 7.984C258.275 7.872 258.333 7.76667 258.365 7.668H258.865C258.825 7.82533 258.745 7.98667 258.625 8.152C258.508 8.31467 258.353 8.46667 258.161 8.608C257.969 8.74933 257.744 8.864 257.485 8.952C257.229 9.03733 256.944 9.08 256.629 9.08C256.267 9.08 255.956 9.00667 255.697 8.86C255.441 8.71067 255.245 8.50533 255.109 8.244C254.976 7.98 254.909 7.676 254.909 7.332C254.909 6.96133 254.975 6.61733 255.105 6.3C255.239 5.98 255.423 5.7 255.657 5.46C255.895 5.21733 256.169 5.02933 256.481 4.896C256.793 4.76 257.128 4.692 257.485 4.692C257.843 4.692 258.144 4.76667 258.389 4.916C258.637 5.06267 258.825 5.26267 258.953 5.516C259.081 5.76933 259.145 6.05467 259.145 6.372C259.145 6.484 259.135 6.60667 259.113 6.74C259.095 6.87333 259.072 6.988 259.045 7.084H255.181ZM261.526 9.076C261.072 9.076 260.714 8.93067 260.45 8.64C260.186 8.34933 260.054 7.94133 260.054 7.416C260.054 7.048 260.108 6.7 260.218 6.372C260.33 6.044 260.487 5.75467 260.69 5.504C260.895 5.25067 261.14 5.05333 261.426 4.912C261.711 4.768 262.028 4.696 262.378 4.696C262.666 4.696 262.922 4.756 263.146 4.876C263.372 4.996 263.551 5.16133 263.682 5.372C263.812 5.58267 263.878 5.82533 263.878 6.1C263.878 6.172 263.872 6.248 263.862 6.328C263.851 6.40533 263.839 6.46667 263.826 6.512L263.486 6.52C263.499 6.47467 263.508 6.424 263.514 6.368C263.522 6.30933 263.526 6.26 263.526 6.22C263.526 6.01733 263.475 5.83467 263.374 5.672C263.275 5.50933 263.139 5.38133 262.966 5.288C262.795 5.19467 262.6 5.148 262.382 5.148C262.091 5.148 261.832 5.208 261.606 5.328C261.382 5.44533 261.192 5.608 261.038 5.816C260.883 6.02133 260.764 6.25867 260.682 6.528C260.602 6.79467 260.562 7.076 260.562 7.372C260.562 7.76933 260.656 8.07467 260.846 8.288C261.038 8.50133 261.308 8.608 261.658 8.608C261.922 8.608 262.17 8.54667 262.402 8.424C262.636 8.30133 262.836 8.13867 263.002 7.936C263.17 7.73067 263.279 7.504 263.33 7.256L263.722 7.264C263.65 7.6 263.507 7.90533 263.294 8.18C263.08 8.45467 262.819 8.67333 262.51 8.836C262.203 8.996 261.875 9.076 261.526 9.076ZM262.958 9L264.286 2.748H264.782L263.454 9H262.958ZM268.755 9.076C268.47 9.076 268.214 9.01467 267.987 8.892C267.76 8.76933 267.582 8.60133 267.451 8.388C267.323 8.172 267.259 7.92667 267.259 7.652C267.259 7.57733 267.263 7.50533 267.271 7.436C267.282 7.36667 267.294 7.30667 267.307 7.256L267.643 7.248C267.635 7.28 267.627 7.32267 267.619 7.376C267.614 7.42933 267.611 7.48133 267.611 7.532C267.611 7.73467 267.66 7.91733 267.759 8.08C267.86 8.24267 267.996 8.372 268.167 8.468C268.34 8.56133 268.536 8.608 268.755 8.608C269.043 8.608 269.299 8.54933 269.523 8.432C269.75 8.312 269.94 8.148 270.095 7.94C270.252 7.732 270.371 7.49467 270.451 7.228C270.531 6.96133 270.571 6.68 270.571 6.384C270.571 5.97867 270.479 5.67067 270.295 5.46C270.111 5.24933 269.843 5.144 269.491 5.144C269.243 5.144 269 5.204 268.763 5.324C268.526 5.444 268.32 5.604 268.147 5.804C267.974 6.004 267.86 6.22533 267.807 6.468L267.423 6.456C267.495 6.12 267.643 5.81867 267.867 5.552C268.091 5.28533 268.356 5.076 268.663 4.924C268.972 4.76933 269.29 4.692 269.615 4.692C270.071 4.692 270.428 4.83733 270.687 5.128C270.948 5.41867 271.079 5.83067 271.079 6.364C271.079 6.732 271.023 7.08 270.911 7.408C270.802 7.73333 270.644 8.02133 270.439 8.272C270.234 8.52267 269.988 8.72 269.703 8.864C269.418 9.00533 269.102 9.076 268.755 9.076ZM266.775 9L268.107 2.748H268.603L267.275 9H266.775ZM271.22 10.776C271.121 10.776 271.031 10.7693 270.948 10.756C270.865 10.7453 270.816 10.736 270.8 10.728L270.892 10.284C270.921 10.3027 270.975 10.3173 271.052 10.328C271.127 10.3413 271.2 10.348 271.272 10.348C271.456 10.348 271.619 10.3027 271.76 10.212C271.904 10.1213 272.031 10.0067 272.14 9.868C272.249 9.72933 272.344 9.58667 272.424 9.44L272.66 9.012L272.084 4.752H272.588L273.072 8.552H272.984L275.036 4.752H275.568L272.976 9.42C272.848 9.652 272.707 9.87067 272.552 10.076C272.4 10.284 272.217 10.452 272.004 10.58C271.791 10.7107 271.529 10.776 271.22 10.776Z" fill="white"/>
<line x1="184.5" y1="-2.18557e-08" x2="184.5" y2="32" stroke="white" stroke-opacity="0.5"/>
</svg>
</a>
</div>
<div class="header-middle-area">
<nav class="main-nav" id="main-nav">
<ul>
<li class="articles">
<a href="/archives/">
<span>Articles</span>
</a>
</li>
<li class="videos">
<a href="/video-screencasts/">
<span>Videos</span>
</a>
</li>
<li class="almanac">
<a href="/almanac/">
<span>Almanac</span>
</a>
</li>
<li class="newsletter">
<a href="/newsletters/">
<span>Newsletter</span>
</a>
</li>
<li class="guides">
<a href="/guides/">
<span>Guides</span>
</a>
</li>
<li class="do">
<a href="https://www.digitalocean.com/?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link" target="DigitalOcean">
<span>DigitalOcean</span>
</a>
</li>
<li class="doc">
<a href="https://www.digitalocean.com/community?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link" target="DigitalOcean">
<span>DO&nbsp;Community</span>
</a>
</li>
</ul>
</nav>
<div class="search-and-account">
<a href="https://www.google.com/search?q=site:css-tricks.com%20layout" class="jetpack-search-filter__link">
<span class="screen-reader-text">Search</span>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.0726 10.4326C12.4801 10.4326 10.4 12.5451 10.4 15.1053C10.4 17.6978 12.5125 19.7779 15.0726 19.7779C17.6651 19.7779 19.7453 17.6654 19.7453 15.1053C19.744 12.544 17.664 10.4326 15.0726 10.4326Z" fill="white"/>
<path d="M16.0327 0.447479C7.42401 0.447479 0.447693 7.4238 0.447693 16.0324C0.447693 24.6398 7.42401 31.6161 16.0314 31.6161C24.64 31.6161 31.6163 24.6398 31.6163 16.0324C31.6163 7.4238 24.64 0.447479 16.0327 0.447479ZM23.6163 24.0324C23.3926 24.2562 23.0401 24.385 22.6563 24.385C22.2726 24.385 21.9526 24.2575 21.6963 24.0324L18.7526 21.0887L18.4651 21.2487C17.4088 21.825 16.2576 22.145 15.0724 22.145C11.1998 22.145 8.06509 19.0087 8.06509 15.1376C8.06509 11.265 11.2013 8.13023 15.0724 8.13023C18.9451 8.13023 22.0798 11.2665 22.0798 15.1376C22.0798 16.5138 21.6961 17.8251 20.9273 18.9776L20.7348 19.2976L23.6473 22.2101C23.8711 22.4664 24.0311 22.7864 24.0311 23.1376C23.9998 23.4563 23.8723 23.7763 23.616 24.0326L23.6163 24.0324Z" fill="white"/>
</svg>
</a>
</div>
</div>
</header>
<div class="page-wrap">
<script>
var articleID = 286790;
var articleYear = 2019;
var articleAuthor = "230513";
var articleType = "post";
</script>
<main class="fancy-post">
<article>
<header style="background-image:
url(https://css-tricks.com/wp-content/uploads/2019/04/gilberto-parada-423754-unsplash-scaled.jpg); background-size: cover; background-position: center center;">
<h1>Revisiting prefers-reduced-motion, the reduced motion media query</h1>
Eric Bailey - Apr 30, 2019 </header>
<div class="article-content">
<p>Two years ago, <a href="https://css-tricks.com/introduction-reduced-motion-media-query/)">I wrote about <code>prefers-reduced-motion</code></a>, a media query introduced into Safari 10.1 to help people with <a href="https://vestibular.org/understanding-vestibular-disorder/types-vestibular-disorders" rel="noopener">vestibular</a> and seizure disorders use the web. The article provided some background about the media query, why it was needed, and how to work with it to avoid creating disability-triggering visual effects.</p>
<p>The article was informed by other people’s excellent work, namely <a href="https://twitter.com/decadecity" rel="noopener">Orde Saunders</a>’ post about <a href="https://decadecity.net/blog/2015/06/28/user-queries" rel="noopener">user queries</a>, and <a href="https://twitter.com/vlh" rel="noopener">Val Head</a>’s article on <a href="http://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/" rel="noopener">web animation motion sensitivity</a>.</p>
<p>We’re now four months into 2019, and it makes me happy to report that we have support for the feature in all major desktop browsers! Safari was first, with Firefox being a close second. Chrome was a little late to the party, but introduced it as of version 74.</p>
<div class="caniuse"><div class="caniuse-header"><p>This browser support data is from <a href="http://caniuse.com/#feat=prefers-reduced-motion" rel="noopener">Caniuse</a>, which has more detail. A number indicates that browser supports the feature at that version and up.</p></div><div class="caniuse-section"><h4>Desktop</h4><table class="browser-support-table"><thead><tr><th class="chrome"><span>Chrome</span></th><th class="firefox"><span>Firefox</span></th><th class="ie"><span>IE</span></th><th class="edge"><span>Edge</span></th><th class="safari"><span>Safari</span></th></tr></thead><tbody><tr><td class="y yep" title="Chrome - "><span class="caniuse-agents-version version">74</span></td><td class="y yep" title="Firefox - "><span class="caniuse-agents-version version">63</span></td><td class="n nope" title="IE - "><span class="caniuse-agents-version version">No</span></td><td class="y yep" title="Edge - "><span class="caniuse-agents-version version">79</span></td><td class="y yep" title="Safari - "><span class="caniuse-agents-version version">10.1</span></td></tr></table></div><div class="caniuse-section"><h4>Mobile / Tablet</h4><table class="browser-support-table"><thead><tr><th class="and_chr"><span>Android Chrome</span></th><th class="and_ff"><span>Android Firefox</span></th><th class="android"><span>Android</span></th><th class="ios_saf"><span>iOS Safari</span></th></tr></thead><tbody><tr><td class="y yep" title="Android Chrome - "><span class="caniuse-agents-version version">106</span></td><td class="y yep" title="Android Firefox - "><span class="caniuse-agents-version version">105</span></td><td class="y yep" title="Android - "><span class="caniuse-agents-version version">106</span></td><td class="y yep" title="iOS Safari - "><span class="caniuse-agents-version version">10.3</span></td></tr></table></div></div>
<p>While Microsoft Edge does not have support for <code>prefers-reduced-motion</code>, it will <a href="https://css-tricks.com/edge-goes-chromium-what-does-it-mean-for-front-end-developers/">become Chrome under the hood</a> soon. If there’s one good thing to come from this situation, it’s that <a href="https://twitter.com/gregwhitworth/status/1100515214355648513" rel="noopener">Edge’s other excellent accessibility features</a> will (hopefully) have a good chance of being back-ported into Chrome.</p>
<span id="more-286790"></span>
<figure class="wp-block-image size-full"><img width="1560" height="1176" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/09/macos-preference-motion.png?resize=1560%2C1176&#038;ssl=1" alt="The prefers-reduced-motion setting in MacOS." class="wp-image-322302" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/09/macos-preference-motion.png?w=1560&amp;ssl=1 1560w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/09/macos-preference-motion.png?resize=300%2C226&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/09/macos-preference-motion.png?resize=1024%2C772&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/09/macos-preference-motion.png?resize=768%2C579&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/09/macos-preference-motion.png?resize=1536%2C1158&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/09/macos-preference-motion.png?resize=1000%2C754&amp;ssl=1 1000w" sizes="(min-width: 735px) 864px, 96vw" data-recalc-dims="1" /></figure>
<h3 id="awareness"><a href="#aa-awareness" aria-hidden="true" class="aal_anchor" id="aa-awareness"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Awareness</h3>
<p>While I’m happy to see some websites and web apps using the media query, I find that it’s rare to encounter it outside of places maintained by people who are active in CSS and accessibility spaces. In a way, this makes sense. While <code>prefers-reduced-motion</code> is relatively new, CSS features and functionality as a whole are often <a href="http://www.heydonworks.com/article/reluctant-gatekeeping-the-problem-with-full-stack" rel="noopener">overlooked and undervalued</a>. <a href="https://webaim.org/projects/million/" rel="noopener">Accessibility even more so</a>.</p>
<p>It’s tough to blame someone for not using a feature they don’t know exists, especially if it’s relatively new, and especially in an industry as fast-paced as ours. The deck is also stacked in terms of what the industry prioritizes as marketable, and therefore what developers pay attention to. And yet, <code>prefers-reduced-motion</code> is a library-agnostic feature that ties into Operating System-level functionality. I’m pretty sure that means it’ll have some significant staying power in terms of reward for time spent for skill acquisition.</p>
<p>Speaking of rewards, I think it’s also worth pointing out the true value <code>prefers-reduced-motion</code> represents: Not attracting buzzword-hungry recruiters on LinkedIn, but improving the quality of life for the people who benefit from the effect it creates. Using this media query could spare someone from having to unnecessarily endure a tremendous amount of pain for simply having the curiosity to click on a link or scroll down a page.</p>
<h3 id="the-people-affected"><a href="#aa-the-people-affected" aria-hidden="true" class="aal_anchor" id="aa-the-people-affected"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The people affected</h3>
<p>When it comes to disability, many people just assume “blind people.” The reality is that disabilities are a complicated and nuanced topic, one that is surprisingly pervasive, deeply personal, and full of <a href="https://twitter.com/codingchaos/status/1121175191847985153" rel="noopener">unfortunate misconceptions</a>. It&#8217;s also highly variable. Different people are affected by different disability conditions in different ways — extending to a wide gamut of permanent, temporary, environmental, and situational concerns. Multiple, compounding conditions can (and do) affect individuals, and sometimes what helps one person might hinder another. It’s a difficult, but very vital thing to keep in mind.</p>
<p>If you have a vestibular disorder or have certain kinds of migraine or seizure triggers, <a href="https://source.opennews.org/articles/motion-sick/" rel="noopener">navigating the web can be a lot like walking through a minefield</a> — you’re perpetually one click away from activating an unannounced animation. And that’s just for casual browsing.</p>
<p>If you use the web for work, you might have no choice but to endure a web app that contains triggering animations multiple times a week, or even per day or hour. In addition to not having the autonomy to modify your work device, you may also not have the option to quickly and easily change jobs — a privilege easily forgotten when you’re <a href="http://theengineeringmanager.com/growth/job-hopping-and-what-you-can-do-about-it/" rel="noopener">a specialized knowledge worker</a>.</p>
<p>It’s a fallacy to assume that a person is aware of their vestibular disorder, or what triggers it. In fact, sometimes the initial triggering experience exacerbates your sensitivity and makes other parts of a design difficult to use. <a href="https://twitter.com/fcorradini" rel="noopener">Facundo Corradini</a> shares his experience with this phenomenon in his article, <a href="https://alistapart.com/article/accessibility-for-vestibular/" rel="noopener">“Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective.”</a></p>
<p><a>Not all assistive technology users are power users</a>, so it’s another fallacy to assume that a person with a vestibular disorder is aware of, or has the <a href="https://twitter.com/patrick_h_lauke/status/1105247881571852293" rel="noopener">access rights</a> to enable a motion-reducing Operating System setting or <a href="https://togglific.io/" rel="noopener">install a browser extension</a>.</p>
<p>Think of someone working in a large corporation who has to use a provisioned computer with locked-down capabilities. Or someone who isn’t fully aware of what of their tablet is capable of doing past browsing social media, watching video, and messaging their family and friends. Or a cheap and/or unorthodox device that will never support <code>prefers-reduced-motion</code> feature — some people purchase discontinued devices such as the Windows Phone specifically because their deprecation makes them affordable.</p>
<p>Do these people deserve to be hurt because of their circumstances? Of course not.</p>
<h3 id="considering-what-s-harmful"><a href="#aa-considering-whats-harmful" aria-hidden="true" class="aal_anchor" id="aa-considering-whats-harmful"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Considering what’s harmful</h3>
<p>You can tie harm into value, the same way you can with delight. Animation intended to nudge a person towards a signup could also drive them away. This kind of exit metric is more <a href="https://twitter.com/karlgroves/status/1071482532762394624" rel="noopener">difficult to quantify</a>, but it definitely happens. Sometimes the <a href="https://www.washingtonpost.com/news/morning-mix/wp/2017/03/22/tweet-that-sent-journalist-kurt-eichenwald-into-seizure-considered-deadly-weapon-in-indictment/?utm_term=.b0fec737f8a6" rel="noopener">harm is even intentional</a>, and therefore an easier datapoint to capture — what you <a href="https://twitter.com/thelionmachine/status/1101958611549519873" rel="noopener">do with that information</a> is a whole other issue.</p>
<p>If enough harm happens to enough people, it affects that certain something we know as branding. This effect doesn’t even need to be tied to a disability condition. Too much animation, applied to the wrong things in the wrong way will drive people away, even if they can’t precisely articulate <em>why</em>.</p>
<p>You also don’t know who might be on the receiving end, or what circumstances they’re experiencing the moment they load your website or web app. We can’t — <a href="https://css-tricks.com/accessibility-events/">and shouldn’t</a> — know this kind of information, either. It could be a prospective customer, the employee at a venture capitalist firm tasked with evaluating your startup, or maybe even your new boss.</p>
<p>We also don’t need to qualify their relationship to us to determine if their situation is worth considering — <strong>isn’t it enough to just be proactively kind?</strong></p>
<h3 id="animation-is-progressive-enhancement"><a href="#aa-animation-is-progressive-enhancement" aria-hidden="true" class="aal_anchor" id="aa-animation-is-progressive-enhancement"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animation is progressive enhancement</h3>
<p>We also need to acknowledge that <a href="https://css-tricks.com/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first/">not every device that can access the web can also render animation, or render animation smoothly</a>. When animation is used on a low-power or low quality device that “technically” supports it, the overall user experience suffers. Some people even <a href="http://bradfrost.com/blog/post/accessibility-and-low-powered-devices/" rel="noopener">deliberately seek this experience out</a> as a feature.</p>
<p>Devices may also be set to specialized browsing modes to allow people to access your content in alternate ways. This concept is known as being <a href="https://webaim.org/articles/pour/robust" rel="noopener">robust</a>, and is one of <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head" rel="noopener">the four high-level principles</a> that govern <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noopener">the guidelines outlining how to craft accessible experiences</a>.</p>
<p>Animation might not always look the way you intend it in these modes. One example would be when the viewport is zoomed and the animation isn’t built using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#Relative_length_units" rel="noopener">relative units</a>. There’s a non-trivial chance important parts might be pushed out of the viewport, leaving the animation appearing as a random collection of flickering bits. Another example of a specialized browsing mode might be <a href="https://css-tricks.com/reader-mode-the-button-to-beat/">Reader Mode</a>, where the animation may not appear at all.</p>
<h3 id="taking-it-to-code"><a href="#aa-taking-it-to-code" aria-hidden="true" class="aal_anchor" id="aa-taking-it-to-code"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Taking it to code</h3>
<p>Considering all this, I’m wondering if there are opportunities to help web professionals become more aware of, and therefore more considerate of the downsides of poorly conceived and implemented animation.</p>
<p>Maybe we proactively incorporate a media query high up in the cascade to disable all animation for those who desire it, and for those who have devices that can’t support it. This can be accomplished by targeting anything where someone has expressed a desire for a low-to-no-animation experience, or any device that has a slow screen refresh rate.</p>
<p>The first part of the query, targeting low-to-no-animation, is done via <code>prefers-reduced-motion</code>. The second, targeting a screen with a low refresh rate, uses <code>update</code>. <code>update</code> is a new <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Targeting_media_features" rel="noopener">media feature</a> that allows us to <a href="https://www.w3.org/TR/mediaqueries-4/#update" rel="noopener">“query the ability of the output device to modify the appearance of content once it has been rendered.”</a></p>
<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@media screen and
(prefers-reduced-motion: reduce),
(update: slow) {
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important; /* Hat tip Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */
transition-duration: 0.001ms !important;
}
}</code></pre>
<p>This code forces all animation that utilizes a declaration of <code>animation-duration</code> or <code>transition-duration</code> to conclude at a rate that is imperceptible to the human eye. It will work when a person has requested a reduced motion experience, or the device has a screen with a slow refresh rate, say e-ink or a cheap smartphone.</p>
<p>Retaining the animation and transition duration also ensures that any functionality that is tied to <a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript" rel="noopener">CSS-based animation</a> will activate successfully (unlike using a declaration of <code>animation: none</code>), while still preventing a disability condition trigger or creating rendering lag.</p>
<p>This declaration is authored with the intent of introducing some intentional friction into our <a href="https://css-tricks.com/reboot-resets-reasoning/">reset styles</a>. Granted, it’s not a perfect solution, but it does drive at a few things:</p>
<ol><li>Increasing the chances of developers becoming aware of the two media features, by way of making them present in the cascade of every inspected element.</li><li>Providing a moment to consider why and how animation will be introduced into a website or web app, and what the experience should be like for those who can’t or don’t want to experience it.</li><li>Encouraging developers who are less familiar with CSS to think of the cascade in terms of components and nudge them towards making more easily maintainable stylesheets.</li></ol>
<h3 id="animation-isn-t-unnecessary"><a href="#aa-animation-isnt-unnecessary" aria-hidden="true" class="aal_anchor" id="aa-animation-isnt-unnecessary"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animation isn’t unnecessary</h3>
<p>In addition to vestibular disorders and photosensitive conditions, there’s another important aspect of accessibility we must consider: <strong>cognitive disabilities.</strong></p>
<h4 id="cognitive-disabilities"><a href="#aa-cognitive-disabilities" aria-hidden="true" class="aal_anchor" id="aa-cognitive-disabilities"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Cognitive disabilities</h4>
<p>As a concern, <a href="https://webaim.org/articles/cognitive/" rel="noopener">the category is wide and often difficult to quantify</a>, but no less important than <a href="https://webaim.org/intro/#people" rel="noopener">any other accessibility discipline</a>. It is also far more prevalent. To expand on this some, the World Health Organization reports <a href="https://www.who.int/news-room/fact-sheets/detail/mental-disorders" rel="noopener">an estimated 300 million people worldwide are affected by depression</a>, a temporary or permanent, environmental and/or biological condition that can significantly impair your ability to interact with your environment. This includes interfering with your ability to understand the world around you.</p>
<p>Animation can be a great tool to help combat some forms of cognitive disability by using it to break down complicated concepts, or communicate the relationship between seemingly disparate objects. <a href="http://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/#section6" rel="noopener">Val Head’s article on <em>A List Apart</em></a> highlights some other <a href="http://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/#section6" rel="noopener">very well-researched benefits</a>, including helping to increase problem-solving ability, recall, and skill acquisition, as well as reducing <a href="https://en.m.wikipedia.org/wiki/Cognitive_load" rel="noopener">cognitive load</a> and your susceptibility to <a href="https://en.m.wikipedia.org/wiki/Change_blindness" rel="noopener">change blindness</a>.</p>
<h4 id="reduce-isn-t-necessarily-remove"><a href="#aa-reduce-isnt-necessarily-remove" aria-hidden="true" class="aal_anchor" id="aa-reduce-isnt-necessarily-remove"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reduce isn’t necessarily remove</h4>
<p>We may not need to throw the baby out with the bathwater when it comes to using animation. Remember, it’s <code>prefers-<em>reduced</em>-motion</code>, not <code>prefers-no-motion</code>.</p>
<p>If we embrace the cascade, we can work with the animation reset code described earlier on a per-component basis. If the meaning of a component is diminished by removing its animation altogether, we could slow down and simplify the component’s animation to the point where the concept can be communicated without potentially being an accessibility trigger.</p>
<p>If you’re feeling clever, you might even be able to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" rel="noopener">CSS Custom Properties</a> to help achieve this in an efficient way. If you’re feeling <em>extra</em> clever, you could also use these Custom Properties for a site-wide animation preferences widget.</p>
<p>In the following code sample, we’re defining default properties for our animation and transition durations, then modifying them based on the context they’re declared in:</p>
<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Set default durations */
:root {
--animation-duration: 250ms;
--transition-duration: 250ms;
}
/* Contextually shorten duration length */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
:root {
--animation-duration: 0.001ms !important;
--transition-duration: 0.001ms !important;
}
}
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
/* Remove duration for all unknown animation when a user requests a reduced animation experience */
* {
animation-duration: var(--animation-duration);
animation-iteration-count: 1 !important;
transition-duration: var(--animation-duration);
}
}
/* Update the duration when animation is critical to understanding and the device can support it */
@media screen and (prefers-reduced-motion: reduce), (update: fast) {
.c-educational-concept {
/* Set a new animation duration scoped to this component */
--animation-duration: 6000ms !important;
...
animation-name: educational-concept;
/* Use the scoped animation duration */
animation-duration: var(--animation-duration);
}
}</code></pre>
<p>However, trying to test the effectiveness of this slowed-down animation puts us in a bit of a pickle: there’s no real magic number we can write a test against.</p>
<p>We need to have a wide representation of people who are susceptible to animation-based disability triggers to sign off on it being safe, which unfortunately involves subjecting them to something that may potentially not be. That’s a <em>huge</em> ask.</p>
<p>A better approach is to ask about what kinds of animation have been triggers for them in the past, then see if what they describe matches what we’ve made. This approach also puts the onus on yourself, and not the person with a disability, to <a href="https://twitter.com/GHMansfield/status/1119622490010136578" rel="noopener">do the work to provide accommodation</a>.</p>
<p>If you’re having trouble finding people, ask your friends, family, and coworkers — I’m sure there’s more people out there than you think. And if you need a good starting point for creating safer animation, I once again urge you to <a href="http://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/#section7" rel="noopener">read Val’s article on <em>A List Apart</em></a>.</p>
<h4 id="neurodivergence"><a href="#aa-neurodivergence" aria-hidden="true" class="aal_anchor" id="aa-neurodivergence"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Neurodivergence</h4>
<p>There’s a lot to unpack here, and I’m not the most qualified person to talk about it. Here’s what my friend <a href="https://twitter.com/ShellELittle" rel="noopener">Shell Little</a>, an Accessibility Specialist at Wells Fargo DS4B, has to say about it:</p>
<div class="neurodivergence-section">
<blockquote><p>Web animation as it relates to Neurodivergence (ND) can be a fantastic tool to guide users to solidify meaning and push understanding. The big issue is the same animation that can assist one group of <abbr title="Neurodivergence">ND</abbr> users can create a barrier for another. As mentioned by Eric, Neurodivergence is a massive group of people with a vast range of abilities and covers a wide variety of cognitive disabilities including but not limited to <abbr title="Attention Deficit Hyperactive Disorder">ADHD</abbr>, autism, dyslexia, epilepsy, dyscalculia, obsessive-compulsive disorder, dyspraxia, and Tourette syndrome.</p><p>When speaking about motion on the web it’s important we think specifically about attention-related disabilities, autism, and sensory processing disorders that are also closely linked to both. These groups of people, who coincidentally includes me, are especially sensitive to motion as it relates to understanding information and interacting with the web as a whole. Animations can easily overwhelm, distract, and frustrate users who are sensitive to motion and from personal experience, it can even do all three at once.</p><p>Because so many people are affected by motion and animation on the web the W3C’s <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> have a criterion named <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html" rel="noopener">Pause, Stop, Hide</a> that is specifically written to guide content creators on how to best create accessible animations. My main issues with this guideline are, it only applies to animations that last longer than 5 seconds and motion that is deemed essential is exempt from the standard. That means a ton of animations that can create barriers such as distraction, dizziness, and even harm are out there in the wild.</p><p>It makes sense, as Eric mentioned, that we can’t get rid of all animation. Techniques such as spinners let users know the page is still working on the task it was given, and micro-interactions help show progression. But depending on someone’s brain, the things that are helpful at lunch can be a barrier later that night. Someone’s preferences and needs shift throughout their day, and that’s the beauty of <code>prefers-reduced-motion</code>. It has the potential to be what fills the gaps left by Pause, Stop, Hide and allow users to decide when they do or do not want to have motion. That right there is priceless to someone like me.</p><p>As someone with an attention-related disability, an interaction I have found to be exceedingly frustrating is autoplay. Many media sharing sites have auto-playing content such as videos, gifs, and ads but because they can be paused, they pass the <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> standard. That doesn’t mean they aren’t a huge barrier for me as I can’t read any text around them when they are playing. This causes me to have to pause every single moving item I run into. This not only significantly slows me down, and eats away at <a href="https://en.m.wikipedia.org/wiki/Spoon_theory" rel="noopener">my limited spoons</a>, but it also derails my task flow and train of thought. Now, it is true some sites — such as Twitter and LinkedIn — have settings to turn autoplay off, but this isn’t true for all sites. This would be a perfect place for <code>prefers-reduced-motion</code>.</p><p>In a world where I would be able to determine when and if I want videos to start playing at me, I would be able to get more done with less cognitive strain. <code>prefers-reduced-motion</code> is freedom for me and the millions of people whose brains work like mine. In sum, the absolute best thing we can do for our users who are sensitive to motion is to put a system in place that empowers them to decide when and where animation should be displayed to them. Let the user decide because they will always know their access needs better than we do.</p></blockquote>
</div>
<div class="article-content">
<p>Thanks, Shell!</p>
<h3><a href="#aa-i-dont-hate-fun-i-just-dont-want-to-hurt-people" aria-hidden="true" class="aal_anchor" id="aa-i-dont-hate-fun-i-just-dont-want-to-hurt-people"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I don’t hate fun, I just don’t want to hurt people</h3>
<p>On my own time, I’m fortunate enough to be able to enjoy animation. I appreciate the large amounts of time and attention involved with making something come alive on the screen, and I’ve definitely put my fair share of time ooh-ing and aah-ing over <a href="https://codepen.io/search/pens?q=animation&amp;page=1&amp;order=popularity&amp;depth=everything" rel="noopener">other people’s amazing work in CodePen</a>. I’ve also watched enough DC Animated Universe to be able to instantly recognize Kevin Conroy’s voice — if you’re looking for even deeper nerd cred, Masaaki Yuasa is a seriously underrated animator.</p>
<p>However, I try to not overly rely on animation as a web professional. There’s a number of factors as to why:</p>
<ol>
<li>First is simply pushing on awareness of the concerns outlined earlier, as many are unaware they exist. Animation has such a <a href="http://adrianroselli.com/2016/06/we-reward-the-wrong-things.html" rel="noopener">crowd-pleasing gee-whiz factor</a> to it that it’s often quickly accepted into a product without a second thought.</li>
<li>Second is mitigating risk. Not adhering to the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noopener">Web Content Accessibility Guidelines (WCAG)</a> — including <a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html" rel="noopener">provisions for animation</a> — means your inaccessible website or web app becomes a legal liability. There is now legal precedent for the websites and web apps of <a href="https://aoda.ca/airline-fined-for-separate-disabled-accessible-website/" rel="noopener">private companies being sued</a>, so it’s a powerful metric to weigh your choices against.</li>
<li>Third is user experience. With that gee-whiz factor, people tend to forget that being forced to repeatedly view that super-slick animation over and over again will eventually become a tedious chore. There’s a reason why we no longer make <a href="http://www.sharperfx.com/kkmime/index13.htm" rel="noopener">90s-style loading screens (<strong>content warning:</strong> high-contrast strobing and flickering</a>, Flash, mimes). If you need a more contemporary example, consider why <a href="https://help.netflix.com/en/node/63402" rel="noopener">Netflix lets us skip TV show intros</a>.</li>
<li>Fourth is understanding the lay of the land. While <code>prefers-reduced-motion</code> is getting more support, the majority of it is on desktop browsers, and not mobile. We’re not exactly a desktop-first world anymore, especially if you’re in an <a href="https://www.pewresearch.org/fact-tank/2017/03/22/digital-divide-persists-even-as-lower-income-americans-make-gains-in-tech-adoption/" rel="noopener">underserved community</a> or <a href="https://www.pewglobal.org/2019/02/05/smartphone-ownership-is-growing-rapidly-around-the-world-but-not-always-equally/" rel="noopener">emerging market</a>. A mobile form factor also may exacerbate vestibular issues. Moving around while using your device means you may lose a fixed reference point, unlike sitting at a desk and staring at a monitor — this kind of trigger is similar to why some of us can get seasick.</li>
<li>The fifth factor is a bit of a subset of the fourth. Animation eats device data and battery, and it’s important to remember that <a href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/" rel="noopener">it’s the world wide web, not the wealthy Western web</a>. The person using your service may not have consistent and reliable access to income or power, so you want to get to know your audience before <a href="https://whatdoesmysitecost.com/" rel="noopener">spending their money for them</a>.</li>
</ol>
<h3><a href="#aa-the-ask" aria-hidden="true" class="aal_anchor" id="aa-the-ask"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The ask</h3>
<p>Not everyone who could benefit from <code>prefers-reduced-motion</code> cares about accessibility-related content, so I’d love to see the media query start showing up in the code of more popular sites. The only real way to do this is to spread awareness. Not only of the media query, but more importantly, understanding the nuance involved with using animation responsibly.</p>
<p>CSS-Tricks is a popular website for the frontend industry, and I’m going to take advantage of that. If you feel comfortable sharing, what I would love is to describe what kinds of animation have been problematic for you, in either <a href="#comments">the comments</a> or <a href="https://twitter.com/ericwbailey/status/1123199814106324993" rel="noopener">on Twitter</a>.</p>
<p>The idea here is we can help build a reference of what kinds of things to be on the lookout for animation-wise. Hopefully, with time and a little luck, we can all help make the web better for everyone.</p>
<hr>
<p>Thanks to <a href="https://www.scottohara.me/" rel="noopener">Scott O’Hara</a>, <a href="https://www.zachleat.com/web/" rel="noopener">Zach Leatherman</a>, <a href="https://twitter.com/ShellELittle" rel="noopener">Shell Little</a>, and <a href="https://twitter.com/geoffreygraham" rel="noopener">Geoff Graham</a> for reviewing this article.</p>
</div>
</div>
</article>
</main>
<div class="related-ads-comments-wrap">
<div class="related-ads-comments">
<div class="articles-and-sidebar">
<div class="after-article-note article-sponsor">
You’ve got the talent — all you need now is the tools. Claim <a href="https://www.cloudways.com/en/css-tricks.php?id=1223312&data1=Post-Article&data2=promo_51_talent">$50 in free hosting credit</a> on Cloudways with code <code>CSSTRICKS</code>!
</div>
</div>
<section class="respond-area">
<h2 class="comments-title" id="comments">
<span>Comments</span>
</h2>
<ol class="commentlist" id="commentlist">
<li class="comment even thread-even depth-1" id="li-comment-1700054">
<div class="comment-wrap" id="comment-1700054">
<div class="comment-author-wrap">
<div class="comment-author">Shannon Young</div> <div class="comment-time"><a href="https://css-tricks.com/revisiting-prefers-reduced-motion/#comment-1700054"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2019-05-01T01:41:53-07:00">May 1, 2019</time></div>
</div>
<div class="comment-content">
<p>I like this advice from <a href="https://developers.google.com/web/updates/2019/03/prefers-reduced-motion" rel="nofollow ugc">Google</a>:</p>
<blockquote><p>
If you have a lot of animation-related CSS, you can spare your opted-out users from downloading it by outsourcing all animation-related CSS into a separate stylesheet that you only load conditionally via the media attribute on the link element </p>
<p> <code>&lt;link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)"&gt;</code>
</p></blockquote>
</div>
<div class="comment-actions">
<div class="reply">
</div>
</div>
</div>
<ul class="children">
<li class="comment odd alt depth-2" id="li-comment-1700231">
<div class="comment-wrap" id="comment-1700231">
<div class="comment-author-wrap">
<div class="comment-author">Andrey Sitnik</div> <div class="comment-time"><a href="https://css-tricks.com/revisiting-prefers-reduced-motion/#comment-1700231"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2019-05-01T10:56:56-07:00">May 1, 2019</time></div>
</div>
<div class="comment-content">
<p>Here is useful Stylelint plugin to warn you about missed reduce motion media</p>
<p><a href="https://github.com/YozhikM/stylelint-a11y" rel="nofollow ugc">https://github.com/YozhikM/stylelint-a11y</a></p>
</div>
<div class="comment-actions">
<div class="reply">
</div>
</div>
</div>
</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1 featured" id="li-comment-1700170">
<div class="comment-wrap" id="comment-1700170">
<div class="comment-author-wrap">
<div class="comment-author">Nick</div> <div class="comment-time"><a href="https://css-tricks.com/revisiting-prefers-reduced-motion/#comment-1700170"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2019-05-01T07:31:54-07:00">May 1, 2019</time></div>
</div>
<div class="comment-content">
<p>Great article! However, for infinite animations, you&#8217;ll want to include an animation-iteration-count override as well. Otherwise, the animation will continue playing VERY fast. Here&#8217;s my media-query (mostly stolen from <a href="https://github.com/mozdevs/cssremedy/issues/11#issuecomment-462867630" rel="nofollow ugc">the cssremedy project</a>):</p>
<pre><code>@media (prefers-reduced-motion: reduce) {
*:not(.safe-animation),
*:not(.safe-animation)::before,
*:not(.safe-animation)::after {
animation-duration: 0.01s !important;
animation-iteration-count: 1 !important;
transition-duration: 0s !important;
scroll-behavior: auto !important;
}
}
</code></pre>
</div>
<div class="comment-actions">
<div class="reply">
</div>
</div>
</div>
<ul class="children">
<li class="comment byuser comment-author-ericwbailey bypostauthor odd alt depth-2" id="li-comment-1700330">
<div class="comment-wrap" id="comment-1700330">
<div class="comment-author-wrap">
<div class="comment-author">Eric Bailey</div> <div class="comment-time"><a href="https://css-tricks.com/revisiting-prefers-reduced-motion/#comment-1700330"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2019-05-01T18:08:33-07:00">May 1, 2019</time></div>
</div>
<div class="comment-content">
<p>Ah, that&#8217;s a great catch, I&#8217;ll incorporate it into my code above with credit. And I hadn&#8217;t seen that discussion thread before, that&#8217;s some really good stuff from some really smart people. Thanks for both!</p>
</div>
<div class="comment-actions">
<div class="reply">
</div>
</div>
</div>
</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
<li class="comment byuser comment-author-facundo-corradini even thread-even depth-1" id="li-comment-1700905">
<div class="comment-wrap" id="comment-1700905">
<div class="comment-author-wrap">
<div class="comment-author">Facundo Corradini</div> <div class="comment-time"><a href="https://css-tricks.com/revisiting-prefers-reduced-motion/#comment-1700905"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2019-05-03T06:35:20-07:00">May 3, 2019</time></div>
</div>
<div class="comment-content">
<p>Great Article, Eric! And thanks for the shoutout!</p>
<p>Wouldn&#8217;t it be better if we set the non-animating version as the default, and query for the no-preference choice, setting the animation there instead?</p>
<p>That way we&#8217;d err on the safe side and hide animations from users running browsers that don&#8217;t support this query (Edge) or media queries at all (IE)</p>
<p>This might have felt ridiculous just a week ago, but now that Chrome supports it, it feels like the safest option</p>
</div>
<div class="comment-actions">
<div class="reply">
</div>
</div>
</div>
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1722436">
<div class="comment-wrap" id="comment-1722436">
<div class="comment-author-wrap">
<div class="comment-author">Moritz Gießmann</div> <div class="comment-time"><a href="https://css-tricks.com/revisiting-prefers-reduced-motion/#comment-1722436"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2019-06-16T10:53:58-07:00">June 16, 2019</time></div>
</div>
<div class="comment-content">
<p>Thanks for this article. It found it really helpful!</p>
<p>Aiming towards a general copy paste solution for my projects I had to extend the code a little and thought you might find it helpful.</p>
<p>For my use it was missing pseudo-elements, transition-delay and animation-delay.<br />
So here’s what I came up with:</p>
<pre><code>@media screen and (prefers-reduced-motion: reduce), (update: slow) {
*,
*:before,
*:after {
animation-duration: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
animation-delay: 0s !important;
}
}
</code></pre>
</div>
<div class="comment-actions">
<div class="reply">
</div>
</div>
</div>
</li><!-- #comment-## -->
</ol>
<div class="comments-closed">
This comment thread is closed. If you have important information to share, please <a href="/contact/">contact us</a>.
</div>
</section> <div class="related-posts">
<div id='jp-relatedposts' class='jp-relatedposts' >
</div></div> </div>
</div>
</div>
<footer class="site-footer">
<svg class="icon-logo-star" width="35px" height="35px" viewBox="0 0 362.62 388.52" data-spin-me="false">
<path d="M156.58,239l-88.3,64.75c-10.59,7.06-18.84,11.77-29.43,11.77-21.19,0-38.85-18.84-38.85-40C0,257.83,14.13,244.88,27.08,239l103.6-44.74L27.08,148.34C13,142.46,0,129.51,0,111.85,0,90.66,18.84,73,40,73c10.6,0,17.66,3.53,28.25,11.77l88.3,64.75L144.81,44.74C141.28,20,157.76,0,181.31,0s40,18.84,36.5,43.56L206,149.52l88.3-64.75C304.93,76.53,313.17,73,323.77,73a39.2,39.2,0,0,1,38.85,38.85c0,18.84-12.95,30.61-27.08,36.5L231.93,194.26,335.54,239c14.13,5.88,27.08,18.83,27.08,37.67,0,21.19-18.84,38.85-40,38.85-9.42,0-17.66-4.71-28.26-11.77L206,239l11.77,104.78c3.53,24.72-12.95,44.74-36.5,44.74s-40-18.84-36.5-43.56Z" />
</svg>
<div class="footer-inside">
<div class="footer-message-and-form">
<p class="colophon">
CSS-Tricks is powered by <a href="https://www.digitalocean.com/?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">DigitalOcean</a>.
</p>
<div class="footer-form-wrap">
<h4>Keep up to date on web dev</h4>
<p>with our hand-crafted newsletter</p>
<script src="//anchor.digitalocean.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1402"></form>
<script>MktoForms2.loadForm("//anchor.digitalocean.com", "113-DTN-266", 1402);</script>
</div> </div>
<div class="link-grid">
<div>
<div>
<h5>DigitalOcean</h5>
<ul>
<li><a href="https://www.digitalocean.com/?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">DigitalOcean</a></li>
<li><a href="https://www.digitalocean.com/community/?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">DigitalOcean Community</a></li>
<li><a href="https://www.digitalocean.com/about/?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">About DigitalOcean</a></li>
<li><a href="https://www.digitalocean.com/legal/?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">Legal</a></li>
<li><a href="https://try.digitalocean.com/css-tricks/?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">Free Credit Offer</a></li>
</ul>
</div>
</div>
<div>
<div>
<h5>CSS-Tricks</h5>
<ul>
<li><a href="/cdn-cgi/l/email-protection#d7b4a4a4faa3a5beb4bca497b3beb0bea3b6bbb8b4b2b6b9f9b4b8ba">Email</a></li>
<li><a href="/guest-writing-for-css-tricks/">Guest Writing</a></li>
<li><a href="/books/greatest-css-tricks/">Book</a></li>
<li><a href="/advertising/">Advertising</a></li>
</ul>
</div>
</div>
<div>
<div>
<h5>Follow</h5>
<ul style="columns: 2;">
<li><a href="https://twitter.com/css">Twitter</a></li>
<li><a href="https://www.instagram.com/real_css_tricks/">Instagram</a></li>
<li><a href="https://www.youtube.com/user/realcsstricks">YouTube</a></li>
<li><a href="https://codepen.io/team/css-tricks">CodePen</a></li>
<li><a href="https://podcasts.apple.com/us/podcast/css-tricks-screencasts/id273881728">iTunes</a></li>
<li><a href="/feed/">RSS</a></li>
</ul>
</div>
</div>
</div>
</div>
<a href="#top-of-site" class="top-of-site-link" data-visible="false">
<span class="screen-reader-text">Back to Top</span>
<svg width="32" height="32" viewBox="0 0 100 100">
<path fill="white" d="m50 0c-13.262 0-25.98 5.2695-35.355 14.645s-14.645 22.094-14.645 35.355 5.2695 25.98 14.645 35.355 22.094 14.645 35.355 14.645 25.98-5.2695 35.355-14.645 14.645-22.094 14.645-35.355-5.2695-25.98-14.645-35.355-22.094-14.645-35.355-14.645zm20.832 62.5-20.832-22.457-20.625 22.457c-1.207 0.74219-2.7656 0.57812-3.7891-0.39844-1.0273-0.98047-1.2695-2.5273-0.58594-3.7695l22.918-25c0.60156-0.61328 1.4297-0.96094 2.2891-0.96094 0.86328 0 1.6914 0.34766 2.293 0.96094l22.918 25c0.88672 1.2891 0.6875 3.0352-0.47266 4.0898-1.1562 1.0508-2.9141 1.0859-4.1133 0.078125z"/>
</svg>
</a>
</footer>
<div class="jetpack-instant-search__widget-area" style="display: none">
<div id="jetpack-search-filters-6" class="widget jetpack-filters widget_search"> <div id="jetpack-search-filters-6-wrapper" class="jetpack-instant-search-wrapper">
</div></div><div id="media_image-3" class="widget widget_media_image"><a href="https://jetpack.com/upgrade/search/?aff=8638"><img width="600" height="444" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/09/Jetpack-Search-on-CSS-Tricks-Instant-Search.png?fit=600%2C444&amp;ssl=1" class="image wp-image-321694 attachment-full size-full" alt="" loading="lazy" style="max-width: 100%; height: auto;" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/09/Jetpack-Search-on-CSS-Tricks-Instant-Search.png?w=600&amp;ssl=1 600w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/09/Jetpack-Search-on-CSS-Tricks-Instant-Search.png?resize=300%2C222&amp;ssl=1 300w" sizes="(min-width: 735px) 864px, 96vw" /></a></div> </div>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src='https://c0.wp.com/p/jetpack/11.3.2/_inc/build/photon/photon.min.js' id='jetpack-photon-js'></script>
<script id='jetpack-instant-search-js-before'>
var JetpackInstantSearchOptions=JSON.parse(decodeURIComponent("%7B%22overlayOptions%22%3A%7B%22colorTheme%22%3A%22dark%22%2C%22enableInfScroll%22%3Afalse%2C%22enableSort%22%3Atrue%2C%22highlightColor%22%3A%22%23f4af38%22%2C%22overlayTrigger%22%3A%22immediate%22%2C%22resultFormat%22%3A%22expanded%22%2C%22showPoweredBy%22%3Atrue%2C%22defaultSort%22%3A%22relevance%22%2C%22excludedPostTypes%22%3A%5B%22attachment%22%5D%7D%2C%22homeUrl%22%3A%22https%3A%5C%2F%5C%2Fcss-tricks.com%22%2C%22locale%22%3A%22en-US%22%2C%22postsPerPage%22%3A11%2C%22siteId%22%3A45537868%2C%22postTypes%22%3A%7B%22post%22%3A%7B%22singular_name%22%3A%22Post%22%2C%22name%22%3A%22Posts%22%7D%2C%22page%22%3A%7B%22singular_name%22%3A%22Page%22%2C%22name%22%3A%22Pages%22%7D%2C%22attachment%22%3A%7B%22singular_name%22%3A%22Media%22%2C%22name%22%3A%22Media%22%7D%2C%22guides%22%3A%7B%22singular_name%22%3A%22Guide%22%2C%22name%22%3A%22Guides%22%7D%2C%22newsletters%22%3A%7B%22singular_name%22%3A%22Newsletter%22%2C%22name%22%3A%22Newsletters%22%7D%2C%22chapters%22%3A%7B%22singular_name%22%3A%22Chapter%22%2C%22name%22%3A%22Chapters%22%7D%7D%2C%22webpackPublicPath%22%3A%22https%3A%5C%2F%5C%2Fcss-tricks.com%5C%2Fwp-content%5C%2Fplugins%5C%2Fjetpack%5C%2Fjetpack_vendor%5C%2Fautomattic%5C%2Fjetpack-search%5C%2Fbuild%5C%2Finstant-search%5C%2F%22%2C%22isPhotonEnabled%22%3Atrue%2C%22apiRoot%22%3A%22https%3A%5C%2F%5C%2Fcss-tricks.com%5C%2Fwp-json%5C%2F%22%2C%22apiNonce%22%3A%22079f61b664%22%2C%22isPrivateSite%22%3Afalse%2C%22isWpcom%22%3Afalse%2C%22hasOverlayWidgets%22%3Atrue%2C%22widgets%22%3A%5B%7B%22filters%22%3A%5B%7B%22name%22%3A%22Post%20Types%22%2C%22type%22%3A%22post_type%22%2C%22count%22%3A5%2C%22widget_id%22%3A%22jetpack-search-filters-6%22%2C%22filter_id%22%3A%22post_type_0%22%7D%2C%7B%22name%22%3A%22Topic%20Tags%22%2C%22type%22%3A%22taxonomy%22%2C%22taxonomy%22%3A%22topic-tag%22%2C%22count%22%3A5%2C%22widget_id%22%3A%22jetpack-search-filters-6%22%2C%22filter_id%22%3A%22taxonomy_1%22%7D%2C%7B%22name%22%3A%22Gallery%20Tags%22%2C%22type%22%3A%22taxonomy%22%2C%22taxonomy%22%3A%22gallerytags%22%2C%22count%22%3A5%2C%22widget_id%22%3A%22jetpack-search-filters-6%22%2C%22filter_id%22%3A%22taxonomy_2%22%7D%2C%7B%22name%22%3A%22Categories%22%2C%22type%22%3A%22taxonomy%22%2C%22taxonomy%22%3A%22category%22%2C%22count%22%3A5%2C%22widget_id%22%3A%22jetpack-search-filters-6%22%2C%22filter_id%22%3A%22taxonomy_3%22%7D%2C%7B%22name%22%3A%22Tags%22%2C%22type%22%3A%22taxonomy%22%2C%22taxonomy%22%3A%22post_tag%22%2C%22count%22%3A5%2C%22widget_id%22%3A%22jetpack-search-filters-6%22%2C%22filter_id%22%3A%22taxonomy_4%22%7D%2C%7B%22name%22%3A%22Year%22%2C%22type%22%3A%22date_histogram%22%2C%22count%22%3A5%2C%22field%22%3A%22post_date%22%2C%22interval%22%3A%22year%22%2C%22widget_id%22%3A%22jetpack-search-filters-6%22%2C%22filter_id%22%3A%22date_histogram_5%22%7D%5D%2C%22widget_id%22%3A%22jetpack-search-filters-6%22%7D%5D%2C%22widgetsOutsideOverlay%22%3A%5B%5D%2C%22hasNonSearchWidgets%22%3Atrue%2C%22adminQueryFilter%22%3A%7B%22bool%22%3A%7B%22should%22%3A%5B%7B%22term%22%3A%7B%22post_type%22%3A%22post%22%7D%7D%2C%7B%22term%22%3A%7B%22post_type%22%3A%22page%22%7D%7D%2C%7B%22term%22%3A%7B%22post_type%22%3A%22newsletters%22%7D%7D%2C%7B%22term%22%3A%7B%22post_type%22%3A%22chapters%22%7D%7D%5D%7D%7D%7D"));
</script>
<script src='https://css-tricks.com/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-search/build/instant-search/jp-search.js?minify=false&#038;ver=4164ae1917f0fad5b5df' id='jetpack-instant-search-js'></script>
<script src='//stats.wp.com/w.js?ver=202241' id='jp-tracks-js'></script>
<script src='https://css-tricks.com/wp-content/themes/CSS-Tricks-19/js/min/jquery-3.5.1.min.js' id='jquery-js'></script>
<script type='text/javascript' id='jetpack-live-comment-markdown-js-extra'>
/* <![CDATA[ */
var markdownify = {"ajax_url":"\/wp-admin\/admin-ajax.php","nonce":"b2af6740b8"};
/* ]]> */
</script>
<script src='https://css-tricks.com/wp-content/plugins/jetpack-markdown-live-preview-comments/js/markdownify.js?ver=1' id='jetpack-live-comment-markdown-js'></script>
<script src='https://stats.wp.com/e-202241.js' defer></script>
<script>
_stq = window._stq || [];
_stq.push([ 'view', {v:'ext',j:'1:11.3.2',blog:'45537868',post:'286790',tz:'-7',srv:'css-tricks.com'} ]);
_stq.push([ 'clickTrackerInit', '45537868', '286790' ]);
</script>
<script src="https://css-tricks.com/wp-content/themes/CSS-Tricks-19/js/min/global-concat.min.js?cache_bust=1664988145389"></script>
<script>
// Google Analytics
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68528-29', 'auto');
if (typeof articleYear !== "undefined") {
ga('set', 'dimension1', articleYear);
}
if (typeof articleAuthor !== "undefined") {
ga('set', 'dimension2', articleAuthor);
}
if (typeof articleType !== "undefined") {
ga('set', 'dimension3', articleType);
}
ga('send', 'pageview');
</script>
<script>
// Segment Analytics
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="nnmtLrk127wcC9ggBpAutRr4F4x4TMVz";;analytics.SNIPPET_VERSION="4.15.3";
analytics.load("nnmtLrk127wcC9ggBpAutRr4F4x4TMVz");
const analyticsProperties = {};
if (typeof articleID !== "undefined") {
analyticsProperties.article_id = articleID;
}
if (typeof articleYear !== "undefined") {
analyticsProperties.article_year = articleYear;
}
if (typeof articleAuthor !== "undefined") {
analyticsProperties.article_author = articleAuthor;
}
if (typeof articleType !== "undefined") {
analyticsProperties.article_type = articleType;
}
analytics.page({
properties: analyticsProperties
});
}}();
</script>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
<svg width="0" height="0" class="screen-reader">
<defs>
<linearGradient id="orange-to-pink" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stop-color="#ff7a18" />
<stop offset="40%" stop-color="#af002d" />
<stop offset="100%" stop-color="#319197" />
</linearGradient>
<filter id="duotone_orange_pink">
<feColorMatrix type="matrix" result="grayscale" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0">
</feColorMatrix>
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
<feFuncR type="table" tableValues="0.7411764706 0.9882352941"></feFuncR>
<feFuncG type="table" tableValues="0.0431372549 0.7333333333"></feFuncG>
<feFuncB type="table" tableValues="0.568627451 0.05098039216"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer>
</filter>
</defs>
</svg>
</body>
</html>
Reference in a new issue View git blame Copy permalink