::cue

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

Das ::cue- CSS-Pseudoelement wendet sich auf WebVTT-Cues innerhalb eines ausgewählten Elements an. Dies kann verwendet werden, um Untertitel und andere Cues zu gestalten in Medien mit VTT-Tracks.

Probieren Sie es aus

Die Eigenschaften werden auf die gesamte Menge der Cues angewendet, als ob sie eine einzige Einheit wären. Die einzige Ausnahme bilden background und seine Langform-Eigenschaften, die auf jeden Cue einzeln angewendet werden, um zu vermeiden, dass Boxen erstellt und unerwartet große Bereiche des Mediums überdeckt werden.

Im obigen Beispiel wählt der Selektor ::cue(u) alle <u>-Elemente innerhalb des Cue-Texts aus.

Syntax

css
::cue | ::cue(<selector>) {
  /* ... */
}

Erlaubte Eigenschaften

Regeln, deren Selektoren dieses Element enthalten, dürfen nur die folgenden CSS-Eigenschaften verwenden:

Beispiele

WebVTT-Cues als Weiß-auf-Schwarz gestalten

Das folgende CSS setzt die Cue-Stilrichtung so, dass der Text weiß und der Hintergrund eine durchscheinende schwarze Box ist.

css
::cue {
  color: #fff;
  background-color: rgb(0 0 0 / 60%);
}

Gestaltung von WebVTT-internen Node-Objekten

Cue-Text kann interne Node-Objekte enthalten, d. h. Tags (ähnlich wie HTML-Elemente) wie <c>, <i>, <b>, <u>, <ruby>, <rt>, <v> und <lang>. Der Selektor ::cue() kann verwendet werden, um Stile auf Inhalte innerhalb dieser Tags anzuwenden und so anzupassen, wie der WebVTT-Track dargestellt wird. Betrachten Sie den folgenden Cue-Text, der das <u>-Tag verwendet, um Text zu unterstreichen:

00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the <u>lord of the universe</u> in?

Die folgende CSS-Regel passt den Text innerhalb des <u>-Tags mit einer Farbe und einer text-decoration an:

css
::cue(u) {
  color: red;
  text-decoration: wavy overline lime;
}

Spezifikationen

Specification
WebVTT: The Web Video Text Tracks Format
# the-cue-pseudo-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch