修复级别

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费信用额度!

在网络上,我们有机会做一些工作来为人们解决问题。对我来说,这些修复的范围如此不同,真是令人着迷。

考虑媒体查询 prefers-reduced-motion。Eric 写道

我认为,prefers-reduced-motion 的真正价值在于:不仅仅是吸引 LinkedIn 上那些渴望流行语的招聘人员,而是提升那些受益于其效果的人们的日常生活质量。使用此媒体查询可以避免有人因仅仅出于好奇点击链接或向下滚动页面而不得不忍受大量不必要的痛苦。

使用此媒体查询的唯一目的是让用户在网络上的体验更好。我们可以编写代码,为明确要求减少动画的用户减少动画。

值得注意的是,人们要求减少动画并不意味着他们要求完全没有动画。 但让我们暂时把它放在一边。如果您没有准备好进行细致的工作来确定哪个级别的减少最适合您的用户,最好还是倾向于零动画。

所以,假设我们要删除一个网站的所有动画。我们可以这样做

@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;
  }
}

通过这样做,我们为 **所有** 偏好减少动画的用户修复了 **所有** 这些用户的 **一个** 网站。这是我们可以达成的其中一个范围。

作为一名网络工作者,我们还可以做的事情是 构建一个浏览器扩展。不可思议的是,网络有一个标准化的扩展格式,因此您只需编写一次,就可以将其发布到任何桌面浏览器。当您构建扩展时,您实际上无法强迫任何人使用它,而且访问您网站的人中只有很少一部分会安装它,更不用说那些可以从中受益的人了。但对于那些安装了扩展的人来说,**您不仅修复了 **一个** 网站,而是为 **一个人** 修复了 **所有** 网站。** 这是一个非常不同,但也非常有趣和强大的范围。

难怪有些人会被吸引到浏览器本身的工作中。或者是为了指导这项工作的标准化组织。我并不是说浏览器应该或会实施类似于 CSS 级别强制减少动画的功能,但它们 *可以*。如果您在浏览器或标准级别修复了一些东西,您可能只是修复了 **所有** 网站的 **所有** 用户的东西,这是最大的范围。

这些不同的范围是我觉得很有意思的地方

  • 修复 **一个** 网站的 **所有** 用户
  • 修复 **所有** 网站的 **一个** 用户
  • 修复 **所有** 网站的 **所有** 用户

您不必只选择一个。我们大多数人可能大部分工作都在第一个类别中。但值得思考一下,您的工作是否可以朝着其他方向发展。