::cue, :future et :past
Résumé des caractéristiques du sélecteur ::cue
Description du pseudo-élément ::cue.
::cue est un sélecteur du type pseudo-élément, qui désigne les sous-titres affichés sur une vidéo ou pendant la restitution
d'un contenu sonore ou vidéo.
Ces sous-titres sont définis dans un fichier au format WebVTT (Video Text Track format, avec l'extension .vtt).
Ce fichier établit le lien entre le texte à afficher et le chrono de la vidéo. Voici un exemple de fichier WebVTT,
le code HTML correspondant, et le résultat sur la vidéo en dessous
(si les sous-titres ne s'affichent pas, modifiez les paramètres de votre navigateur).
WEBVTT
00:00:00.500 --> 00:00:03.000
Tiens ! Cadeau !
00:00:03.000 --> 00:00:05.000
Wow ! Trop bien !
00:00:07.000 --> 00:00:11.000
Ca marche !
<video controls preload="metadata">
<source
src="fichier.mp4"
type="video/mp4"
>
<track default
label="Français"
kind="captions"
srclang="fr"
src="fichier-1.vtt"
>
</video>
On constate que les sous-titres s'affichent en jaune, et en caractères assez gros. Ceci a été défini en CSS, avec le sélecteur ::cue.
Syntaxe avec un argument.
Le pseudo-élément ::cue peut être rendu plus précis en indiquant un sélecteur entre parenthèses :
::cue(p) ne désigne que les sous-titres inclus dans une balise p
::cue(.demo) ne désigne que les sous-titres suivi de la classe .demo.
Etc.
Attention cependant : avec Firefox 
, cela risque de ne pas marcher (2024).
Bien entendu les autres combinaisons de sélecteurs restent valides. Par exemple, la syntaxe #video1 ::cue désigne les sous-titres
de la vidéo dont l'identifiant est video1.
Dans l'exemple ci-dessous, nous utilisons cette possibilité pour distinguer ce que disent les deux personnages, en leur affectant à chacun une couleur différente.
Les sélecteurs :future et :past.
:future cible les élément de sous-titre qui ne sont pas encore passés.
Tandis que :past cible les éléments déjà passés.
Cela suppose que le fichier .vtt dispose d'informations complémentaires pour délimiter le temps.
⚠ Il faut noter que plusieurs navigateur (dont Firefox ) ne traient pas encore des pseudo-classes (2024).
Les régions.
Le fichier .vtt peut comporter des informations de régions pour indiquer où afficher certains sous-titres.
Il est alors possible de cibler les messages qui s'affichent dans une de ces régions, ou même les messages qui s'affichent dans une région
particulière. C'est le rôle du pseudo-élément ::cue-region().
Propriétés utilisables avec ::cue.
Toutes les propriétés ne sont pas valides avec le sélecteur ::cue. Voici la liste des principales propriétés utilisables, les autres sont
simplement ignorées, sans invalider l'ensemble de la règle.
color: couleur du texte des sous-titres.opacity: degré de transparence des sous-titres.visibility: possibilité de masquer les sous-titres.text-decoration: sur ou soulignement des sous-titres.text-shadow: ombrage du texte des sous-titres.background: toutes les caractéristiques de l'arrière-plan des sous-titres.outline: bordure en surimpression des sous-titres (les propriétés de la familleborderne sont pas acceptées).font: toutes les caractéristiques de la police de caractères.line-height: hauteur de ligne.white-space: gestion des espaces.
Plus quelques autres, d'un usage peu fréquent dans les langues latines. Pour une liste complète, reportez-vous à la documentation du W3C : WebVTT: The Web Video Text Tracks Format.
Compatibilité des navigateurs avec le pseudo-élément ::cue.
La prise en charge du pseudo-élément ::cue utilisé sans argument, ne pose plus de problème avec les navigateurs actuels.
Mais les autres syntaxes, en particulier celles permettant de spécifier un sélecteur en argument n'est pas reconnue par Firefox (2024).
Il en est de même pour :future et :past.
::cue ciblant, dans une vidéo, le titre en train d'être joué.::cue() avec un paramètre : un sélecteur supplémentaire.::future qui cible, dans une vidéo, les texte à venir.::past qui cible, dans une vidéo, les texte déjà passés.Remarques :
(1) Accepte uniquement les propriétés utilisables avec les pseudo-élément ::cue sans arguments.
::cuecue(...):future:pastNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Safari
Safari sur IOS
Opéra Mobile
QQ Browser
Baidu Browser
Chrome
Edge
Firefox
Opéra
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historique du pseudo-élément ::cue.
-
Définition de sous titres pour vidéos - Niveau 1
Introduction du pseudo-élément::cuedans la spécification " Pistes de texte vidéo Web" (WebVTT : The Web Video Text Tracks Format).
13 Novembre 2014Document de travail.
10 Mai 2018Candidat à la recommandation.
Voir aussi, à propos des sélecteurs de medias.
Les pseudo-classes (ainsi que les autres sélecteurs) sont décrites dans la spécification CSS The Web Video Text Tracks Format. Nous vous invitons à consulter cette référence pour une liste complète des pseudo-classes, et de vous reportez plus spécialement aux pseudo-classes ci-dessous, qui sont relatives aux contenus multimedia.