作者：@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)').matches) {
containers.forEach((stripes) => {
stripes.removeAttribute("data-animated");
});
} else {
containers.forEach((stripes) => {
stripes.setAttribute("data-animated", "true");
});
}
}
updateAnimationPreference();
window.matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', updateAnimationPreference);
影响
这些媒体查询的引入不仅提升了网页的可用性和用户体验，还体现了对用户偏好的尊重。对于那些有特殊需求的用户（如患有运动病或视觉障碍的用户），这些功能尤为重要。此外，这些技术的应用也有助于减少网页的加载时间，特别是在用户网络连接较差的情况下。
结论
通过使用 prefers-reduced-motion、prefers-color-scheme 和 prefers-reduced-data 等媒体查询，开发者可以更好地适应用户的偏好，提供更加个性化和舒适的网页体验。这不仅有助于提升用户的满意度，还能在一定程度上提高网页的性能和可访问性。未来，随着这些技术的进一步发展和普及，我们可以期待更多的网页能够根据用户的偏好自动调整其视觉效果和内容呈现方式。
😀 每天只需花五分钟即可阅读到的技术资讯，加入【早阅】共学群，可联系 vx：zhgb_f2er
5分钟技术速览：了解技术资讯的一种方式。
🚀可直接通过阅读原文了解详细内容。
