这是什么CSS属性：-internal-light-dark

html5 • • 问答

我试图在Edge 中仅使用 CSS 设置一个 select 元素的样式（我知道这是一个多么愚蠢的想法）。
我在查看浏览器默认（用户代理样式表）应用样式时注意到这些行：

    color: -internal-light-dark(black, white);
    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));

我尝试了 chrome 87 和 opera 71 并应用了相同的默认属性。从我所看到的 Firefox 不应用此属性。

我试图用谷歌搜索“-internal-light-dark”并没有找到任何东西，有人可以解释我这是做什么的吗？

如果我的英语有错误，我是法语。

回答

这是添加时的提交https://github.com/chromium/chromium/commit/5c56063a3a156531e2e368047bec5cfd48b2ff21

然后改名https://github.com/chromium/chromium/commit/42267a718b56e0da01b82c4aee8b342f24e45c1b

这里有更多相关的提交https://github.com/chromium/chromium/search?p=2&q=internal-light-dark&type=commits

从我从来源中了解到，它是基于铬的浏览器使用的内部（顾名思义）属性（这就是 firefox 忽略它的原因）来存储一对或浅色/深色以根据系统的颜色模式使用。

编辑：因为它不是标准的 CSS，所以我建议不要使用它们，除非你真的需要为基于铬的浏览器制定一些特殊规则

编辑：在这里你可以看到他们如何在内部使用它https://github.com/chromium/chromium/commit/5c56063a3a156531e2e368047bec5cfd48b2ff21#diff-60fdf3dc7f2f69a2b744d617c230c0d70e8c2c90d70e8c2c90d70e8c2e368047

    const CSSColorValue& color_value = To<CSSColorValue>(
        WebColorScheme::kLight ? pair->First() : pair->Second());
    return color_value.Value();

如果颜色模式是light它使用第一个值，否则使用第二个值。

以上是这是什么CSS属性：-internal-light-dark的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>