::cue
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
{"* "}Some parts of this feature may have varying levels of support.
Das ::cue CSS Pseudoelement wendet sich an WebVTT Textspuren innerhalb eines ausgewählten Elements.
Dies kann verwendet werden, um Untertitel und andere Hinweise zu gestalten in Medien mit VTT-Spuren.
Probieren Sie es aus
video {
width: 100%;
}
video::cue {
font-size: 1rem;
color: yellow;
}
::cue(u) {
color: red;
}
<video controls src="/shared-assets/videos/friday.mp4">
<track
default
kind="captions"
srclang="en"
src="/shared-assets/misc/friday.vtt" />
Sorry, your browser doesn't support embedded videos.
</video>
Die Eigenschaften werden auf die gesamte Menge der Hinweise angewendet, als ob sie eine einzelne Einheit wären. Die einzige Ausnahme ist, dass background und dessen Langformeigenschaften auf jeden Hinweis individuell angewendet werden, um das Erstellen von Boxen und das unerwartete Verdecken von großen Bereichen des Mediums zu vermeiden.
Im obigen Beispiel wählt der Selektor ::cue(u) alle <u> Elemente innerhalb des Hinweistextes aus.
Syntax
::cue | ::cue(<selector>) {
/* ... */
}
Erlaubte Eigenschaften
Regeln, deren Selektoren dieses Element einschließen, dürfen nur die folgenden CSS-Eigenschaften verwenden:
backgroundbackground-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizecolorfontfont-familyfont-sizefont-stretchfont-stylefont-variantfont-weightline-heightopacityoutlineoutline-coloroutline-styleoutline-widthruby-positiontext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-decoration-thicknesstext-shadowvisibilitywhite-space
Beispiele
WebVTT-Hinweise als weiß auf schwarz gestalten
Der folgende CSS-Stil setzt den Hinweis so, dass der Text weiß und der Hintergrund ein durchscheinendes schwarzes Kästchen ist.
::cue {
color: white;
background-color: rgb(0 0 0 / 60%);
}
WebVTT interne Knotenobjekte gestalten
Hinweistext kann interne Knotenobjekte wie die Tags (ähnlich den 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 anzupassen, wie die WebVTT-Spur angezeigt wird. Betrachten Sie den folgenden Hinweistext, 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
Loading…