::cue
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
::cue | ::cue(<selector>) {
/* ... */
}
Erlaubte Eigenschaften
Regeln, deren Selektoren dieses Element einschließen, 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 stylen
Das folgende CSS setzt den Cue-Stil so, dass der Text weiß ist und der Hintergrund eine halbtransparente schwarze Box ist.
::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:
::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