CSS-Media-Feature grid
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die grid CSS Media-Feature kann verwendet werden, um zu testen, ob das Ausgabegerät einen gitterbasierten Bildschirm verwendet.
Die meisten modernen Computer und Smartphones haben bitmap-basierte Bildschirme. Beispiele für gitterbasierte Geräte sind textbasierte Terminals und Basishandys mit nur einer festen Schriftart.
Syntax
Die grid-Feature wird als <mq-boolean> Wert (0 oder 1) angegeben, der darstellt, ob das Ausgabegerät gitterbasiert 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
| Spezifikation |
|---|
| Media Queries Level 4 # grid |