:current | CSS-Tricks

CSS-Almanach → Selektoren → C → :current

Geoff Graham am 27. Aug 2021

:current ist ein CSS-Pseudo-Selektor, der ein Element oder einen Vorfahren eines Elements auswählt, das sich gerade in Anzeige befindet. So können wir Elemente auswählen, die auf dem Bildschirm gerendert wurden, wie hier

:current(p, ul);

…und das wählt alle gerade angezeigten Absätze und ungeordneten Listen aus. Es ist in diesem Sinne sehr ähnlich wie is(). Aber was diesen Pseudo-Selektor super cool macht, ist, dass er Teil dessen ist, was die CSS Selectors Level 4-Spezifikation als „zeitdimensionale“ Pseudo-Klassen bezeichnet, die dazu dienen, Elemente entlang einer Zeitachse auszuwählen, wie z. B. Untertitel in einem Video.

Meet WebVTT

Das ist das, was zum Rendern von Untertiteln in einem Video verwendet wird. Und das geschieht durch die Definition einer Zeitachse, die Untertitel mit Zeitbereichen koppelt, damit sie mit der gesprochenen Sprache übereinstimmen.

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 daneben und zeigt die Untertitel an, die innerhalb der Zeitbereiche definiert sind. Das bedeutet, es gibt eine Zeitdimension, in der wir vergangene, aktuelle und zukünftige Zustände für die Untertitel haben. Nachdem ein Untertitel abgespielt wurde, wird er Teil der Vergangenheit. Bevorstehende Untertitel? Ja, die sind in der Zukunft.

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

Aber was uns interessiert, sind die, die *gerade* abgespielt werden. Das ist es, was :current auswählt. Es ist hier erwähnenswert, dass WebVTT-Dateien ohne Zeitachse nicht von diesen zeitdimensionalen Pseudoelementen gestylt werden können.

`:current` wählt den gerade angezeigten Untertitel aus

Das ist richtig, so einfach ist das. Wir möchten vielleicht den Stil von Untertiteln, die gerade angezeigt werden, aufpeppen, damit sie sich von vergangenen und zukünftigen Untertiteln abheben.

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

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 die Absätze eines gerade angezeigten Untertitels stylen

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

Browser-Unterstützung

Dies ist im Moment alles sehr konzeptionell. Die Spezifikation selbst ist im Status eines Working Draft. Das bedeutet, :current wurde definiert, aber es gibt nur sehr geringe Unterstützung dafür und das, was wir jetzt haben, kann sich ändern, bis es zu einem Kandidaten für eine Empfehlung wird.