CSS 无法直接访问硬件状态，因浏览器出于安全与隐私限制严格隔离传感器数据；唯一可行方案是 JavaScript 获取硬件信息后通过 CSS 自定义属性或 class 注入样式。
CSS 中访问硬件状态的现状
目前没有标准 CSS 工具或属性能直接读取系统硬件状态（如电池电量、陀螺仪数据、麦克风活动、GPU 温度等）。@media 和 prefers-reduced-motion 这类特性只是操作系统级偏好提示，不是实时硬件传感器接口。浏览器出于安全与隐私限制，**不向 CSS 暴露原始硬件数据**——这是硬性隔离，不是“还没实现”。
为什么不能用 CSS 读取 battery.level 或 deviceorientation
- 浏览器将传感器数据视为敏感信息，必须经 JavaScript 显式请求权限（如 navigator.getBattery()、window.addEventListener('deviceorientation', ...)），且需用户授权
- CSS 是声明式、无状态、无执行能力的样式语言，无法触发权限弹窗，也无法响应异步数据流
- 即使未来有实验性提案（如 CSS Containment + JS bridge），也绝不会允许 background: linear-gradient(to right, red calc(var(--battery-level) * 100%), blue); 这类写法直接绑定变量——CSS 不支持运行时计算绑定
实际可行的替代路径（JS + CSS 协作）
真正能“让 CSS 响应硬件状态”的唯一方式，是用 JavaScript 读取传感器，再把结果注入 CSS 自定义属性或 class：
- 使用
navigator.getBattery() 获取 battery.level，监听 chargingchange 和 levelchange 事件
- 用
window.addEventListener('deviceorientation', ...) 拿到 alpha/beta/gamma
- 将数值写入
document.documentElement.style.setProperty('--battery', level)
- 在 CSS 中用
background-color: hsl(calc(var(--battery) * 120), 80%, 60%); 做视觉映射
- 注意：
getBattery() 在 Chrome 93+ 已废弃（需 HTTPS + 用户交互后才可用），Safari 完全不支持
- 注意：
deviceorientation 在 iOS Safari 需用户手势唤醒，且默认禁用绝对方向（alpha 为 null）
实验性方案的现实水位
- CSS Typed OM 和 Worklets（如 LayoutWorklet、PaintWorklet）理论上可接入 JS 上下文，但目前**不支持访问任何传感器 API**
- @property 可声明自定义属性类型，但只能配合 JS 设置，不能自动绑定硬件
- 所有声称“CSS 直接读硬件”的 demo，背后都有隐藏的 requestAnimationFrame + sensor.reading 循环，再通过 style.setProperty 同步——这不是 CSS 的能力，是 JS 在替它干活
navigator.getBattery()、window.addEventListener('deviceorientation', ...)），且需用户授权
- CSS 是声明式、无状态、无执行能力的样式语言，无法触发权限弹窗，也无法响应异步数据流
- 即使未来有实验性提案（如 CSS Containment + JS bridge），也绝不会允许 background: linear-gradient(to right, red calc(var(--battery-level) * 100%), blue); 这类写法直接绑定变量——CSS 不支持运行时计算绑定
实际可行的替代路径（JS + CSS 协作）
真正能“让 CSS 响应硬件状态”的唯一方式，是用 JavaScript 读取传感器，再把结果注入 CSS 自定义属性或 class：
- 使用
navigator.getBattery() 获取 battery.level，监听 chargingchange 和 levelchange 事件
- 用
window.addEventListener('deviceorientation', ...) 拿到 alpha/beta/gamma
- 将数值写入
document.documentElement.style.setProperty('--battery', level)
- 在 CSS 中用
background-color: hsl(calc(var(--battery) * 120), 80%, 60%); 做视觉映射
- 注意：
getBattery() 在 Chrome 93+ 已废弃（需 HTTPS + 用户交互后才可用），Safari 完全不支持
- 注意：
deviceorientation 在 iOS Safari 需用户手势唤醒，且默认禁用绝对方向（alpha 为 null）
实验性方案的现实水位
- CSS Typed OM 和 Worklets（如 LayoutWorklet、PaintWorklet）理论上可接入 JS 上下文，但目前**不支持访问任何传感器 API**
- @property 可声明自定义属性类型，但只能配合 JS 设置，不能自动绑定硬件
- 所有声称“CSS 直接读硬件”的 demo，背后都有隐藏的 requestAnimationFrame + sensor.reading 循环，再通过 style.setProperty 同步——这不是 CSS 的能力，是 JS 在替它干活
navigator.getBattery() 获取 battery.level，监听 chargingchange 和 levelchange 事件 window.addEventListener('deviceorientation', ...) 拿到 alpha/beta/gamma document.documentElement.style.setProperty('--battery', level) background-color: hsl(calc(var(--battery) * 120), 80%, 60%); 做视觉映射 getBattery() 在 Chrome 93+ 已废弃（需 HTTPS + 用户交互后才可用），Safari 完全不支持 deviceorientation 在 iOS Safari 需用户手势唤醒，且默认禁用绝对方向（alpha 为 null）CSS Typed OM 和 Worklets（如 LayoutWorklet、PaintWorklet）理论上可接入 JS 上下文，但目前**不支持访问任何传感器 API**
- @property 可声明自定义属性类型，但只能配合 JS 设置，不能自动绑定硬件
- 所有声称“CSS 直接读硬件”的 demo，背后都有隐藏的 requestAnimationFrame + sensor.reading 循环，再通过 style.setProperty 同步——这不是 CSS 的能力，是 JS 在替它干活
设备传感器和样式渲染之间隔着一层明确的安全墙。绕不开，也不该绕开。想让 UI 动态响应硬件？老老实实写 JS 监听、校验、节流、降权处理，再喂给 CSS。别信“一行 CSS 解决”的说法——那行代码前面至少藏着二十行防御性 JS。
