Тип CSS `<system-color>`

<system-color> — это CSS-тип данных, который обычно отражает цвета по умолчанию, используемые для разных частей веб-страницы.

Однако пользовательские агенты могут предоставлять функцию специальных возможностей, называемую режимом принудительных цветов, в котором цвета ограничиваются палитрой, определяемой пользователем и пользовательским агентом, что переопределяет выбор цветов автора для определённых свойств. В режиме принудительных цветов <system-color> предоставляет выбранные цвета, чтобы остальная часть страницы могла гармонично с ними сочетаться. Пример режима принудительных цветов — режим высокой контрастности в Windows.

В режиме принудительных цветов авторам следует использовать цвета типа <system-color> для всех свойств, не входящих в набор свойств, цвета которых переопределяются. Это обеспечивает единообразное использование одной и той же цветовой палитры для всех свойств страницы.

Авторы могут обнаружить режим принудительных цветов с помощью медиафункции forced-colors.

Значение <system-color> можно использовать везде, где допустимо значение color.

Синтаксис

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

В зависимости от ваших настроек примеры цветов, отображаемые в таблице, могут отличаться. Вы также можете просмотреть эту страницу в разных браузерах, операционных системах и с разными системными настройками, чтобы проверить различия.

Устаревшие ключевые слова системных цветов

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

Примеры

Использование системных цветов

В этом примере кнопка обычно обеспечивает контраст с помощью свойства 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: тип данных, к которому относятся эти ключевые слова