scan

Das scan CSS Medien-Feature wird verwendet, um CSS-Stile basierend auf dem Scan-Prozess des Ausgabegeräts anzuwenden.

Syntax

Das scan-Feature wird als einer der folgenden Schlüsselwortwerte angegeben:

interlace: Das Ausgabegerät verwendet ein "Interlace"-Rendering, bei dem Videoframes abwechselnd nur die "geraden" Linien auf dem Bildschirm und nur die "ungeraden" Linien spezifizieren.
progressive: Das Ausgabegerät rendert den Inhalt ohne besondere Behandlung auf den Bildschirm.

Beschreibung

Die meisten modernen Bildschirme (und alle Computerbildschirme) verwenden das progressive Rendering, bei dem jeder Bildschirm vollständig ohne besondere Behandlung angezeigt wird.

Interlacing wurde von CRT-Monitoren und einigen Plasma-TVs verwendet, um die Darstellung von schnelleren Bildern pro Sekunde (FPS) zu ermöglichen und gleichzeitig die Bandbreite zu reduzieren. Beim Interlacing wechseln die Video-Frames zwischen dem Rendering der geraden und der ungeraden Linien auf dem Bildschirm, indem nur die Hälfte des Bildschirms für jeden Frame heruntergeladen und gerendert wird. Dadurch wird die menschliche Fähigkeit zur Bildglättung genutzt, sodass das Gehirn eine höhere FPS-Übertragung bei halben Bandbreitenkosten simuliert.

Wenn Sie interlaced Bildschirme anvisieren, vermeiden Sie sehr schnelle Bewegungen über den Bildschirm und stellen Sie sicher, dass animierte Details breiter als 1px sind, um Flackern zu reduzieren.

Beispiele

HTML

html

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

CSS

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

No specification found

No specification data found for css.at-rules.media.scan.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser-Kompatibilität

Siehe auch

Die @media At-Regel, die verwendet wird, um den Scan-Ausdruck zu spezifizieren.
Verwendung von Media Queries, um zu verstehen, wann und wie eine Media Query verwendet wird.