编写 oklch 色谱后备的有效方法

Question

他所有人，

有没有一种有效的方法来编写 oklch 颜色函数的后备？假设我有以下 css：

color: oklch(95%, 0.2, 0);

是否有构建工具或其他方式来创建后备，以便 css 看起来像这样：

color: #ffb0e9;
color: oklch(95%, 0.2, 0);

Answer 1

如果您的项目正在使用/能够使用PostCSS（也许使用Vite），那么我可能会推荐 @csstools/postcss-oklab-function PostCSS 插件：https: //www.npmjs.com/package/@csstools/postcss-oklab -功能

我还没有测试它如何与自定义属性一起使用，但该行为将像您为示例代码所描述的那样有效：

color: rgb(255, 231, 238);
color: oklch(95% 0.2 0);

根据插件文档，后备颜色似乎是 RGB，而不是十六进制，但这对您的情况来说应该不重要。