:futuro

:futurees un pseudoselector de CSS que podemos usar para diseñar los siguientes elementos durante la reproducción multimedia. Piense en subtítulos en vídeos. Podemos usar esto para diseñar los subtítulos que aparecen a continuación para separarlos visualmente del subtítulo que se muestra actualmente y de los subtítulos anteriores.

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

Esto es parte de lo que la especificación CSS Selectors Level 4 llama pseudoclases “dimensionales del 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.

WebVTT y subtítulos

WebVTT es la forma en que obtenemos subtítulos en vídeos. Es un archivo en sí mismo que se llama en el videoelemento y se reproduce junto con el archivo de video, mostrando subtítulos organizados en rangos de tiempo.

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!

Así, a medida que se reproduce el vídeo, también lo hacen los subtítulos, lo que nos da una dimensión temporal en la que los subtítulos pueden estar en el pasado, presente y futuro. :futurenos permite seleccionar y diseñar todos los próximos subtítulos.

Khari McMillian publicó una publicación súper 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 sigan al que se muestra actualmente:

video:future(p) {  opacity: .5;}

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 :future, 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

:pasado

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