Screen.colorDepth — Eigenschaft · JavaScript-Referenz

Signatur

Screen.colorDepth

Beschreibung

screen.colorDepth ist eine schreibgeschützte Eigenschaft des Screen-Objekts. Sie gibt an, wie viele Bit pro Pixel der Bildschirm zur Darstellung von Farben verwendet. Typische Werte sind 24 (True Color, 8 Bit je Kanal R/G/B) und bei manchen Systemen 30 oder 48 für Displays mit höherer Farbtiefe.

Laut CSSOM-View-Spezifikation soll der Wert aus Gründen der Kompatibilität meist 24 betragen. Die Browser runden den tatsächlichen Wert daher oft ab oder legen ihn fest, auch um Fingerprinting zu erschweren. Den Wert benutzt man deshalb höchstens als groben Hinweis, zum Beispiel für Diagnose- und Telemetriedaten oder für eine einfache Unterscheidung zwischen alten Geräten mit wenigen Farben und modernen Displays.

Für echte Entscheidungen im Design, etwa ob ein Display einen erweiterten Farbraum (HDR, Display P3) darstellen kann, sind die CSS-Media-Queries color, color-gamut und dynamic-range zusammen mit window.matchMedia() deutlich besser geeignet. colorDepth hat fast immer denselben Wert wie screen.pixelDepth.

Rückgabewert

Typ

number

Beschreibung

Eine Ganzzahl mit der Farbtiefe in Bit pro Pixel, in der Praxis meistens 24.

Beispiele

Farbtiefe auslesen

const depth = window.screen.colorDepth;
console.log(`Farbtiefe: ${depth} Bit pro Pixel`);

Farbtiefe: 24 Bit pro Pixel

Vereinfachte Grafik bei geringer Farbtiefe

// Bei weniger als 16 Bit ein Bild mit weniger Verläufen laden
const img = document.createElement('img');
img.alt = 'Produktfoto';
img.src = screen.colorDepth < 16
  ? '/img/produkt-reduziert.png'
  : '/img/produkt.jpg';
document.body.append(img);
console.log(img.getAttribute('src'));

/img/produkt.jpg

Diagnosedaten zusammen mit Media-Queries erfassen

const getDisplayInfo = () => ({
  colorDepth: screen.colorDepth,
  pixelDepth: screen.pixelDepth,
  wideGamut: matchMedia('(color-gamut: p3)').matches,
  hdr: matchMedia('(dynamic-range: high)').matches,
  bitsPerChannel: [16, 12, 10, 8].find(b => matchMedia(`(min-color: ${b})`).matches) ?? 0
});

console.log(getDisplayInfo());

{ colorDepth: 24, pixelDepth: 24, wideGamut: true, hdr: false, bitsPerChannel: 8 }

// Wichtig · Fallstricke

Wenig aussagekräftig: Viele Browser geben unabhängig von der Hardware 24 zurück, auch auf HDR- oder 10-Bit-Displays. Verlass dich für Farbraum oder HDR nicht auf diesen Wert, sondern nutze matchMedia('(color-gamut: p3)') bzw. (dynamic-range: high).
Datenschutz: Der Wert trägt zum Browser-Fingerprinting bei. Datenschutzmodi, zum Beispiel privacy.resistFingerprinting in Firefox oder der Tor Browser, geben bewusst einen festen Wert zurück.
Schreibgeschützt: Eine Zuweisung wie screen.colorDepth = 8 wird stillschweigend ignoriert, im Strict Mode kann sie einen TypeError auslösen.
Kompatibilität: Wird von allen gängigen Browsern unterstützt. In Node.js gibt es die Eigenschaft nicht, weil dort kein screen-Objekt existiert. In Code, der auch auf dem Server läuft, zuerst mit typeof screen !== 'undefined' prüfen.
Der Wert kann sich ändern, wenn das Fenster auf einen anderen Monitor verschoben wird. Ein eigenes Änderungs-Event gibt es dafür nicht.

Siehe auch

Screen Screen.pixelDepth Window.screen Window.matchMedia() Window.devicePixelRatio FetchEvent.preloadResponse Screen.isExtended