grid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Tính năng media grid trong CSS có thể được dùng để kiểm tra xem thiết bị đầu ra có sử dụng màn hình dạng lưới (grid-based) hay không.

Hầu hết máy tính hiện đại và điện thoại thông minh đều có màn hình dạng bitmap. Ví dụ về thiết bị dạng lưới bao gồm các terminal chỉ hiển thị văn bản và điện thoại cơ bản chỉ có một phông chữ cố định.

<p class="unknown">Tôi không biết bạn có đang dùng thiết bị lưới không. :-(</p>
<p class="bitmap">Bạn đang dùng thiết bị bitmap.</p>
<p class="grid">Bạn đang dùng thiết bị lưới! Thật tuyệt!</p>

CSS

css

:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
    text-transform: uppercase;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: black;
    text-transform: uppercase;
  }
}