:future | CSS-Tricks

:future is a CSS pseudo-selector we can use to style upcoming elements during media playback. Think subtitles in videos. We can use this to style subtitles that are coming up next to separate them visually from the currently displayed subtitle and past subtitles.

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

This is part of what the CSS Selectors Level 4 specification calls “time dimensional” pseudo-classes, which is currently in Working Draft status. That means the specification is in progress and could change between now and when it becomes a candidate recommendation.

WebVTT and subtitles

WebVTT is how we get subtitles in video. It’s a file all by itself that gets called in the <video> element and plays alongside the video file, displaying subtitles that are organized in time ranges.

WEBVTT

00: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!

So, as the video plays, so do the subtitles, giving us a time dimension where subtitles can be in the past, present and future. :future allows us to select and style all upcoming subtitles.

Khari McMillian published a super thorough post on WebVTT, including how to format it for the best accessibility.

Example

Given some sort of <video> in HTML:

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

…and a WebVTT file that defines subtitles along a timeline:

WEBVTT

1
00:00:00.000 --> 00:00:03.000
<i>This is a WebVTT demo.</i>

2
00:00:03.000 --> 00:00:06.000
<b>WebVTT supports many different kinds of formatting.</b>

3
00:00:06.000 --> 00:00:09.000
The text can be normal, like this.

4
00:00:09.000 --> 00:00:12.000 vertical:lr
Or vertical.

5
00:00:12.000 --> 00:00:15.000 line:100%
You can move it vertically.

6
00:00:15.000 --> 00:00:18.000 vertical:rl line:0
Or horizontally.

7
00:00:18.000 --> 00:00:21.000
You can even colorize captions.

8
00:00:21.000 --> 00:00:24.000 size:20
Or change its size.

9
00:00:24.000 --> 00:00:27.000
<ruby>Ruby text is supported as well.<rt>This text will be above the other text.

10
00:00:27.000 --> 00:00:30.000 size:40%
Size can be adjusted as well.

…we can style subtitles that follow the one currently displayed:

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

Browser support

This is all very conceptual at the moment. The spec itself is in Working Draft status. That means :future has been defined, but there’s very little support for it and what we have now is subject to change by the time it becomes a recommendation candidate.