使用 CSS 和 JavaScript 适应用户动作和主题偏好

作者：Oscar Jite-Orimiono✏️

互联网充满了色彩、动画和图形效果，这些可以使网站既迷人又过度刺激。作为前端爱好者和专业人士，我们需要在充满活力的视觉效果与易于使用、以用户为中心的选项之间取得平衡，以适应那些喜欢更柔和体验的人。

在本文中，我们将通过查看以下项目来事半功倍：

• 学习使用偏好减少运动和偏好颜色方案等媒体查询来管理动画和主题
• 遵循@media规则中的正确语法来应用用户首选项
• 查看“prefers-reduced-data”等选项，可最大程度地减少连接受限的用户的数据使用

运动偏好

对于许多用户来说，动画可以增强他们在网站上的体验，但它们可能会妨碍其他用户。过多的运动可能会导致不适或分散注意力，而且还可能导致性能问题。

prefers-reduced-motion 媒体查询检查用户是否在其计算机上启用了限制网站动画的设置。您可以为喜欢减少动作的用户修改或完全禁用动画。

首先，让我们创建一个带有一些动画的网页。动画条纹背景怎么样？

这是该页面的 HTML：

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

这是带有动画条纹的效果：

无首选项语法适用于没有首选项设置的用户，而reduce则适用于有首选项设置的用户。您可以为喜欢减少运动的用户完全禁用或修改动画。以下是如何使用prefers-reduced-motion媒体查询禁用移动背景：

@media (prefers-reduced-motion: reduce) {
  .container::before {
    animation: none;
  }
}

旁注：在运行 Windows 11 的设备上，您可以通过进入设置、选择辅助功能、然后视觉效果并关闭来禁用动画动画效果。对于几乎所有类型的设备/操作系统，该过程都是类似的。

这是一个 CodePen：

您可以选择更改动画类型而不是禁用它们。例如，对于喜欢减少运动的用户，您可以使用淡入动画，而不是滑入变换动画。

如果您使用滚动动画且元素从页面一侧滑入，则可以切换到更简单的效果，例如淡入。

这是简单滚动动画的 CSS：

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

在此示例中，框元素将从网页右侧淡入并向左侧移动。此运动由变换属性控制，因此您可以简单地为喜欢减少运动的用户删除它：

@media (prefers-reduced-motion: reduce) {
  .container::before {
    animation: none;
  }
}

没有偏好的用户在滚动时会看到这个：

这是使用reduce的用户将看到的内容：

通过偏好减少运动媒体查询，您可以根据用户的需求调整/减慢复杂的动画或完全禁用它们。

这里有一个 CodePen 可以与之交互，您可以在设备上禁用动画以查看差异：

患有晕动病和眩晕等前庭疾病的用户在观看动画时可能会感到迷失方向或头晕。对于喜欢简单 UI 的用户来说，动画也会分散他们的注意力。

拥有减少运动的选项将使网站对于运动敏感的用户使用起来更加舒适。

主题偏好

现在，网站和应用程序可以选择从浅色主题切换到深色主题，这是一种常见的做法。有些网站根据系统偏好为您提供额外的选项。

prefers-color-scheme 媒体查询检测用户是否喜欢深色或浅色主题。用户可以根据自己的设备设置获得默认主题。

这是一个浅色网页：

这是用户在默认主题为浅色时将看到的内容。然后，您可以使用首选颜色方案来创建深色主题：

