:future | CSS-Tricks

:future ist ein CSS-Pseudo-Selektor, den wir verwenden können, um kommende Elemente während der Medienwiedergabe zu gestalten. Denken Sie an Untertitel in Videos. Wir können dies verwenden, um kommende Untertitel zu gestalten und sie visuell von den aktuell angezeigten Untertiteln und vergangenen Untertiteln zu trennen.

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

Dies ist Teil dessen, was die CSS Selectors Level 4 Spezifikation „zeitdimensionale“ Pseudo-Klassen nennt, die sich derzeit im Working Draft Status befindet. Das bedeutet, dass die Spezifikation in Arbeit ist und sich zwischen jetzt und ihrer Kandidatenempfehlung ändern könnte.

WebVTT und Untertitel

WebVTT ist, wie wir Untertitel in Videos erhalten. Es ist eine eigenständige Datei, die im <video> Element aufgerufen wird und neben der Videodatei abgespielt wird, wobei zeitlich organisierte Untertitel angezeigt werden.

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 wie das Video abgespielt wird, spielen auch die Untertitel, was uns eine Zeitdimension gibt, in der Untertitel in der Vergangenheit, Gegenwart und Zukunft liegen können. :future ermöglicht es uns, alle kommenden Untertitel auszuwählen und zu gestalten.

Khari McMillian veröffentlichte einen sehr ausführlichen Beitrag zu WebVTT, einschließlich der Formatierung für beste Barrierefreiheit.

Beispiel

Gegeben ein <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>

…und eine WebVTT-Datei, die Untertitel entlang einer Zeitleiste definiert

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.

…können wir Untertitel gestalten, die dem aktuell angezeigten folgen

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

Browser-Unterstützung

Das alles ist im Moment sehr konzeptionell. Die Spezifikation selbst befindet sich im Working Draft Status. Das bedeutet, dass :future definiert wurde, es aber nur sehr wenig Unterstützung dafür gibt und das, was wir jetzt haben, sich bis zur Kandidatenempfehlung ändern kann.