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

Question

我试图在 Edge.[=20= 中仅使用 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 不应用此功能。

我尝试 Google 搜索“-internal-light-dark”，但一无所获。谁能解释一下这是做什么的？

Answer 1

这是添加时的提交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 忽略它的原因）来存储一对或 light/dark 颜色根据系统的颜色模式使用。

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

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

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

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

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

What is this CSS property : -internal-light-dark

html

css

microsoft-edge