Come verificare se l'utente è in modalità ad alto contrasto tramite JavaScript o CSS

Question

Quando si preme Spostare+Sinistra+Alt+Stampa Windows passa alla modalità ad alto contrasto: c'è qualche possibilità di rilevarlo su una pagina Web (utilizzando JavaScript o CSS)?

C'è qualche possibilità di rilevarlo nel file HTTP-Request (ovvero il lato server, ad es.tramite PHP o Ruby)?

Answer 1

questo articolo su come utilizzare i CSS sprite in alto contrasto , in modalità ad alto contrasto su Windows, le immagini di sfondo devono essere impostati a "nessuno" e cambia anche il colore di sfondo. Questo dovrebbe ignorare qualsiasi foglio di stile CSS. Così si può eseguire alcuni javascript per rilevarla dopo il rendering iniziale. Controllare il suo pagina dimostrativa (il "FYI [Non] in modalità ad alto contrasto" testo).

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

Se funziona, è possibile utilizzare un po 'di Javascript per cambiare semplicemente il vostro CSS o impostare un cookie (sessione) e ricaricare la pagina per passare al server ed eseguire azioni sul lato server.

Answer 2

I seguenti lavori 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-alto contrasto . Il modalità ad alto contrasto descrizione è anche la pena menzionare.

Answer 3

Se stai implementando un contrasto elevato nella tua applicazione web, utilizza il seguente blocco di codice per rilevare la selezione del contrasto nero su bianco e bianco su nero.Funzionerà bene in IE.

@schermata multimediale e (-ms-contrasto elevato:Black-on-White) { /* Metti il ​​tuo codice di styling .............*/}

@schermata multimediale e (-ms-contrasto elevato:bianco su nero) { /* metti il ​​tuo codice di styling .............*/}