<system-color>

Обратите внимание, что эти ключевые слова нечувствительны к регистру, но здесь перечислены с разными регистрами для лучшей читабельности.

AccentColor

Фон выделенных элементов пользовательского интерфейса

AccentColorText

Текст выделенных элементов пользовательского интерфейса

ActiveText

Текст активных ссылок

ButtonBorder

Основной цвет границы элементов управления

ButtonFace

Цвет фона элементов управления

ButtonText

Цвет текста элементов управления

Canvas

Фон содержимого или документов приложения

CanvasText

Цвет текста в содержимом или документах приложения

Field

Фон входных полей

FieldText

Текст в входных полях

GrayText

Цвет текста для отключённых элементов (например, отключённого элемента управления)

Highlight

Фон выделенных элементов

HighlightText

Цвет текста выделенных элементов

LinkText

Текст неактивных, не посещённых ссылок

Mark

Фон текста, который был специально помечен (например, элементом HTML mark)

MarkText

Текст, который был специально помечен (например, элементом HTML mark)

SelectedItem

Фон выделенных элементов, например, выделенной галочки

SelectedItemText

Текст выделенных элементов

VisitedText

Текст посещённых ссылок

Следующие ключевые слова были определены в предыдущих версиях модуля CSS Color. Они теперь устарели для использования на общедоступных веб-страницах.

ActiveBorder

Граница активного окна.

ActiveCaption

Заголовок активного окна. Должен использоваться с CaptionText в качестве цвета переднего плана.

AppWorkspace

Цвет фона многодокументного интерфейса.

Background

Фон рабочего стола.

ButtonHighlight

Цвет границы, обращённой к источнику света для 3D-элементов, которые кажутся 3D-элементами из-за слоя окружающей границы.

ButtonShadow

Цвет границы, удалённой от источника света для 3D-элементов, которые кажутся 3D-элементами из-за слоя окружающей границы.

CaptionText

Текст в заголовке, рамке размера и стрелке полосы прокрутки. Должен использоваться с цветом фона ActiveCaption.

InactiveBorder

Граница неактивного окна.

InactiveCaption

Заголовок неактивного окна. Должен использоваться с цветом переднего плана InactiveCaptionText.

InactiveCaptionText

Цвет текста в неактивном заголовке. Должен использоваться с цветом фона InactiveCaption.

InfoBackground

Цвет фона элементов управления подсказки. Должен использоваться с цветом переднего плана InfoText.

InfoText

Цвет текста для элементов управления подсказки. Должен использоваться с цветом фона InfoBackground.

Menu

Фон меню. Должен использоваться с цветом переднего плана MenuText или -moz-MenuBarText.

MenuText

Текст в меню. Должен использоваться с цветом фона Menu.

Scrollbar

Цвет фона полос прокрутки.

ThreeDDarkShadow

Цвет более тёмной (обычно внешней) из двух границ, удалённых от источника света для 3D-элементов, которые кажутся 3D-элементами из-за двух концентрированных слоёв окружающих границ.

ThreeDFace

Цвет фона лицевой стороны для 3D-элементов, которые кажутся 3D-элементами из-за двух концентрированных слоёв окружающих границ. Должен использоваться с цветом переднего плана ButtonText.

ThreeDHighlight

Цвет более светлой (обычно внешней) из двух границ, обращённых к источнику света для 3D-элементов, которые кажутся 3D-элементами из-за двух концентрированных слоёв окружающих границ.

ThreeDLightShadow

Цвет более тёмной (обычно внутренней) из двух границ, обращённых к источнику света для 3D-элементов, которые кажутся 3D-элементами из-за двух концентрированных слоёв окружающих границ.

ThreeDShadow

Цвет более светлой (обычно внутренней) из двух границ, удалённых от источника света для 3D-элементов, которые кажутся 3D-элементами из-за двух концентрированных слоёв окружающих границ.

Window

Фон окна. Должен использоваться с цветом переднего плана WindowText.

WindowFrame

Рамка окна.

WindowText

Текст в окнах. Должен использоваться с цветом фона Window.

В этом примере кнопка обычно получает контрастность с помощью свойства box-shadow. В режиме принудительных цветов box-shadow принудительно устанавливается в значение none, поэтому пример использует медиа-функцию forced-colors для обеспечения границы соответствующего цвета (ButtonBorder в данном случае).

HTML

<button class="button">Press me!</button>

CSS

.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow
    is forced to 'none' in forced-colors mode */
    border: 2px ButtonBorder solid;
  }
}

Результат

• <color>: тип данных, к которому относятся эти ключевые слова