::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
::cue | ::cue(<selector>) {
/* ... */
}
Erlaubte Eigenschaften
Regeln, deren Selektoren dieses Element enthalten, dürfen nur die folgenden CSS-Eigenschaften verwenden:
background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
color
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight
line-height
opacity
outline
outline-color
outline-style
outline-width
ruby-position
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
text-shadow
visibility
white-space
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.
::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:
::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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::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.