Time-relative pseudo-selectors
:future は CSS の擬似クラスセレクターで、 :current に一致する要素の後に完全に現れる要素と一致する、時間軸の擬似クラスです。例えば、 WebVTT によって表示されているキャプションに対応する動画などです。
css
:future(p, span) { display: none; }
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 23 | 79 | | 7 | 25 | 7 | |
| その他 | ||||||
| `:過去` | 23 | 79 | | 7 | 25 | 7 |
基本構文
CSS
::cue:past {
color: gray;
opacity: 0.5;
}
::cue:future {
color: white;
}ライブデモ
実務での使いどころ
-
カラオケ風字幕
再生済みの字幕テキストをグレーアウトし、現在位置を視覚的に明確にするカラオケ風表示を実現します。
注意点
- Firefox ではサポートされていないため、この機能に依存した重要なUIを構築しないでください。
アクセシビリティ
- 過去のキューの色やopacityを変更する際は、依然として読みやすいコントラスト比を維持してください。