CSS Preferreds-reduced-transparency

针对偏好不透明界面的用户进行优化和调整。

Adam Argyle

从 Chrome 118 开始，CSS 媒体查询 5 中的新媒体查询功能 prefers-reduced-transparency 已推出。非不透明界面可能会导致头痛，或者对各种类型的视力缺陷造成视觉障碍。因此，Windows、macOS 和 iOS 都提供了系统偏好设置，可降低或移除界面的透明度。

在浏览器中添加此新媒体查询后，CSS 可以针对希望降低透明度的用户调整界面：

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

在前面的代码示例中，CSS 变量在 50% 处存储不透明度值，然后该值与 HSL 一起用于创建半透明的蓝色背景。嵌套媒体查询会检查用户是否偏好降低透明度，如果为 true，则将不透明度变量调整为 95%，即几乎不透明的不透明度值。

此媒体查询与其他偏好媒体查询非常契合，可让设计师和开发者发挥创意，同时为用户进行调整。您可以将这些媒体查询视为汽车座椅，可根据用户自动调整位置；当用户访问您的网站时，系统会自动根据用户调整，而无需用户进行任何操作。太酷了。

降低透明度的用例

接下来的几个部分将重点介绍如何以有意义的方式减少透明度。

图片上的半透明字幕

在图片或视频缩略图上叠加半透明的字幕或摘要非常常见。以下示例展示了处理偏好设置以降低透明度的一种方法。系统会完全移除叠加层，并在图片下方显示相同的字幕内容，而不是叠加显示。

透明模态窗口、通知和弹出式窗口

界面元素叠加内容的另一种方式（通常意味着存在不透明元素）是使用模态窗口、通知和弹出式窗口。在这些情况下，提高不透明度可以遵循用户偏好设置，同时仍允许叠加层后面的颜色微微透出。

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

自适应毛玻璃

另一种流行的图片叠加样式是磨砂玻璃。在以下示例中，字幕后面的图片是商品图片的镜像反射。这样做有两个好处：图片不会被剪裁，并且最终结果中的浅色或深色偏好设置会更明显。

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

主标题

常见的首页元素会在循环播放的视频或动画图片上叠加粗体消息。以下示例使用了色彩丰富的半透明渐变叠加层和无限动画背景图片。虽然这可能会吸引许多人的目光，但由于透明度较低且无法控制动作，也会给许多人带来问题。

您可以使用两个 CSS 媒体查询来解决此问题：prefers-reduced-motion 和 prefers-reduced-transparency。在减少动画的媒体查询中，只有当用户对减少动画的设置为“无偏好设置”时，您才能应用无限动画，这会向代码发出信号，表明可以为此用户显示动画。

此外，借助降低透明度的媒体查询，您可以降低不透明度，使叠加层颜色接近 100%。现在，用户可以轻松阅读消息，而不会受到动作干扰或反差问题的困扰。

将所有这些因素综合起来，您就可以部署富有创意的界面外观，同时确保目标受众群体能够阅读并理解其中的信息。

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

用户偏好设置的加法视角与减法视角

上例并未检查这些用户偏好设置是否降低了偏好，而是检查是否没有偏好。

@media (prefers-reduced-transparency: no-preference) {
  …
}

开发者和设计师通常会根据这些偏好设置，以减法思维“回退”用户体验。这在媒体查询中表现为对“缩减”的检查，此时系统会从界面中移除某些内容。该示例展示了一种增补性思维，即在用户同意的情况下添加动画和透明度。

这种方法有助于您思考一个独立且稳健的健康基准体验。然后，如果用户同意，请添加到体验中。

开发者工具

Chrome 开发者工具可以在“渲染”标签页中模拟此偏好设置，以降低透明度（及其他）。在以下视频中，了解如何切换 prefers-color-scheme 和 prefers-reduced-transparency 媒体查询，以展示磨砂玻璃卡片的浅色、深色、透明和降低透明度的变体。