monochrome
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Tính năng media monochrome trong CSS có thể được dùng để kiểm tra số bit trên mỗi pixel trong bộ đệm khung đơn sắc của thiết bị đầu ra.
Cú pháp
Tính năng monochrome được xác định bởi giá trị <integer> đại diện cho số bit trên mỗi pixel trong bộ đệm khung đơn sắc. Nếu thiết bị không phải là thiết bị đơn sắc, giá trị là không. Đây là tính năng phạm vi, nghĩa là bạn cũng có thể dùng các biến thể có tiền tố min-monochrome và max-monochrome để truy vấn giá trị tối thiểu và tối đa tương ứng.
Ví dụ
HTML
html
<p class="mono">Thiết bị của bạn hỗ trợ pixel đơn sắc!</p>
<p class="no-mono">Thiết bị của bạn không hỗ trợ pixel đơn sắc.</p>
CSS
css
p {
display: none;
}
/* Bất kỳ thiết bị đơn sắc nào */
@media (monochrome) {
p.mono {
display: block;
color: #333333;
}
}
/* Bất kỳ thiết bị không đơn sắc nào */
@media (monochrome: 0) {
p.no-mono {
display: block;
color: #ee3636;
}
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| Media Queries Level 4 # monochrome |