scan CSS-Medienmerkmal

Syntax

Das scan Merkmal wird als eines der folgenden Schlüsselwortwerte angegeben:

interlace

Das Ausgabegerät verwendet eine "interlacierte" Darstellung, bei der Video-Frames abwechselnd nur die "geraden" Zeilen auf dem Bildschirm und nur die "ungeraden" Zeilen spezifizieren.

progressive

Das Ausgabegerät rendert Inhalte ohne besondere Behandlung auf den Bildschirm.

Beschreibung

Die meisten modernen Bildschirme (und alle Computermonitore) verwenden progressive Darstellung, bei der jeder Bildschirm vollständig ohne besondere Behandlung angezeigt wird.

Interlacing wurde von CRT-Monitoren und einigen Plasma-TVs verwendet, um den Anschein von schnelleren Bildern pro Sekunde (FPS) zu ermöglichen und gleichzeitig die Bandbreite zu reduzieren. Mit Interlacing wechseln Videoframes zwischen dem Rendern der geraden und der ungeraden Linien auf dem Bildschirm, indem nur die Hälfte des Bildschirms für jeden Frame heruntergeladen und gerendert wird. Dies nutzt die Fähigkeit des menschlichen Gehirns zur Bildglättung aus, sodass ein höherer FPS-Übertragung simuliert wird, jedoch mit halben Bandbreitenkosten.

Beim Ziel von interlaced Bildschirmen sollten sehr schnelle Bewegungen über den Bildschirm vermieden und sichergestellt werden, dass animierte Details breiter als 1px sind, um Flackern zu reduzieren.

Beispiele

HTML

<p>This is a test.</p>

CSS

p {
  padding: 10px;
  border: solid;
}

@media screen and (scan: interlace) {
  p {
    background: #f4ae8a;
  }
}
@media screen and (scan: progressive) {
  p {
    text-decoration: underline;
  }
}
@media not screen and (scan: progressive) {
  p {
    border-style: dashed;
  }
}
@media not screen and (scan: interlaced) {
  p {
    color: purple;
  }
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die @media At-Regel, die verwendet wird, um den Scan-Ausdruck anzugeben.
• Verwendung von Media Queries für ein besseres Verständnis, wann und wie man eine Media Query verwendet.