:actual

:currentes un pseudoselector CSS que coincide con un elemento o un antepasado de un elemento que se muestra actualmente. Entonces, podemos hacer coincidir los elementos que se han mostrado en la pantalla de esta manera:

:current(p, ul);

…y eso seleccionará todos los párrafos y listas desordenadas que se muestran actualmente. Es muy parecido is()en ese sentido. Pero lo que hace que este pseudo-selector sea genial es que es parte de lo que la especificación CSS Selectors Level 4 llama pseudoclases “dimensionales del tiempo” que están diseñadas para hacer coincidir elementos a lo largo de una línea de tiempo, como los subtítulos. de un vídeo.

Conoce WebVTT

Eso es lo que se usa para representar los subtítulos en un vídeo. Y lo hace definiendo una línea de tiempo que combina los subtítulos con rangos de tiempo para que se alineen con el discurso que se está reproduciendo.

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. ¿Próximos subtítulos? Sí, están en el futuro.

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

Pero lo que nos importa son los que están jugando actualmente. Eso es lo que :currentselecciona. Vale la pena señalar aquí que estos pseudos pseudo-dimensionales no pueden diseñar archivos WebVTT sin una línea de tiempo.

:currentselecciona el subtítulo que se está mostrando actualmente

Así es, tan simple como eso. Es posible que deseemos mejorar el estilo de los subtítulos que se muestran para que se destaquen de los subtítulos pasados ​​y futuros.

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

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 los párrafos de un subtítulo que se está mostrando actualmente:

video:current(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 :current, 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

:futuro

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

:pasado

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