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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::cue
::cue(<selector>)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch