<system-color>

構文

これらのキーワードは大文字と小文字を区別しませんが、ここでは読み取り可能なように大文字と小文字を混合して掲載しています。

設定に応じて、表に表示されるサンプルカラーは変化する場合があります。また、さまざまなブラウザー、オペレーティングシステム、システム設定でこのページを表示すると、違いを調べることができます。

非推奨のシステム色キーワード

以下のキーワードは、以前のバージョンの CSS カラーモジュールで定義されていました。これらを公開ウェブページで使用することは非推奨になりました。

Menu 非推奨;

メニューの背景。 MenuText または -moz-MenuBarText の前景色と一緒に使用してください。

MenuText 非推奨;

メニューのテキスト。 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;
  }
}

結果

仕様書

ブラウザーの互換性

関連情報

• <color>: これらのキーワードが所属する先のデータ型