Come verificare se l'utente è in modalità di contrasto elevato tramite JavaScript o CSS

Question

Quando si preme Maiusc + Sinistra + Alt + Stampa Windows si passa in modalità di contrasto elevato - c'è qualche possibilità di rilevare che in una pagina web (usando JavaScript o CSS)?

C'è qualche possibilità di rilevarlo nello HTTP-Request (a.k.a sul lato server, ad es. Tramite PHP o Ruby)?

Answer 1

Secondo this article about using CSS sprites in high contrast, in modalità contrasto elevato su Windows, le immagini di sfondo devono essere impostate su "none" e cambia anche il colore di sfondo. Questo dovrebbe sovrascrivere qualsiasi foglio di stile CSS. Quindi puoi eseguire alcuni javascript per rilevarlo dopo il rendering iniziale. Controlla il suo demo page (il testo "FYI [Not] in modalità contrasto elevato").

Ho Mac (interruttore FYI utilizzando Cmd + Alt + Ctrl + 8) e la sua tecnica non funziona per me, ma dice che funziona su Windows.

Se funziona, è possibile utilizzare JavaScript per modificare semplicemente il CSS o impostare un cookie (di sessione) e ricaricare la pagina per passarla al server ed eseguire azioni sul lato server.

Answer 2

le seguenti opere per me su Win8 con (il desktop-) IE:

<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> 

penso che deve lavorare con Windows Store Apps pure. Questa non è una soluzione completa, ma forse utile un po '.

MSDN doc: @media, -ms-high-contrast. La descrizione High-contrast mode vale anche la pena menzionarla.

Answer 3

Se si sta implementando un contrasto elevato nell'applicazione Web, utilizzare il seguente blocco di codice per rilevare la selezione del contrasto nero su bianco e bianco su nero. Questo funzionerà bene in IE.

schermo @media e (-ms-alto contrasto: nero-su-bianco) { /* Metti il ​​tuo codice di stile ............. */ }

schermo @media e (-ms-alto contrasto: bianco su nero) { /* Metti il ​​tuo codice di stile ............. */ }