【CSS Modules】:future疑似クラスの使い方
:future疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:future擬似クラスは、時間軸を持つメディア要素（例: <audio>や<video>)において、現在の再生時点よりも未来に位置する部分を選択するための擬似クラスです。この擬似クラスは、主にウェブビデオやオーディオのテキストトラック（Web VTT形式の字幕やチャプターなど）に対して、まだ再生されていないセグメントにスタイルを適用することを目的として設計されました。
例えば、ユーザーが動画を視聴している際、:future擬似クラスを適用することで、まだ表示されていない字幕や次に再生されるチャプターのタイトルに、特定の文字色や背景色を割り当てることができます。これにより、メディアの進行状況に応じてコンテンツの見え方を動的に変化させ、視聴者により分かりやすい情報提供が可能になると想定されていました。
しかし、この:future擬似クラスは、W3C（World Wide Web Consortium）のCSS仕様策定プロセスにおいて、標準仕様から削除されました。そのため、現在の主要なウェブブラウザではこの擬似クラスはサポートされておらず、実際に使用してもスタイルが適用されることはありません。メディア要素の再生状況に応じたスタイリングを実現するには、JavaScriptを用いて再生イベントを検知し、要素のクラスを動的に変更するなどの代替手段を検討する必要があります。
公式リファレンス: :future
構文(syntax)
1::cue:future { 2 font-style: italic; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません