时间戳

首页 > 解决方案 > 这是什么 CSS 属性：-internal-light-dark

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

问题描述

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

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”，但一无所获。有人可以解释一下这是做什么的吗？

标签： htmlcssmicrosoft-edge

解决方案

这是添加时的提交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

根据我从源头了解到的情况，它是基于 chromium 的浏览器使用的内部（如名称所示）属性（这就是 firefox 忽略它的原因）来存储一对或浅色/深色以根据系统的颜色模式使用。

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

编辑：在这里你可以看到他们是如何在内部使用它的

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

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

推荐阅读