:past | CSS-Tricks

:past ist ein CSS-Pseudo-Selektor, der Elemente auswählt, die eine Zeitleiste durchlaufen haben. Wo dies zum Tragen kommt, sind vor allem Videountertitel, die mit WebVTT erstellt wurden. Wenn ein Untertitel nicht mehr der aktuell angezeigte Text ist, wird er in Bezug auf die Zeitleiste zu einem Teil der Vergangenheit, und :past ermöglicht es uns, ihn entsprechend auszuwählen und zu stylen.

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

Dies ist Teil dessen, was die CSS Selectors Level 4 Spezifikation „zeitdimensionale“ Pseudoklassen nennt, die sich derzeit im Working Draft Status befindet. Das bedeutet, dass die Spezifikation in Arbeit ist und sich zwischen jetzt und dem Zeitpunkt, an dem sie zu einer Candidate Recommendation wird, ändern kann.

WebVTT Crashkurs

WebVTT ist ein Format zur Erstellung von Untertiteln, die entlang einer Zeitleiste mit Zeitbereichen, die definieren, wann jeder Untertitel angezeigt wird, angeordnet sind. Dies ermöglicht es uns, Untertitel mit der Sprache der Medienwiedergabe, wie z. B. Videos, abzugleichen.

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!

Während das Video abgespielt wird, läuft WebVTT parallel dazu und zeigt die Untertitel an, die innerhalb der Zeitbereiche definiert sind. Das bedeutet, es gibt eine Zeitdimension, in der wir vergangene, gegenwärtige und zukünftige Zustände für die Untertitel haben. Nachdem ein Untertitel abgespielt wurde, wird er Teil der Vergangenheit. So hängt das alles mit dem :past Pseudo-Element in CSS zusammen.

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.

… wir können Untertitel stylen, die dem aktuell angezeigten vorausgehen

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

Browser-Unterstützung

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