# 路线图

> chroma-panel React 颜色选择器 1.0 之后的已知限制和待定问题，涉及浏览器支持、色彩管理和未来的兼容性。

Source: https://chroma-panel.jscrate.dev/zh/react/overview/roadmap
Last updated: 2026-09-21

{/* Maintainer: nothing below is a plan, because none has been published. Every item is a limit taken from the docs or the source and written as an open question. Replace these with real plans when you have them, and delete anything that stops being true. */}

chroma-panel 于 2026 年 9 月 21 日发布 1.0.0。目前没有带日期的路线图。下面记录的是当前的限制和待定问题，并不承诺任何功能或日期。

路线图方面的反馈和功能想法，请发到 [GitHub Discussions](https://github.com/re-sohail/chroma-panel/discussions)。已确认的 bug 请提交到 [issue 列表](https://github.com/re-sohail/chroma-panel/issues)。

## 目前的已知限制

下面每一项在文档其他地方都有说明，链接指向完整介绍该行为的页面。

### 取色器仅支持 Chromium

取色器使用浏览器的 `EyeDropper` API，目前只有 Chromium 系浏览器支持。`showEyedropper` 默认为 `true`，但只有在 API 存在时才会渲染按钮，所以在 Firefox 或 Safari 中不会出错，只是看不到这个控件。如果你自己做触发器，请先检查 `supported`：

```tsx
import { useEyedropper } from "chroma-panel";

export function PickButton() {
  const { supported, pick } = useEyedropper();

  if (!supported) {
    return null;
  }

  return <button onClick={() => void pick()}>Pick a color</button>;
}
```

详见 [useEyedropper](https://chroma-panel.jscrate.dev/zh/react/utils/use-eyedropper)。其他浏览器是否会有替代方案还是待定问题，目前没有任何公告。

### 图片取色需要两个浏览器 API

它需要 `createImageBitmap` 和 `OffscreenCanvas`。凡是满足下文最低版本要求的浏览器都同时具备这两个 API，所以实际上这并不构成额外的门槛。详见[图片模式](https://chroma-panel.jscrate.dev/zh/react/modes/image)。

### 最低支持的浏览器版本来自 2024 年

Chrome 123、Firefox 120 和 Safari 17.5。样式表用到了 `light-dark()`，这是其中最新的特性，所以由它决定最低版本。低于这些版本时 CSS 不会生效，面板会以无样式的状态渲染。这个门槛将来会不会降低还是待定问题。各项特性分别带来了哪些要求，见[浏览器支持](https://chroma-panel.jscrate.dev/zh/react/handbook/browser-support)。

### CSS Color 4 不能替代色彩管理

1.0 版本可以解析和转换 OKLCH、OKLab、Lab、LCH、sRGB 和 Display P3，也能把颜色映射到目标色域。但它不会读取图片中嵌入的 ICC 配置文件，也不提供 CMYK/印前工作流。详见 [CSS Color 4](https://chroma-panel.jscrate.dev/zh/react/utils/css-color-4)。

### 不支持 React Native

组件渲染的是 DOM 元素，`react-dom` 是 peer dependency，弹出层也要通过 `createPortal` 渲染。目前没有 React Native 版本，也没有相关公告。

> **这不是未来计划**
>
> 上面每个标题描述的都是 1.0.0 时的现状，不代表以后的版本会怎么做。

## 1.0 之后的稳定性

本包遵循语义化版本。[版本发布](https://chroma-panel.jscrate.dev/zh/react/overview/releases#stable-releases)页列出了哪些改动算作破坏性变更：有文档的 props、各入口的导出内容、`--cp-*` CSS 自定义属性和 `data-cp-*` 属性。现在这些内容的破坏性变更都必须发布新的主版本。

```bash
npm install chroma-panel@^1.0.0
```

API 参考中没有列出的内容，例如内部类名，可能在补丁版本中改动。实际发布了哪些内容，以[更新日志](https://github.com/re-sohail/chroma-panel/blob/main/CHANGELOG.md)为准。

## 参与讨论

欢迎在 [GitHub Discussions](https://github.com/re-sohail/chroma-panel/discussions) 提问、建议新功能，或者介绍你正在做的项目。真实的使用场景有助于判断哪些改进最重要。路线图上的想法不是发布承诺，在排期之前也没有日期。

- **报告 bug**：[提交 issue](https://github.com/re-sohail/chroma-panel/issues)，写明版本、浏览器，以及能复现问题的最小组件。
- **建议功能**：[发起讨论](https://github.com/re-sohail/chroma-panel/discussions)，说明使用场景、你现在写的代码，以及你希望能怎么写。
- **提问**：常见问题都在[常见问题](https://chroma-panel.jscrate.dev/zh/react/overview/faq)中。如果没找到你的问题，请到 [Discussions](https://github.com/re-sohail/chroma-panel/discussions) 里提问。