个性化！

提升网站用户体验，从增强可访问性和个性化定制开始。 可访问性改进不仅扩大受众群体，提升所有用户的体验（不仅仅是残障人士），还能带来SEO优势。

同样，偏好查询定制也是提供个性化体验的绝佳途径，让用户感觉更舒适、更便捷。

prefers-reduced-motion 偏好查询就是一个很好的例子。 此偏好表示用户更倾向于没有花哨快速动画的网页体验。您可以编写支持此偏好的样式，并为未设置此偏好的用户编写媒体查询，提供更“生动”的交互体验。

另一个需要考虑的偏好是用户的颜色方案偏好。虽然大多数网站现在默认使用浅色主题，但近年来，特别是夜间浏览网页时，深色主题的需求一直很高。提供与用户偏好一致的自定义主题是提升用户体验的另一种方式。

您可以通过使用CSS自定义属性并使用prefers-color-scheme媒体功能调整这些自定义属性值来高效地实现这一点。如果您使用诸如背景、文本和高亮显示之类的通用值，则可以在一处更新所有值。

别忘了也使用color-scheme属性来自动获得浏览器的一些主题转换。设置此属性会告诉浏览器页面支持哪些颜色主题（浅色、深色或两者）。反过来，浏览器也会自动将表单控件和浏览器UI（如滚动条）转换为正确的主题：

在这个演示中，即使我没有为我的颜色主题设置文本颜色，因为我在:root中使用color-scheme: light dark告诉浏览器该站点支持浅色和深色主题，它会自动将字体颜色从黑色切换到白色。

您可以在Chrome DevTools的“渲染”面板中测试您的深色主题，而无需更改系统设置。此图显示了houdini.how网站的深色模式：

创建深色主题的另一个好处是为用户节省电池电量。Pixel 6 Lab的一项研究发现，对于OLED屏幕，深色主题可节省11%的功耗。

因此，您现在尊重用户的可访问性需求、偏好和电池续航时间，这是让您的网站对用户更友好的绝佳方式。

以上是个性化！的详细内容。更多信息请关注PHP中文网其他相关文章！