> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/guide/compatibility.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# 浏览器兼容性

建议使用 Chrome、Edge、Firefox 或 Safari 的当前或上一代稳定版。

## 最低版本

| 浏览器                                                                                                                                      | 最低版本要求   |
| ---------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| <span className="leaf-browser-name"><img src={withBase('/browsers/chrome.svg')} width={20} height={20} alt="" /> Google Chrome</span>    | 109 及以上  |
| <span className="leaf-browser-name"><img src={withBase('/browsers/edge.svg')} width={20} height={20} alt="" /> Microsoft Edge</span>     | 109 及以上  |
| <span className="leaf-browser-name"><img src={withBase('/browsers/firefox.svg')} width={20} height={20} alt="" /> Mozilla Firefox</span> | 121 及以上  |
| <span className="leaf-browser-name"><img src={withBase('/browsers/safari.svg')} width={20} height={20} alt="" /> Safari</span>           | 16.4 及以上 |

表中版本是 Leaf UI 的最低支持目标，不代表已逐个版本完成实测。IE、旧版 Edge（EdgeHTML）和旧版 WebView 不在支持范围内。

## 功能与降级

| 能力                   | 实现与降级                                                   |
| -------------------- | ------------------------------------------------------- |
| 派生颜色                 | JavaScript 生成具体颜色变量；静态默认色板支持首屏和独立 CSS 引入，无需原生颜色混合       |
| 背景模糊                 | 同时使用标准和 WebKit 前缀；不支持时使用加深的半透明遮罩；`maskBlur={false}` 可关闭 |
| 打开动效                 | 遮罩采用关键帧渐变；不支持 `@starting-style` 时部分内容直接显示，操作仍可用         |
| Web Animations       | 缺少 `Element.animate` 时直接更新布局                            |
| ResizeObserver       | 可选布局观测器有保护；窗口 resize 继续触发布局测量。虚拟列表等第三方能力需要现代浏览器         |
| IntersectionObserver | 无限滚动降级为手动加载按钮                                           |
| 减少动态效果               | 系统偏好和 `theme.motion={false}` 均生效                        |
| 高对比度                 | 保留键盘焦点与原生选择标记；用文字和 ARIA 描述状态                            |

```tsx
<ConfigProvider maskBlur={false} theme={{ primaryColor: '#635bff', appearance: 'dark' }}>
  <App />
</ConfigProvider>
```

颜色支持具体 hex、rgb、hsl 和命名色，推荐通过 `theme` / `tokens` 配置。JS 无法在服务端解析 CSS 变量；使用 `var(...)` 时，浏览器在挂载后解析并生成派生值，祖先的 class/style 变化会重新同步。需要严格一致的 SSR 首屏时应传入具体颜色。不要只改 CSS 中的基础色而期望所有派生色自动重新计算。

## 验证范围

CI 已配置 Chromium、Firefox、WebKit 行为测试，以及 React 18/19、SSR 和包导出检查。WebKit 的通过不代表已经在真实 Safari 或 iOS 设备验收。当前本机 Firefox 启动存在环境问题（`spawn UNKNOWN`），不能将其列为通过；具体已执行记录见仓库 `packages/react/ACCESSIBILITY.md`。