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.

Die grid CSS Media-Feature kann verwendet werden, um zu testen, ob das Ausgabegerät einen rasterbasierten Bildschirm verwendet.

Die meisten modernen Computer und Smartphones verfügen über bitmap-basierte Bildschirme. Beispiele für rasterbasierte Geräte sind textbasierte Terminals und einfache Telefone mit nur einer festen Schriftart.

Syntax

Das grid-Feature wird als <mq-boolean> Wert (0 oder 1) angegeben, der darstellt, ob das Ausgabegerät rasterbasiert ist oder nicht.

Beispiele

HTML

html
<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device! Neato!</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;
  }
}

Ergebnis

Spezifikationen

Specification
Media Queries Level 4
# grid

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch