PostCSS OKLab 函数

PostCSS OKLab 函数 让您使用 oklab 财务报告和审定财务报表 oklch 颜色函数在 支助科,随 CSS 颜色 规格.

.test-oklab {
    color: oklab(40% 0.001236 0.0039);
}

.test-oklch {
    color: oklch(40% 0.268735435 34.568626);
}

/* becomes */

.test-oklab {
    color: rgb(73, 71, 69);
    color: color(display-p3 0.28515 0.27983 0.27246);
}

.test-oklch {
    color: rgb(131, 28, 0);
    color: color(display-p3 0.49163 0.11178 0.00000);
}

使用量

添加 PostCSS OKLab 函数 对您的项目:

npm install postcss @csstools/postcss-oklab-function --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssOKLabFunction = require('@csstools/postcss-oklab-function');

postcss([
  postcssOKLabFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS OKLab 函数 在所有节点环境中运行,带有特殊 说明:

选项

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认情况下,它没有被保存.

postcssOKLabFunction({ preserve: true })

.test-oklab {
    color: oklab(40% 0.001236 0.0039);
}

.test-oklch {
    color: oklch(40% 0.268735435 34.568626);
}

/* becomes */

.test-oklab {
    color: rgb(73, 71, 69);
    color: color(display-p3 0.28515 0.27983 0.27246);
    color: oklab(40% 0.001236 0.0039);
}

.test-oklch {
    color: rgb(131, 28, 0);
    color: color(display-p3 0.49163 0.11178 0.00000);
    color: oklch(40% 0.268735435 34.568626);
}

启用渐进自定义收益

这个 enableProgressiveCustomProperties 选项决定原始标记是否 包裹着 @supports 当使用自定义属性时。 默认情况下, 它被启用 .

[注] 我们只建议在您准备好的时候取消这个 preserve 改为 false 或者你带了自定义属性的修补.
查看插件在其中的用途 读取。 。 。 .

postcssOKLabFunction({ enableProgressiveCustomProperties: false })

:root {
    --firebrick: oklab(40% 0.234 0.39);
}

/* becomes */

:root {
    --firebrick: rgb(133, 0, 67); /* will never be used, not even in older browser */
    --firebrick: color(display-p3 0.49890 0.00000 0.25954); /* will never be used, not even in older browser */
    --firebrick: oklab(40% 0.234 0.39);
}

子形状

显示P3

这个 subFeatures.displayP3 选项确定是否 color(display-p3 ...) 用作倒计时.
默认情况下, 它被启用 .

display-p3 能够显示比 rgb 在一些设备上.

postcssOKLabFunction({
    subFeatures: {
        displayP3: false
    }
})

.test-oklab {
    color: oklab(40% 0.001236 0.0039);
}

.test-oklch {
    color: oklch(40% 0.268735435 34.568626);
}

/* becomes */

.test-oklab {
    color: rgb(73, 71, 69);
}

.test-oklch {
    color: rgb(131, 28, 0);
}

版权:颜色转换

本软件或文件包括复制自或衍生自 https://github.com/w3c/cswg-draps/tree/main/cs-color-4 互联网档案馆的存檔,存档日期2014-12-12. 版权:"2022 W3C" (MIT, ERCIM, Keio, Beihan).