仅用 html { filter: grayscale(100%); } 不够，需补 -webkit-filter 兼容旧版 Safari/安卓 WebView，并为 IE11 添加 progid 语法；应选 html 而非 body 作根选择器以确保全覆盖，且须规避性能拖慢、文本可读性下降及视觉细节崩坏问题。
直接用 html { filter: grayscale(100%); } 就能全局变灰，但别急着复制粘贴——浏览器兼容性、性能拖慢、文本可读性下降这三件事，不处理好反而会让页面“假死”或“看不清”。
为什么只写 filter: grayscale(100%) 不够用
现代浏览器（Chrome/Firefox/Safari/Edge 105+）确实支持标准写法，但实际部署时会立刻暴露两个问题：IE 11 及更老版本完全忽略该声明；部分安卓 WebView（尤其旧版 UC、QQ 浏览器内核）对 filter 渲染异常，导致文字发虚或图片闪烁。
- 必须补上
-webkit-filter: grayscale(100%)—— 覆盖 Safari 6–15.6 和大部分安卓 Chrome 早期版本 - IE 11 需要
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)，注意这是 IE 专属语法，其他浏览器会忽略 - 不要写
filter: gray—— 它是已废弃的非标准写法，仅在极老版 WebKit 中短暂存在，现在会导致 Safari 报 warning 并失效
html vs body：选哪个作为根选择器
用 html 是更稳妥的选择。因为 body 不包含 :before/:after 伪元素、scrollbar 样式、background 绘制区域外的边缘（比如 overscroll 效果），而这些在某些场景下也会被用户感知为“没变灰”。
-
html { filter: grayscale(100%); }作用于整个文档渲染树，包括根背景、滚动条 thumb、甚至dialog弹层 -
body * { filter: grayscale(100%); }是错误思路：它会逐个元素叠加滤镜，造成多层重绘，CPU 占用飙升，iOS 上容易触发强制刷新卡顿 - 如果页面用了
position: fixed的悬浮按钮或广告位，且其父容器不在body下（比如挂载到document.body外部），只有html能兜底覆盖
灰度生效后，哪些视觉细节会意外崩坏
灰度不是“加一层蒙版”，而是实时重绘每个像素的亮度值。这意味着依赖色相、饱和度做区分的 UI 元素会立刻失效。
立即学习“前端免费学习笔记（深入）”；
- 纯色边框（如
border: 1px solid #007bff）变灰后可能和背景对比度不足，建议同步加粗边框或增加box-shadow提升轮廓感 - SVG 图标若用
fill设置颜色，灰度后全部变中性灰，丢失语义；应改用currentcolor或 CSS 变量控制，并确保文本色本身有足够明度差 - 表单控件（
input[type="range"]、progress）的轨道/滑块颜色在灰度下极易混淆，需额外用::-webkit-slider-thumb等伪类单独设background或border - 字体抗锯齿行为可能改变，尤其 macOS 上启用了 subpixel rendering 的字体，在灰度下边缘发虚；可加
text-rendering: optimizeLegibility;缓解
动态开关灰度模式的最小成本写法
别用 JS 批量遍历 DOM 加 class，那太重。用 CSS 自定义属性 + 一层 class 切换最轻量。
html {
--grayscale: 100%;
}
html.grayscale-off {
--grayscale: 0%;
}
html {
filter: grayscale(var(--grayscale));
-webkit-filter: grayscale(var(--grayscale));
}切换只需：document.documentElement.classList.toggle('grayscale-off')。这个写法避免了 style 属性反复写入，也绕开了 IE 对 CSS 变量的不支持（因为 IE 根本不进这个分支）。
真正容易被忽略的是：灰度滤镜会影响 will-change 和合成层判断，如果页面已有大量 transform: translateZ(0) 强制提升图层，加上灰度后可能引发意外的图层爆炸，GPU 内存占用翻倍。上线前务必在低端 Android 机上用 Chrome DevTools 的 Rendering 面板实测图层数。
