<system-color>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS 数据类型 <system-color>
通常反映了用于网页不同部分所选的默认颜色。
然而用户代理可以提供名为强制颜色模式的无障碍特性,颜色在此模式中被限制于用户和用户代理所定义的色组中,在特定属性中改写作者所选的颜色。在强制颜色模式中,<system-color>
暴露了所选颜色,页面的其余部分可由此融入其中。强制颜色模式的一个例子为 Windows 上的高对比度模式。
在强制颜色模式中,作者应为所有颜色未被改写的属性使用 <system-color>
类型中的颜色。由此确保页面在所有属性上一致使用相同的色组。
作者可使用媒体特性 forced-colors
检测强制颜色模式。
在可使用 <color>
的任意位置均可使用 <system-color>
值。
语法
注意这些关键字虽然不区分大小写,但此处为了可读性以混合的大小写列出。
AccentColor
-
突显的用户界面控件的背景颜色
AccentColorText
-
突显的用户界面控件的文本颜色
ActiveText
-
活跃链接的文本颜色
-
控件的边框底色
-
控件的背景颜色
-
控件的文本颜色
Canvas
-
应用内容或文档的背景颜色
CanvasText
-
应用内容或文档中的文本颜色
Field
-
输入框的背景颜色
FieldText
-
输入框中的文本颜色
GrayText
-
禁用元素(如禁用控件)的文本颜色
Highlight
-
选中项的背景颜色
HighlightText
-
选中项的文本颜色
LinkText
-
非活跃且未访问链接的文本颜色
Mark
-
被专门标记(如用 HTML
mark
元素)的文本的背景颜色 MarkText
-
被专门标记(如用 HTML
mark
元素)的文本颜色 VisitedText
-
已访问链接的文本颜色
弃用的系统颜色关键字
在 CSS 颜色模块的先前版本中定义了下列关键字。现在不推荐在公共网页上使用这些关键字。
ActiveBorder
已弃用-
活跃窗口的边框颜色。
-
活跃窗口的标题栏颜色。应与前景色
CaptionText
一同使用。 AppWorkspace
已弃用-
多文档界面的背景颜色。
Background
已弃用-
桌面背景颜色。
-
因有一层环绕边框而有立体感的立体元素面向光源的边框颜色。
-
因有一层环绕边框而有立体感的立体元素背向光源的边框颜色。
-
标题栏、尺寸框和滚动条箭头框中的文本颜色。应与背景色
ActiveCaption
一同使用。 InactiveBorder
已弃用-
非活跃窗口的边框颜色。
-
非活跃窗口的标题栏颜色。应与前景色
InactiveCaptionText
一同使用。 -
非活跃窗口的标题栏中的文本颜色。应与背景色
InactiveCaption
一同使用。 InfoBackground
已弃用-
提示框控件的背景颜色。应与前景色
InfoText
一同使用。 InfoText
已弃用-
提示框控件的文本颜色。应与背景色
InfoBackground
一同使用。 -
菜单背景颜色。应与前景色
MenuText
或-moz-MenuBarText
一同使用。 -
菜单中的文本颜色。应与背景色
Menu
一同使用。 Scrollbar
已弃用-
滚动条的背景颜色。
ThreeDDarkShadow
已弃用-
因有两层同心环绕边框而有立体感的立体元素背向光源的较暗(通常为外侧)的边框颜色。
ThreeDFace
已弃用-
因有两层同心环绕边框而有立体感的立体元素正面的背景颜色。应与前景色
ButtonText
一同使用。 ThreeDHighlight
已弃用-
因有两层同心环绕边框而有立体感的立体元素面向光源的较亮(通常为外侧)的边框颜色。
ThreeDLightShadow
已弃用-
因有两层同心环绕边框而有立体感的立体元素面向光源的较暗(通常为内侧)的边框颜色。
ThreeDShadow
已弃用-
因有两层同心环绕边框而有立体感的立体元素背向光源的较亮(通常为内侧)的边框颜色。
Window
已弃用-
窗口的背景颜色。应与前景色
WindowText
一同使用。 WindowFrame
已弃用-
窗口的边框颜色。
WindowText
已弃用-
窗口中的文本颜色。应与背景色
Window
一同使用。
示例
使用系统颜色
在此示例中有一个按钮使用 box-shadow
属性在正常情况下形成对比。在强制颜色模式中,box-shadow
被强制变为 none
,故此示例使用 forced-colors
媒体特性确保有颜色合适(此例为 ButtonBorder
)的边框。
HTML
<button class="button">按我!</button>
CSS
.button {
border: 0;
padding: 10px;
box-shadow:
-2px -2px 5px gray,
2px 2px 5px gray;
}
@media (forced-colors: active) {
.button {
/* 改用边框,这是因为在强制颜色模式中 box-shadow 被强制变为“none” */
border: 2px ButtonBorder solid;
}
}
结果
规范
Specification |
---|
CSS Color Module Level 4 # css-system-colors |
浏览器兼容性
BCD tables only load in the browser
参见
<color>
——这些关键字所属的数据类型