Pseudo-élément CSS ::cue
Baseline
Large disponibilité
*
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 <u> à l'intérieur du texte de l'indication (angl.).
Syntaxe
::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 :