Como verificar se o usuário está no modo de alto contraste via JavaScript ou CSS

Question

Ao pressionar Mudança+Deixei+Alt+Imprimir O Windows muda para o modo de alto contraste - há alguma chance de detectar isso em uma página da web (usando JavaScript ou CSS)?

Há alguma chance de detectar que no HTTP-Request (também conhecido como o servidor, por exemplo, via php ou ruby)?

Answer 1

De acordo com Este artigo sobre o uso de sprites CSS em alto contraste, No modo de alto contraste no Windows, as imagens de fundo devem ser definidas como "nenhuma" e também altera a cor do plano de fundo. Isso deve substituir qualquer folha de estilo CSS. Assim, você pode executar algum JavaScript para detectá -lo após a renderização inicial. Verifique o dele página de demonstração (o texto "FYI [não] no modo de alto contraste").

Eu tenho Mac (Switch FYI usando Cmd + Alt + Ctrl + 8) e sua técnica não funciona para mim, mas ele diz que funciona no Windows.

Se funcionar, você pode usar algum JavaScript para simplesmente alterar seu CSS ou definir um cookie (sessão) e recarregar a página para passá-lo para o servidor e executar ações do lado do servidor.

Answer 2

Os seguintes trabalhos para mim no Win8 com (o desktop-), ou seja:

<style type="text/css">
// ...
@media screen and (-ms-high-contrast: active) {
   /* any rules may come here, for example: */
   .leftMenu a:hover { text-decoration: underline; }
}
// ...
</style>

Eu acho que deve funcionar com aplicativos da Windows Store também. Esta não é uma solução completa, mas talvez seja útil.

MSDN DOC: @meios de comunicação, -MS-High-Contrast. o Modo de alto contraste Descrição também vale a pena mencionar.

Answer 3

Se você estiver implementando alto contraste em seu aplicativo da Web, use o seguinte bloco de código para detectar a seleção de contraste em preto em branco e branco-preto. Isso funcionará bem no IE.

@media Screen e (-ms-High-Contrast: Black-on-White) { / * Coloque seu código de estilo ............. * /}

@media Screen e (-ms-High-Contrast: White-on-Black) { / * Coloque seu código de estilo ............. * /}