Làm thế nào để kiểm tra xem người dùng đang ở chế độ tương phản cao qua JavaScript hoặc CSS

Question

Khi nhấn phím Shift + Left + Alt + In của Windows chuyển sang chế độ tương phản cao - là có bất kỳ cơ hội để phát hiện rằng trên trang web (sử dụng JavaScript hoặc CSS)?

Có cơ hội nào để phát hiện điều đó trong HTTP-Request (a.k.a phía máy chủ, ví dụ: thông qua PHP hoặc Ruby) không?

Answer 1

Theo this article about using CSS sprites in high contrast, ở chế độ tương phản cao trên Windows, hình nền phải được đặt thành "không có gì" và nó cũng thay đổi màu nền. Điều này sẽ ghi đè lên bất kỳ biểu định kiểu CSS nào. Vì vậy, bạn có thể thực hiện một số javascript để phát hiện nó sau khi rendering ban đầu. Kiểm tra demo page của mình (văn bản "FYI [Không] ở chế độ tương phản cao").

Tôi có máy Mac (FYI chuyển đổi sử dụng Cmd + Alt + Ctrl + 8) và kỹ thuật của anh ấy không hiệu quả với tôi, nhưng anh ấy nói nó hoạt động trên Windows.

Nếu nó hoạt động, bạn có thể sử dụng một số JavaScript để thay đổi CSS hoặc đặt cookie (phiên) và tải lại trang để chuyển nó tới máy chủ và thực hiện các tác vụ phía máy chủ.

Answer 2

Các công trình sau đây đối với tôi trên Win8 với (các 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> 

Tôi nghĩ rằng nó phải làm việc với Windows Store Apps là tốt. Đây không phải là giải pháp hoàn chỉnh, nhưng có thể hữu ích một chút.

Tài liệu MSDN: @media, -ms-high-contrast. Mô tả High-contrast mode cũng đáng nhắc đến.

Answer 3

Nếu bạn đang thực hiện độ tương phản cao trong ứng dụng web của mình, hãy sử dụng khối mã sau để phát hiện lựa chọn tương phản màu đen-trắng và trắng-đen. Điều này sẽ làm việc tốt trong IE.

màn hình @media và (-ms-cao độ tương phản: màu đen trên nền trắng) { /* Đặt mã phong cách của bạn ............. */ }

màn hình @media và (-ms-cao độ tương phản: màu trắng trên nền đen) { /* Đặt mã phong cách của bạn ............. */ }