::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 Pseudo-Element entspricht WebVTT Hinweise innerhalb eines ausgewählten Elements.
Dies kann verwendet werden, um Untertitel und andere Hinweise in Medien mit VTT-Tracks zu gestalten.
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 an Hinweisen angewendet, als ob sie eine einzige Einheit wären. Die einzige Ausnahme ist, dass background und seine Langform-Eigenschaften auf jeden Hinweis einzeln angewendet werden, um das Erstellen von Boxen und das unbeabsichtigte Verdecken großer Bereiche der Medien zu vermeiden.
Im obigen Beispiel selektiert der ::cue(u) Selektor alle <u> Elemente innerhalb des Hinweistextes.
Syntax
::cue | ::cue(<selector>) {
/* ... */
}
Erlaubte Eigenschaften
Regeln, deren Selektoren dieses Element enthalten, 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 stylen
Das folgende CSS setzt den Hinweis-Stil so, dass der Text weiß ist und der Hintergrund eine durchscheinende schwarze Box ist.
::cue {
color: white;
background-color: rgb(0 0 0 / 60%);
}
Styling von WebVTT-internen Knotenobjekten
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 der WebVTT-Track angezeigt wird.
Betrachten Sie den folgenden Hinweistext, der das <u> Tag verwendet, um einige Texte 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…