::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.

Das ::cue CSS-Pseudoelement wird verwendet, um WebVTT-Cues innerhalb eines ausgewählten Elements zu erfassen. Dies kann genutzt werden, um Untertitel und andere Cues zu stylen, die in Medien mit VTT-Tracks vorkommen.

Probieren Sie es aus

Die Eigenschaften werden auf die gesamte Menge an Cues angewandt, als ob sie eine einzige Einheit wären. Die einzige Ausnahme bildet die Eigenschaft background und deren Einzelwerte, die auf jedes Cue einzeln angewandt werden, um zu vermeiden, dass Boxen erstellt werden, die unerwartet große Bereiche des Mediums verdecken.

Im obigen Beispiel selektiert der ::cue(u)-Selektor alle <u>-Elemente im Cue-Text.

Syntax

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

Erlaubte Eigenschaften

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

Beispiele

WebVTT-Cues als Weiß-auf-Schwarz stylen

Das folgende CSS setzt den Cue-Stil so, dass der Text weiß ist und der Hintergrund eine halbtransparente schwarze Box ist.

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

Stylen von WebVTT-internen Node-Objekten

Cue-Text kann interne Node-Objekte wie die Tags (ähnlich zu HTML-Elementen) <c>, <i>, <b>, <u>, <ruby>, <rt>, <v>, und <lang> enthalten. Der ::cue()-Selektor kann verwendet werden, um Stile auf Inhalte innerhalb dieser Tags anzuwenden, um zu bestimmen, wie der WebVTT-Track angezeigt wird. Betrachten Sie den folgenden Cue-Text, der das <u>-Tag benutzt, 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