::cue

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨janvier 2020⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

Le pseudo-élément CSS ::cue permet de cibler les indications textuelles WebVTT d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme les légendes et autres indications textuelles pour les médias avec des pistes VTT.

Exemple interactif

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" />
  Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.
</video>

Les propriétés sont appliquées à l'ensemble des indications (comme si celles-ci formaient un seul ensemble). Seule background (ou les propriétés raccourcies associées) s'appliquent à chaque indication séparément (afin d'éviter de créer des boîtes qui masqueraient de grandes zones sur le média).

Dans l'exemple ci-dessus, le sélecteur ::cue(u) sélectionne tous les éléments  à l'intérieur du texte de l'indication.

Syntaxe

css

::cue | ::cue(<selector>) {
  /* ... */
}

Propriétés autorisées

Les règles dont les sélecteurs incluent cet élément ne peuvent utiliser que les propriétés CSS suivantes :

Exemples

Mettre en forme les repères WebVTT en blanc sur fond noir

Le CSS suivant définit le style de la repère afin que le texte soit blanc et que l'arrière-plan soit une boîte noire translucide.

css

::cue {
  color: white;
  background-color: rgb(0 0 0 / 60%);
}

Mettre en forme les objets de nœud internes WebVTT

Le texte des repères peut inclure des objets de nœud internes sous forme de balises (similaires aux éléments HTML) <c>, , , , <ruby>, <rt>, <v>, et <lang>. Le sélecteur ::cue() peut être utilisé pour appliquer des styles au contenu à l'intérieur de ces balises afin de personnaliser l'affichage de la piste WebVTT. Considérons le texte de repère suivant qui utilise la balise  pour souligner un texte :

00:00:01.500 --> 00:00:02.999 line:80%
Dites-moi, le <u>seigneur de l'univers</u> est ici ?

La règle CSS suivante personnalise le texte à l'intérieur de la balise  avec une couleur et un text-decoration :

css

::cue(u) {
  color: red;
  text-decoration: wavy overline lime;
}

Spécifications

Specification
WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element

Compatibilité des navigateurs

Voir aussi

Format des pistes vidéo Web (WebVTT)
Les éléments <track>, <video>

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨15 sept. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content