系统*事物

我认为我们都大体上了解像这样的颜色

color: OldLace;
background: rebeccapurple;

我想你可能只会称之为 CSS 中的 “命名颜色”。

但这些并不是唯一存在的命名颜色。其中一些更具流动性。Jim Nielsen 前几天在 他的博客中谈到了系统颜色，令人大开眼界。

我需要一种方法来说“嘿浏览器，对于我的下拉菜单，使用与你用于文档背景颜色相同的黑色（或在浅色模式下使用白色）”。我需要访问某种变量，该变量引用浏览器正在使用的确切“黑色”。

然后，通过 Jim 参考 Thomas Steiner，我发现确实存在 CSS 系统颜色。这些颜色并不是（或至少不尝试）在所有浏览器中都相同，但它们允许由“用户、浏览器或操作系统做出的选择”来设置。例如，Canvas 是“应用程序内容或文档的背景”。例如：深色模式的background-color 在 Safari 中为 #1e1e1e，在 Chrome 中为 #121212。如果你喜欢这样，也就是说你倾向于使用浏览器认为适合事物的颜色，那么你现在可以通过该 Canvas 关键字访问它。

系统颜色！有 很多。

• Canvas
• CanvasText
• LinkText
• VisitedText
• ActiveText
• ButtonFace
• ButtonText
• ButtonBorder
• Field
• FieldText
• Highlight
• HighlightText
• Mark
• MarkText
• GrayText

它们不仅在不同浏览器之间发生变化，而且在切换深色和浅色模式时也会发生变化，只要你启用了支持它们的 CSS……

html {
  color-scheme: light dark;
}

你会看到它们在模式更改时发生变化。而且你不必将它们用于它们的设计用途，我想

所以这些是系统颜色，但你可以在那个 Pen 中看到，我也使用了系统字体：system-ui。同样的感觉！它是有意设计的流动性。它在不同浏览器和操作系统上的字体不会相同。Jim 之前也介绍过这个。我们过去使用 一长串命名字体 来复制这个想法，但现在 CSS 在（支持的浏览器中）可以帮助我们做到这一点。

有许多 规范。

• serif
• sans-serif
• monospace
• system-ui
• cursive
• fantasy
• emoji
• math
• fangsong
• ui-serif
• ui-sans-serif
• ui-monospace
• ui-rounded

支持似乎参差不齐。例如，我可以设置这个

p {
  font-family: ui-monospace, system-ui, fantasy;
}

在我的 Mac 上，在 Safari 中，我会得到 SF Mono (ui-monospace)。但在 Chrome 中，ui-monospace 不起作用，因此它会回退到 SF Pro (system-ui)。在 Firefox 中，ui-monospace 或 system-ui 均不起作用，我会得到 Papyrus (fantasy)。所以字体堆栈仍然很重要。只是想想很有趣，因为这些新的系统字体关键字几乎本身就像字体堆栈。

所以有系统颜色和系统字体——这是否意味着还有其他系统事物？

嗯，有命名字体粗细——比如 font-weight: bold; 等同于 700，而 bolder 只是比父元素稍微粗一点。但这感觉不像系统级事物，系统不会想要控制它并执行不同的操作。但嘿，也许会。

还有命名字体大小，比如 font-size: xx-small;。我可以看到系统想要获取这些值并将其调整为在上下文中合理的尺寸，但在快速浏览（比较 Chrome 和 iOS Safari）中，它们计算出的尺寸相同。

这些命名字体大小值也不适用。我不能执行 margin: large;。好吧，我可以，但它没有任何作用。所以没有真正的通用系统大小。

系统图标呢？我们确实以表情符号的形式拥有它们！我们使用表情符号，知道不同的系统会以不同的方式呈现它，并且通常对此感到满意，因为我们知道它在用户的平台上看起来会保持一致。

我们可以将输入视为“系统输入”。我们知道不同的浏览器和平台以非常不同的方式呈现输入控件，这就是规范的意图。各有所长。