Поддержка тем с высокой контрастностью (HTML)

Applies to Windows and Windows Phone

Версию для C#, VB, C++ и XAML см. в разделе Поддержка тем с высокой контрастностью (XAML).

Среда выполнения Windows по умолчанию поддерживает темы с высокой контрастностью для всех приложений. Когда пользователь переключается на тему с высокой контрастностью, эта платформа автоматически заменяет все цвета и параметры CSS стилем с высокой контрастностью. Вам не нужно ничего дорабатывать в приложении, чтобы обеспечить поддержку высокой контрастности.

В некоторых случаях вам может понадобиться управлять стилем с высокой контрастностью для вашего приложения. Например, если вы установили изображение кнопки в виде фонового изображения CSS, кнопка не будет видна при высокой контрастности, так как платформа среды выполнения Windows удаляет все фоновые изображения CSS. Чтобы переопределить поведение по умолчанию при высокой контрастности для конкретного элемента, используйте ms-high-contrast-adjust: none для родительского элемента. Кроме того, можно использовать запросы CSS носителя, чтобы настроить отображение с высокой контрастностью.


/* Back button style setting. */
.backButton {
    ...
}

@media screen and (-ms-high-contrast)
{
    .backButton {
        -ms-high-contrast-adjust: none;
        ...
    }
}

/* Back button additional customization for white high-contrast theme. */
@media screen and (-ms-high-contrast:black-on-white)
{
    .backButton {
       ...
    }
}

Вам необходимо также учитывать, как выглядят изображения при высокой контрастности. Если в темах с высокой контрастностью изображения выглядят плохо, предоставьте версии изображений для высокой контрастности и следуйте рекомендованным контекстам именования файлов. Например, файл изображения back.png должен иметь версию с именем back.contrast-high.png для тем с высокой контрастностью, back.contrast-black.png для черных тем с высокой контрастностью или back.contrast-white.png для белых тем с высокой контрастностью.

Эта платформа также позволяет вам использовать JavaScript, чтобы выполнять указанное действие, если применяется тема с высокой контрастностью.


// Take a specific action if the user has chosen a high-contrast theme.
if (matchMedia("screen and (-ms-high-contrast)").matches) {
  // A high-contrast theme is active. 
}

Связанные разделы

AccessibilitySettings
Соответствие основным требованиям к специальным возможностям

 

 

Показ:
© 2014 Microsoft