:past

:past 是一个 CSS 伪选择器，它匹配已在时间线上经过的元素。您将在很大程度上看到它在使用 WebVTT 创建的视频字幕中发挥作用。当字幕不再是当前显示的文本时，它在时间线方面就成为过去的一部分，而 :past 允许我们匹配并相应地对其进行样式设置。

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

这是 CSS 选择器级别 4 规范称为 “时间维度”伪类 的一部分，目前处于工作草案状态。这意味着规范正在进行中，在它成为候选推荐之前可能会发生变化。

WebVTT 速成课程

WebVTT 是一种用于创建字幕的格式，它将字幕绘制在时间线上，并使用定义每个字幕何时显示的时间范围。这使我们能够将字幕与媒体播放（例如视频）中的语音对齐。

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!

随着视频的播放，WebVTT 也会随之运行，显示时间范围内定义的字幕。这意味着存在一个时间维度，其中字幕具有过去、当前和未来状态。字幕播放结束后，它就会成为过去的一部分。这就是这一切与 CSS 中的 :past 伪元素相关联的方式。

Khari McMillian 发布了一篇关于 WebVTT 的 非常全面的文章，其中包括如何以最佳的可访问性对其进行格式化。

示例

在 HTML 中给出某种 <video>

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

…以及定义时间线上的字幕的 WebVTT 文件

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.

…我们可以对先于当前显示的字幕进行样式设置

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

浏览器支持

目前，这一切都非常概念化。规范本身处于工作草案状态。这意味着 :past 已经定义，但它几乎没有支持，并且在我们当前所拥有的东西在成为推荐候选者之前可能会发生变化。

IE	Edge	Firefox	Chrome	Safari	Opera
否	否	否	否	16.1+	否

Android Chrome	Android Firefox	Android 浏览器	iOS Safari	Opera Mobile
否	否	否	7	否

更多信息

• CSS 选择器级别 4 规范 (工作草案)
• Web 视频文本轨道格式 (MDN)
• 使用 WebVTT 改善视频可访问性

相关属性