你以为半透明效果只能靠设计师肉眼盯着调？今天 CSS 把这件事彻底原生化了

打开 macOS 的「设置 → 辅助功能 → 显示 → 减少透明度」，页面上所有毛玻璃、遮罩层就会自动变得不透明——但你的代码什么都没动。这是操作系统在替你做的事，而现在 CSS 也有机会参与了。

prefers-reduced-transparency 是 CSS Media Queries Level 5 定义的媒体查询，用来探测用户是否在系统层面开启了「减少透明度」这个无障碍设置。一旦探测到，CSS 可以直接响应，让半透明效果自动降级为实色，不必再靠设计师逐个标注「这个在减少透明度的模式下要改成怎样」。

三行代码解决问题：

.translucent-panel {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
}

@media (prefers-reduced-transparency: reduce) {
  .translucent-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: none;
  }
}

这个写法和 prefers-reduced-motion 如出一辙——后者管动画，前者管透明度。两者都是把用户在操作系统层做的选择，声明式地接进 CSS，完全不需要 JavaScript。

适用场景很明确：毛玻璃弹窗、侧边栏遮罩、半透明卡片背景、带透明度的下拉菜单，都可以用这个查询自动退化为可读性更好的实色版本。对于要做 WCAG AA 合规的产品来说，这是目前成本最低的可访问性改进之一——只要你本来就在用半透明设计。

现状：覆盖率约 72%，Safari 和 Firefox 缺席

根据 Can I Use 的数据，prefers-reduced-transparency 目前全球覆盖率约 72%。Chrome 118+、Edge 118+、Opera 104+、Samsung Internet 25+ 已支持。但 Safari 全系列、Firefox（默认关闭，需要在 about:config 里手动开启 layout.css.prefers-reduced-transparency.enabled）都还没有正式支持。

这意味着如果你只在 Safari 上做测试，这个媒体查询永远不会触发。但 Chrome 用户、Windows 用户，以及开启了减少透明度设置的用户，已经可以体验到自动降级的效果。渐进增强的做法是：先写实色样式，再用媒体查询叠加半透明增强——这样不管支不支持，用户看到的都是可用的。

三个落地步骤

第一步，在所有半透明组件上加降级样式。把 rgba() 透明度降低，或者直接去掉 backdrop-filter，写在媒体查询外面，作为默认态。第二步，在支持的环境里叠加半透明效果。@media (prefers-reduced-transparency: no-preference) 用来在用户没有开减少透明度时启用完整视觉效果。第三步，把这个模式加进设计系统 token 里——把「透明度降级方案」作为设计决策固化下来，而不是每次靠设计师现场判断。

这个媒体查询的本质是把操作系统的无障碍设置，声明式地接进了 CSS 渲染管道——就像 prefers-color-scheme 把暗色模式做成了原生信号一样，透明度偏好的链路现在也通了。