如何在CSS中使用操作系统样式

CSS2.1鲜为人知的功能之一就是能够定义底层操作系统主题正在使用的字体和颜色。 当您需要更紧密的OS集成时，例如HTML帮助文件，Adobe AIR或离线Web应用程序时，这可能很有用。

在开始之前，有一些警告：

• 不要依赖所有操作系统/浏览器组合中的这些属性。 如果您的应用程序必须在BeOS上的Opera中运行，那么我建议您首先对其进行测试！
• CSS3中不推荐使用该属性，而采用外观值类型 （尽管此时对浏览器的支持非常有限）。
• 没有什么可以阻止用户在其OS中定义异常，冲突或丑陋的配色方案。 页面将反映他们的选择，而不是您的设计师的选择。

系统字体

系统字体是使用'font'属性分配的。 请注意，族，大小和样式均已适当分配，例如

body
{
	font: caption;
}

以下字体值可用。 “示例”列显示了由操作系统设置的当前字体。

属性	描述	例
字幕	控制字体（按钮，下拉菜单等）	abc abc 123
图标	图标标签字体	abc abc 123
菜单	菜单字体	abc abc 123
信息框	对话框字体	abc abc 123
小标题	小控制标签	abc abc 123
状态栏	状态栏字体	abc abc 123

系统颜色

可以将系统颜色分配给任何需要颜色值的属性，例如

body
{
	color: WindowText;
	background-color: Window;
	border: 2px solid ActiveBorder;
}

以下颜色值可用。 为了清晰起见 ，它们在CamelCase中显示，但任何大小写均有效。 “示例”列显示了操作系统设置的颜色。

属性	描述	例
活动边界	活动窗口边框
活动字幕	活动窗口标题
AppWorkspace	多文档界面的背景色
背景	桌面背景
钮扣脸	3D显示元素的面色
ButtonHighlight	3D显示元素的阴影（远离光线）
按钮阴影	3D显示元素的阴影颜色
ButtonText	按钮上的文字
字幕文字	标题，大小框和滚动条箭头框中的文本
灰色文字	灰色（禁用）文本（如果操作系统不支持，则为＃000）
突出	在控件中选择的项目
HighlightText	在控件中选择的项目的文本
无效边界	无效的窗口边框
无效字幕	无效的窗口标题
InactiveCaptionText	非活动标题中的文本颜色
信息背景	工具提示控件的背景颜色
信息文字	工具提示控件的文本颜色
菜单	菜单背景
菜单文字	菜单中的文字
滚动条	滚动条灰色区域
暗影	3D显示元素的暗影
ThreeDFace	3D显示元素的面色
ThreeDHighlight	3D显示元素的突出显示颜色
ThreeDLightShadow	3D显示元素的浅色（面向灯光）
暗影	3D显示元素的暗影
窗口	窗口背景
窗框	窗框
WindowText	Windows中的文字

这些属性在您的下一个项目中有用吗？

From: https://www.sitepoint.com/css-system-styles/