【早阅】针对用户动效和主题偏好使用 CSS 和 JavaScript 进行调整

作者：@Oscar Jite-Orimiono
原文：https://blog.logrocket.com/adapting-user-motion-theme-preferences-css-javascript/

背景

在现代网页设计中，色彩、动画和图形效果的运用已经成为吸引用户注意力的重要手段。然而，这些视觉元素的过度使用可能会导致用户的视觉疲劳或不适，尤其是对于那些偏好简洁界面的用户。因此，前端开发者和设计师需要在提供丰富视觉效果的同时，考虑到那些偏好简约体验的用户需求。

要点

本文主要探讨了如何通过 CSS 和 JavaScript 来适应用户的运动和主题偏好，具体包括使用 prefers-reduced-motion 和 prefers-color-scheme 媒体查询来管理动画和主题，以及如何根据用户的偏好调整网页的视觉效果。

分析

prefers-reduced-motion 媒体查询

该查询用于检测用户是否在其设备上启用了减少动画的设置。对于那些对动画敏感或希望减少视觉干扰的用户，开发者可以通过该查询来完全禁用或调整动画效果。

例如，一个带有动画背景的网页可以通过 prefers-reduced-motion: reduce 来禁用背景动画，从而为用户提供一个更简洁的界面。

使用以下 CSS 代码禁用动画：

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

prefers-color-scheme 媒体查询

该查询用于检测用户是否偏好深色或浅色主题。开发者可以根据用户的系统设置自动切换网页的主题，从而提供更好的用户体验。

例如，一个默认使用浅色主题的网页可以通过 prefers-color-scheme: dark 来切换到深色主题，以适应用户的偏好。

使用以下 CSS 代码创建暗黑主题：

 @media (prefers-color-scheme: dark) {
   body {
     background-color: #000;
     color: #fff;
   }
 }

prefers-reduced-data 媒体查询

一个提议中的媒体查询，尚处于实验阶段，该查询用于检测用户是否更倾向于存储数据。它使用与 prefers-reduced-motion 媒体查询相同的语法：reduce 表示偏好轻量级内容的用户， no-preference 表示没有数据偏好设定的用户。开发者可以通过该查询来优化网页内容，例如减少高分辨率图像的加载、禁用自动播放视频等，从而提高网页的加载速度和用户体验。

prefers-reduced-data 媒体查询的潜在应用包括：

• 减少高解析度图像

• 载入替代字型

• 停用自动播放影片

• 延迟载入非关键内容

使用哪些最佳实践来实现用户偏好设定？

• 在使用颜色之前，请务必测试颜色对比度，以确保更好的可读性。

• 切换主题时，请考虑需要更新的所有可能元素，而不仅仅是背景和文字。

• 使用 CSS 变量来储存主题，可以帮助你避免重复代码。

如何使用 JavaScript 实现用户偏好设定？

可以使用 JavaScript，根据用户偏好设定将新的类别新增至特定元素。例如，以下是如何使用 JavaScript 检查用户的动态偏好设定：

 const stripes = document.querySelector('.container');
 if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
   stripes.classList.add('reduced-motion');
 } else {
   stripes.classList.remove('reduced-motion');
 }

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

数字属性让你可以在 HTML 元素上储存信息，而不会影响文件的结构。它们使用 data- 前缀，并且可以使用 JavaScript 轻松鬆操作。

例如，以下是如何使用数据属性和 JavaScript 来实现用户的动态偏好设定：

 const containers = document.querySelectorAll('.container');

 function updateAnimationPreference() {
   if (window.matchMedia('(prefers-reduced-motion: reduce)')