::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 Cues innerhalb eines ausgewählten Elements. Dies kann genutzt werden, um Untertitel und andere Cues zu gestalten in Medien mit VTT-Tracks.
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 Cues angewendet, als ob sie eine einzige Einheit wären. Die einzige Ausnahme ist, dass background und dessen Langform-Eigenschaften auf jeden Cue individuell angewendet werden, um die Erstellung von Kästchen zu vermeiden, die unerwartet große Bereiche des Mediums verdecken.
Im obigen Beispiel wählt der ::cue(u) Selektor alle <u> Elemente innerhalb des Cue-Textes 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
Styling von WebVTT-Cues als weiß auf schwarz
Das folgende CSS legt den Cue-Stil so fest, dass der Text weiß ist und der Hintergrund eine durchscheinende schwarze Box bildet.
::cue { color: white; background-color: rgb(0 0 0 / 60%); } Styling von internen WebVTT-Knotenobjekten
Cue-Text kann interne Knotenobjekte wie die Tags (ähnlich wie HTML-Elemente) <c>, <i>, <b>, <u>, <ruby>, <rt>, <v>, und <lang> beinhalten. Der ::cue() Selektor kann verwendet werden, um Stile auf Inhalte innerhalb dieser Tags anzuwenden, um zu spezifizieren, wie der WebVTT-Track angezeigt wird. Betrachten Sie den folgenden Cue-Text, 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 die Farbe und text-decoration des Textes innerhalb des <u> Tags 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…