浏览器支持

这个 React 颜色选择器的样式表用到了 light-dark()，因此需要 2024 年及以后发布的浏览器。下表列出了最低版本，后文依次介绍图片取样、取色器、触摸输入和移动端的底部面板。

低于这些版本时 CSS 不会生效，面板会以无样式的状态渲染。面板还用到了 :has()、@layer、color-mix() 和 svh，它们都比 light-dark() 更早得到支持，所以最低版本由 light-dark() 决定。面板能跟随系统配色方案，靠的也是 light-dark()，详见主题。

取色器

取色器使用浏览器的 EyeDropper API，目前只有 Chromium 系浏览器支持。showEyedropper 默认为 true，但按钮只会在支持该 API 的浏览器中渲染，所以在其他浏览器里也不会出问题。

如果你要自己实现取色按钮，先检查 useEyedropper().supported，详见 useEyedropper。

图片取样

图片取样需要 createImageBitmap 和 OffscreenCanvas。满足上表版本要求的浏览器都支持这两者。它们具体用来做什么，请看图片模式。

在手机上

屏幕宽度小于 640px 时，弹出层会变成底部面板：全宽、顶部圆角、带拖动条，背后有一层遮罩并锁定页面滚动。控件在鼠标操作时保持紧凑，触摸操作时点击区域会增大到 44px。如果你用 Popover 自己实现触发器，可以传入 sheetOnMobile={false}，让它在任何宽度下都以锚定的弹出层显示。

有一行代码是库没法替你加上的：

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover"
/>

没有 viewport-fit=cover 的话，在带刘海的 iPhone 上底部面板会被主屏幕指示条挡住。功能不受影响，只是面板的位置会略微偏低。