:pasado

:pastes un pseudoselector CSS que coincide con elementos que han pasado a lo largo de una línea de tiempo. Donde verá que esto entra en juego es en gran medida con los subtítulos de vídeo creados con WebVTT. Cuando un subtítulo ya no es el texto que se muestra actualmente, se convierte en parte del pasado en lo que respecta a la línea de tiempo y :pastnos permite combinarlo y diseñarlo en consecuencia.

:past(p) {  opacity: .5;}

Esto es parte de lo que la especificación CSS Selectors Level 4 llama pseudoclases “dimensionales de tiempo”, que actualmente se encuentra en estado de Borrador de trabajo. Eso significa que la especificación está en progreso y podría cambiar desde ahora hasta que se convierta en una recomendación candidata.

Curso intensivo WebVTT

WebVTT es un formato para crear subtítulos, trazándolos a lo largo de una línea de tiempo con rangos de tiempo que definen cuándo se muestra cada subtítulo. Esto nos permite alinear los subtítulos con la voz de la reproducción multimedia, como vídeos.

WEBVTT00:00:00.000 -- 00:00:03.000- [Birds chirping]- It's a beautiful day!00:00:04.000 -- 00:00:07.000- [Creek trickling]- It is indeed!00:00:08.000 -- 00:00:10.000- Hello there!

Mientras se reproduce el vídeo, WebVTT se ejecuta junto a él, mostrando los subtítulos definidos dentro de los rangos de tiempo. Eso significa que hay una dimensión temporal en la que tenemos estados pasados, actuales y futuros para los subtítulos. Una vez que un subtítulo termina de reproducirse, pasa a formar parte del pasado. Así es como todo esto se relaciona con el :pastpseudoelemento en CSS.

Khari McMillian publicó una publicación muy completa en WebVTT, que incluye cómo formatearla para lograr la mejor accesibilidad.

Ejemplo

Dado algún tipo videode HTML:

video controls  source src="/awesome-video.mp4" type="video/mp4"/  track kind="subtitles" srclang="en" label="English" default//video

…y un archivo WebVTT que define los subtítulos a lo largo de una línea de tiempo:

WEBVTT100:00:00.000 -- 00:00:03.000iThis is a WebVTT demo./i200:00:03.000 -- 00:00:06.000bWebVTT supports many different kinds of formatting./b300:00:06.000 -- 00:00:09.000The text can be normal, like this.400:00:09.000 -- 00:00:12.000 vertical:lrOr vertical.500:00:12.000 -- 00:00:15.000 line:100%You can move it vertically.600:00:15.000 -- 00:00:18.000 vertical:rl line:0Or horizontally.700:00:18.000 -- 00:00:21.000You can even colorize captions.800:00:21.000 -- 00:00:24.000 size:20Or change its size.900:00:24.000 -- 00:00:27.000rubyRuby text is supported as well.rtThis text will be above the other text.1000:00:27.000 -- 00:00:30.000 size:40%Size can be adjusted as well.

…podemos diseñar subtítulos que precedan al que se muestra actualmente:

video:past(p) {  background: rgba(0, 0, 0, .5);  color: #fff;  font-weight: 800;  padding: 1rem;}

Soporte del navegador

Todo esto es muy conceptual en este momento. La especificación en sí está en estado de Borrador de trabajo. Se ha definido ese medio :past, pero hay muy poco apoyo para ello y lo que tenemos ahora está sujeto a cambios cuando se convierta en un candidato a recomendación.

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	No	No	No	16.1+	No

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
No	No	No	7	No

Más información

• Especificación de nivel 4 de selectores CSS (borrador de trabajo)
• Formato de pistas de texto de vídeo web (MDN)
• Mejora de la accesibilidad de vídeo con WebVTT

Propiedades relacionadas

:actual

:current { color: #fd5a1e; } Geoff Graham

:futuro

:future(p) { opacity: .5; } Geoff Graham