Levels of Fix
Publikováno: 20.7.2020
On the web, we have the opportunity to do work that fixes things for people. It’s fascinating to me how different the scope of those fixes can be.
Consider the media query prefers-reduced-motion
. Eric wrote:
I think it’s also worth pointing out the true value
prefers-reduced-motion
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
… Read article “Levels of Fix”
The post Levels of Fix appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
On the web, we have the opportunity to do work that fixes things for people. It’s fascinating to me how different the scope of those fixes can be.
Consider the media query prefers-reduced-motion
. Eric wrote:
I think it’s also worth pointing out the true value
prefers-reduced-motion
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.
The use of this media query is exclusively to make people’s experience on the web better. We can write code that reduces motion for users who have explicitly asked for reduced motion.
It’s worth noting that because people ask for reduced motion doesn’t mean they are asking for absolutely zero motion. But let’s set that aside for a moment. It’s probably better to err toward zero if you aren’t prepared to do the nuanced work of figuring out what level of reduction is best for your users.
So let’s say we’re going to nuke all motion for a site. We could do this:
@media (prefers-reduced-motion: reduce), (update: slow) {
*, ::before, ::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
}
By doing that, we fix the site for all users who prefer less motion for all of those users, for one site. That’s one scope we can hit.
Another thing we could do as a web worker is build a browser extension. Miraculously, the web has a standardized format for extensions, so you can largely write it once and ship the thing to any desktop browser. When you build an extension, you can’t really force anyone to use it, and chances are that a very low percentage of people visiting your site will have it installed, even less so of those who could benefit from it. But for those that do, you’ve fixed not just one site but all sites for that one person. That’s a very different but also very interesting and powerful scope.
It’s no wonder then that some people are drawn to working on the browsers themselves. Or for the standards organizations that guide that work. I’m not saying that browsers should or would implement something like forced reduced motion at the CSS level, but they could. And if you fix something at the browsers or standards level, you might just fix something for all sites for all users, which is the biggest scope there is.
It’s these different scopes that are so interesting to me:
- Fixing one site for all users
- Fixing all sites for one user
- Fixing all sites for all users
You don’t have to just pick just one. Most of us probably do most of our work in that first bucket. But it’s worth thinking about if any of your work could go towards the others.
The post Levels of Fix appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.