<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.
<system-color>
は CSS のデータ型で、ウェブページの様々な部分に通常使用する既定の色を反映します。
しかし、ユーザーエージェントは強制色モードと呼ばれるアクセシビリティ機能を提供することができ、このモードでは色はユーザーとユーザーエージェントが定義したパレットに制限され、特定のプロパティで作者が選択した色を上書きします。強制色モードでは、 <system-color>
は選択された色を公開するので、ページの残りの部分はそれらと統合することができます。強制色モードの例としては、 Windows の高コントラストモードがあります。
強制色モードでは、作者は <system-color>
型の色を、色がオーバーライドされるプロパティの設定にはないすべてのプロパティに使用するべきです。これにより、ページがすべてのプロパティで一貫して同じ色パレットを使用することを保証します。
作者は forced-colors
メディア特性を使用して、強制色モードを検出することができます。
<system-color>
値は、 <color>
を使用できる場所であればどこでも使用することができます。
構文
これらのキーワードは大文字と小文字を区別しませんが、ここでは読み取り可能なように大文字と小文字を混合して掲載しています。
AccentColor
-
アクセント付きユーザーインターフェイスコントロールの背景
AccentColorText
-
アクセント付きユーザーインターフェイスコントロールのテキスト
ActiveText
-
アクティブリンクのテキスト
-
コントロールのベース境界色
-
コントロールの背景色
-
コントロールのテキスト色
Canvas
-
アプリケーションのコンテンツや文書の背景
CanvasText
-
アプリケーションのコンテンツや文書のテキスト色
Field
-
入力フィールドの背景
FieldText
-
入力フィールドのテキスト
GrayText
-
無効なアイテムの文字色(無効なコントロールなど)
Highlight
-
選択項目の背景
HighlightText
-
選択項目のテキスト色
LinkText
-
非アクティブ、未訪問リンクのテキスト
Mark
-
特別にマークされたテキストの背景(HTML の
mark
要素など)。 MarkText
-
特別にマークされたテキスト(HTML の
mark
要素など)。 VisitedText
-
訪問済みリンクのテキスト
非推奨のシステム色キーワード
以下のキーワードは、以前のバージョンの CSS カラーモジュールで定義されていました。これらを公開ウェブページで使用することは非推奨です。
ActiveBorder
非推奨;-
アクティブウィンドウの境界線。
-
アクティブウィンドウのキャプション。前景色としては
CaptionText
を使用してください。 AppWorkspace
非推奨;-
複数文書インターフェイスの背景色。
Background
非推奨;-
デスクトップの背景。
-
境界線のレイヤーによって立体的に現れる 3D 要素の、光源に面する境界線の色。
-
境界線のレイヤーによって立体的に現れる 3D 要素の、光源から離れた境界線の色。
-
キャプション、サイズボックス、スクロールバーの矢印ボックスのテキスト。
ActiveCaption
の背景色と一緒に使用してください。 InactiveBorder
非推奨;-
非アクティブウィンドウの境界線。
-
非アクティブウィンドウのキャプション。
InactiveCaptionText
の前景色と一緒に使用してください。 -
非アクティブキャプションのテキストの色。
InactiveCaption
の背景色と一緒に使用してください。 InfoBackground
非推奨;-
ツールチップコントロールの背景色。
InfoText
の前景色と一緒に使用してください。 InfoText
非推奨;-
ツールチップコントロールの文字色。
InfoBackground
の背景色と一緒に使用してください。 -
メニューの背景。
MenuText
または-moz-MenuBarText
の前景色と一緒に使用してください。 -
メニューのテキスト。
Menu
の背景色と一緒に使用してください。 Scrollbar
非推奨;-
スクロールバーの背景色です。
ThreeDDarkShadow
非推奨;-
境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源から離れた 2 つの境界線のうち、暗い方(一般に外側)の色。
ThreeDFace
非推奨;-
境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の表面の背景色。
ButtonText
の前景色と一緒に使用してください。 ThreeDHighlight
非推奨;-
境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源に面する 2 つの境界線のうち、明るい方(一般に外側)の色。
ThreeDLightShadow
非推奨;-
境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源に面する 2 つの境界線のうち暗い方(一般に内側)の色。
ThreeDShadow
非推奨;-
境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源から離れた 2 つの境界線のうち、明るい方(一般に内側)の色。
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 {
/* forced-colors モードでは box-shadow は強制的に 'none' になるので、
代わりに境界を使用します。 */
border: 2px ButtonBorder solid;
}
}
結果
仕様書
Specification |
---|
CSS Color Module Level 4 # css-system-colors |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
<color>
: これらのキーワードが所属する先のデータ型