.box {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
  transform: translateX(0);
  opacity: 1;
}
@keyframes reveal {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

为浅色和深色模式编写这样的 CSS 规则可能会耗费太多工作，尤其是当多个属性共享相同值时。使用变量来绘制配色方案将帮助您避免重复：

@media (prefers-reduced-motion: reduce) {
  .box {
    transform: translateX(0);
  }
}

这是与之前相同的页面的屏幕截图，但激活了黑暗模式：

这是一个您可以与之交互的 CodePen：

prefers-color-scheme 不仅限于颜色；你可以用它来交换图像：

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

以下是浅色模式下的网页截图：

背景照片由 Unsplash 上的 Plufow Le Studio 拍摄。

这是深色模式下的页面：

[标题>
背景照片由 Unsplash 上的 Plufow Le Studio 拍摄。

最佳实践

使用前请务必测试颜色对比度，以确保更好的可读性。有多种工具可以帮助您选择要使用的颜色。

切换主题时考虑所有可能需要更新的元素，而不仅仅是背景和文本。这就是为什么使用 CSS 变量存储主题是一个好主意，您可能需要提供按钮、阴影、边框、链接等的替代项。

执行

实现用户首选项的最直接方法是使用@media规则。您必须指定运动或主题的首选项，否则媒体查询内的 CSS 规则将覆盖任何其他规则或设备设置。

这意味着对于运动偏好，您必须指定它是减少还是无偏好，对于主题，它是浅色还是深色：

@media (prefers-reduced-motion: reduce) {
  .container::before {
    animation: none;
  }
}

这在测试代码时很有用，但请务必在实现之前指定确切的首选项。

使用 JavaScript 实现用户首选项

用户偏好也可以使用 JavaScript 来实现。您可以根据用户偏好向特定元素添加新类。

使用我们的第一个带有动画条纹的示例，以下是如何使用 JavaScript 检查用户偏好的方法：

.box {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
  transform: translateX(0);
  opacity: 1;
}
@keyframes reveal {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

这是 CSS：

@media (prefers-reduced-motion: reduce) {
  .box {
    transform: translateX(0);
  }
}

请注意，伪元素不是 DOM 的一部分，无法在 JavaScript 中直接选择，因此采用了这种方法。

使用数据属性实现用户偏好

自定义 HTML 数据属性和 JavaScript 允许您实现用户首选项。数据属性允许您存储 HTML 元素的信息而不影响文档的结构。它们使用数据前缀，并且可以使用 JavaScript 轻松操作：

@media (prefers-color-scheme: dark) {
    #main {
    background-image: repeating-linear-gradient(
      45deg,
      #553c9a,
    #553c9a 50px,
    #3a1e4f 50px,
    #3a1e4f 100px,
    #301934 100px,
    #301934 150px
    );
  }
  nav{
    background: rgba(0, 0, 0, 0.5);
  }
  .logo a,
  nav ul li a{
    color: #b393d3;
  }
  .content {
    background: rgba(0, 0, 0, 0.5);
  }
  .content h1 {
    color: #b393d3;
  }
  .content p{
    color: #b393d3;
  }
}

这是 CSS：

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

减少数据使用

虽然仍处于实验阶段，prefers-reduced-data 是一种建议的媒体查询，允许网站检测用户是否喜欢保存数据。

它使用与prefers-reduced-motion媒体查询相同的语法，对于喜欢轻量级内容的用户来说是减少的，对于没有数据偏好的用户来说是无偏好的。

它的一些潜在应用包括减少高分辨率图像、加载替代字体、禁用自动播放视频以及延迟加载非关键内容。此媒体查询可以帮助改善数据计划有限或昂贵或互联网连接不可靠的用户的加载时间。

最后的话

尊重用户偏好对于增强每个用户的体验至关重要。在本教程中，您学习了如何使用prefers-reduced-motion 和prefers-color-scheme 媒体查询来检测用户的动作和主题设置。还有关于对比度和透明度偏好的 @media 规则。

作为一名 Web 开发人员，您是架构师，有能力让每个网站对每种类型的用户来说都舒适、可访问且高效。

---

您的前端是否占用了用户的 CPU？

随着 Web 前端变得越来越复杂，资源贪婪的功能对浏览器的要求越来越高。如果您有兴趣监控和跟踪生产中所有用户的客户端 CPU 使用情况、内存使用情况等，请尝试 LogRocket。

LogRocket 就像网络和移动应用程序的 DVR，记录网络应用程序、移动应用程序或网站中发生的所有情况。您无需猜测问题发生的原因，而是可以汇总并报告关键的前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误。

现代化调试 Web 和移动应用程序的方式 - 开始免费监控。

以上是使用 CSS 和 JavaScript 适应用户动作和主题偏好的详细内容。更多信息请关注PHP中文网其他相关文章！