Time-dimensional擬似クラスについて調べてみた

CSS Property Advent Calendar 2013 9日目の記事です。

今日は少し先を見据えて、Selectors Level 4の中から、明日のAdvent Calendar担当でもあるmyakuraさんが書いた文書、CSS4セレクタ (Selectors Level 4) の新機能内で触れられていない「:current, :past, :future」の各擬似クラスについて、Working Draftの最新版である2013年5月2日版を元に紹介します。

CSS Property Advent Calendarなのにセレクタの話になってしまいましたが、すでに2人ほどセレクタの話をしているようなので、気にしないで3人目になろうと思います。

Time-dimensional擬似クラスについて

文書が音声で読まれているときや、WebVTTというWeb上の動画に付けられる字幕に使われるようです。Time-dimensional Pseudo-classes - Selectors Level 4

:current

文書内で現在読まれているものを示した擬似クラスです。 :matchsと同じように単体セレクタの連なり(compound selectors)を引数に指定できます。以下のように指定した場合、文書内で現在読まれているものの中に引数に指定したセレクタのどれかが含まれていれば、強調して表示されるようです。

:current(p, li, dt, dd) {
    background: yellow;
}

:past, :future

:past, :futureについては、現在の再生位置を元に過去や未来を示す擬似クラスで、WebVTTでも定義されているようですが、それ以上は分からないです。

:current, :past, :futureが示す部分

文章で書いていても分かりづらいと思うので、現在の自分の認識を画像にしてみました。

track 要素の基礎 - HTML5 Rocks内の動画より画像を作成

上記の画像で、"always"の部分が発音されていた場合、"The Web is"は:past, "always"は:current, "changing"は:futureになるのかなと思います。

使い道を妄想してみる

まず:currentについてですが、これは字幕のどこが読まれているか視覚的にも分かりやすくなるという点ではいいと思います。また、:futureについては、文字色を背景と同化させるようにしてまだ読まれていないということを視覚的に分かるようにするという使い方があると思います。

:pastは、:currentより過去を示す擬似クラスということで、カラオケの字幕のように使えるのではと思います。

以上で紹介は終わりです。曖昧なところがあるので、ここはこうだ!というところがありましたら、指摘していただけるとありがたいです。というわけで、明日の担当はmyakuraさんです。

参照したページ