dynamic-range-limit

Syntax

/* Keyword values */
dynamic-range-limit: standard;
dynamic-range-limit: no-limit;
dynamic-range-limit: constrained;

/* dynamic-range-limit-mix() function */
dynamic-range-limit: dynamic-range-limit-mix(standard 70%, no-limit 30%);

/* Global values */
dynamic-range-limit: inherit;
dynamic-range-limit: initial;
dynamic-range-limit: revert;
dynamic-range-limit: revert-layer;
dynamic-range-limit: unset;

Werte

Die dynamic-range-limit-Eigenschaft wird als einer der folgenden Schlüsselwortwerte oder als Funktion dynamic-range-limit-mix() angegeben.

Die folgenden Schlüsselwertbegriffe können angegeben werden:

standard

Gibt die maximale Leuchtdichte als HDR-Referenzweiß an, das ist die CSS-Farbe white.

no-limit

Gibt die maximale Leuchtdichte als weit über der von HDR-Referenzweiß an. Der genaue Wert ist nicht spezifiziert.

constrained

Gibt die maximale Leuchtdichte als etwas höher als die von HDR-Referenzweiß an, sodass eine Mischung aus Standard-Dynamic-Range (SDR) und HDR-Inhalten bequem gemeinsam angezeigt werden kann. Der genaue Wert ist nicht spezifiziert.

Die Funktion dynamic-range-limit-mix() gibt die maximale Leuchtdichte als benutzerdefinierten Wert an, der eine Kombination der verschiedenen Schlüsselwortwerte im Verhältnis zu den angegebenen Prozentsätzen darstellt. Sie nimmt zwei oder mehr Paare entgegen, die jeweils aus einem dynamic-range-limit-Schlüsselwort (oder einer verschachtelten dynamic-range-limit-mix()-Funktion) und einem Prozentsatz bestehen.

Beschreibung

Der Dynamikbereich ist der Unterschied in der Leuchtdichte (Helligkeit) zwischen den hellsten und dunkelsten Teilen eines Inhalts. Der Dynamikbereich wird in fotografischen Blendenstufen gemessen, wobei eine Erhöhung um eine Stufe eine Verdoppelung der Leuchtdichte darstellt.

SDR, HDR und Spielraum

Traditionelle Webinhalte nutzen den Standard-Dynamic-Range (SDR), bei dem die hellste Farbe der CSS-Farbe white (#ffffff in Hexadezimal) entspricht. Die Helligkeit von High Dynamic Range (HDR)-Inhalten kann hingegen über das Standardweiß hinausgehen. In der HDR-Terminologie wird das Standard-CSS-white auch als HDR-Referenzweiß bezeichnet.

Die Spitzenleuchtdichte, bei der Inhalte angezeigt werden können, hängt vom Inhalt, der verfügbaren Hardware und den Benutzereinstellungen ab. Das Maß, um das die Spitzenleuchtdichte von Weiß das HDR-Referenzweiß überschreiten kann, wird als HDR-Spielraum bezeichnet und typischerweise in fotografischen Blendenstufen ausgedrückt.

SDR-Inhalte haben immer einen HDR-Spielraum von 0, da ihr hellstes Weiß das HDR-Referenzweiß ist. Ältere Monitore haben möglicherweise auch einen HDR-Spielraum von 0, da sie nicht in der Lage sind, hellere Farben darzustellen. Neuere Monitore können einen HDR-Spielraum größer als 0 haben und die helleren Farben, die in HDR-Inhalten verfügbar sind, darstellen.

Der Anwendungsfall für dynamic-range-limit

Die Helligkeit von HDR-Inhalten kann für den Betrachter schockierend sein. Dies ist besonders offensichtlich in Apps, in denen eine Mischung aus HDR- und SDR-Inhalten angezeigt wird, was zu Inkonsistenzen in der Helligkeit führt.

Die dynamic-range-limit-Eigenschaft ermöglicht es Ihnen, die Helligkeit von HDR-Inhalten zu steuern. Beispielsweise möchten Sie die maximale Helligkeit aller Thumbnails in einer Foto- oder Videogalerie auf HDR-Referenzweiß beschränken (das ist der Wert des Schlüsselworts standard) oder auf eine Helligkeit, die nur geringfügig über dem HDR-Referenzweiß liegt (mit dem Schlüsselwortwert constrained oder einem benutzerdefinierten Limit, das mit dynamic-range-limit-mix() erstellt wurde). Wenn ein Benutzer ein einzelnes HDR-Bild ansieht oder eine Benutzerpräferenz zur Aktivierung auswählt, könnten Sie das dynamic-range-limit des Bildes auf no-limit setzen.

Formale Definition

Formale Syntax

dynamic-range-limit = 
  standard                     |
  no-limit                     |
  constrained                  |
  <dynamic-range-limit-mix()>  

<dynamic-range-limit-mix()> = 
  dynamic-range-limit-mix( [ <'dynamic-range-limit'> && <percentage [0,100]> ]#{2,} )  

<dynamic-range-limit> = 
  standard                     |
  no-limit                     |
  constrained                  |
  <dynamic-range-limit-mix()>  

Beispiele

Grundlegende Verwendung von dynamic-range-limit

In unserem Beispiel zur dynamic-range-limit-Eigenschaft enthalten wir ein HDR-Bild, das gehovt und fokussiert werden kann, um den dynamic-range-limit-Wert zu ändern. Das Beispiel live ansehen auf einem Display, das HDR-Farben darstellen kann, und ausprobieren. Der Code wird unten erklärt.

HTML

Im Markup binden wir ein HDR-Bild mit einem <img> Element ein. Wir fügen einen tabindex Wert von 0 hinzu, um das Bild per Tastatur fokussierbar zu machen.

<img
  src="gioia-pixel-ultrahdr.jpg"
  alt="A subway station, with white strip lights lighting the platform and ad posters in the background"
  tabindex="0" />

CSS

Wir geben unserem <img> Element einige rudimentäre Stile und setzen dann seine dynamic-range-limit-Eigenschaft auf standard, was bedeutet, dass es nicht heller als das HDR-Referenzweiß dargestellt wird. Wir setzen auch eine transition-Eigenschaft, sodass der dynamic-range-limit-Wert des <img> Elements über 0.6 Sekunden hinweg übergeht, wenn sich sein Zustand ändert.

img {
  width: 50%;
  border: 1px solid black;
  dynamic-range-limit: standard;
  transition: dynamic-range-limit 0.6s;
}

Bei Hover oder Fokus ändern wir den Wert des dynamic-range-limit des <img> Elements auf no-limit, sodass es so hell wie möglich dargestellt wird, wie es Browser und Anzeige ermöglichen.

img:hover,
img:focus {
  dynamic-range-limit: no-limit;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

dynamic-range und video-dynamic-range Medienfeatures