Добавляет доки про псевдоклассы :past, :current & :future

css/current/index.md

@@ -0,0 +1,110 @@
+---
+title: "`:current`"
+description: "Выбирает элемент, который сейчас активен или отображается в последовательности, например текущие субтитры или результат поиска."
+authors:
+  - drakesbot12
+keywords:
+  - current
+  - псевдокласс
+  - WebVTT
+  - субтитры
+  - поиск по странице
+related:
+  - css/current
+  - css/past
+  - html/video
+tags:
+  - doka
+---
+
+## Кратко
+
+Псевдокласс `:current` выбирает элемент, который **сейчас находится в активном состоянии отображения или выделения**.
+
+Он используется в так называемых **time-dimensional selectors*- и других сценариях, где есть “текущий элемент” в последовательности.
+
+Чаще всего встречается в контекстах:
+- WebVTT субтитров
+- поиска по странице (Find in Page)
+- выделенных элементов в последовательностях
+
+## Пример
+
+### Стили для текущих субтитров
+
+```css
+:current(p, span) {
+  background-color: #ffe600;
+}
+```
+
+```html
+<video controls>
+  <source src="video.mp4" type="video/mp4" />
+  <track
+    label="English"
+    kind="subtitles"
+    srclang="en"
+    src="subtitles.vtt"
+    default>
+</video>
+```
+
+### Стили для поиска по странице
+
+```css
+p::search-text {
+  background-color: purple;
+  color: white;
+}
+
+p::search-text:current {
+  background-color: crimson;
+  text-decoration: underline;
+}
+```
+
+## Как пишется
+
+Псевдокласс `:current` используется как обычный селектор:
+
+```css
+:current {
+  /* стили для текущего элемента */
+}
+```
+
+Также может принимать уточнение через селектор:
+
+```css
+:current(<selector-list>) {
+  /* стили для текущего элемента */
+}
+```
+
+---
+
+## Как понять
+
+`:current` обозначает элемент, который **в данный момент активен в своей последовательности**.
+
+Это может означать:
+- текущий отображаемый фрагмент субтитров
+- активный результат поиска в браузере
+- выделенный элемент в последовательности контента
+
+Он часто используется вместе с:
+- [`:past`](/css/past/)
+- [`:future`](/css/future/)
+
+<aside>
+
+⚠️ На данный момент свойство является экспериментальным свойством. не поддерживается ни одним браузером.
+
+</aside>
+
+## Подсказки
+
+💡 `:current` особенно полезен для стилизации временных медиа (субтитров), где есть активный момент воспроизведения.
+💡 Может применяться не только к видео, но и к поисковым результатам через `::search-text`.
+💡 Почти всегда используется в паре с [`:past`](/css/past/) и [`:future`](/css/future/) для создания полного временного UX.

css/future/index.md

@@ -0,0 +1,94 @@
+---
+title: "`:future`"
+description: "Выбирает элементы, которые находятся в будущем относительно текущего состояния, например в субтитрах или временных треках."
+baseline:
+  - group: time-relative-selectors
+    features:
+      - css.selectors.future
+authors:
+  - drakesbot12
+keywords:
+  - future
+  - псевдокласс
+  - WebVTT
+  - субтитры
+  - видео
+related:
+  - css/current
+  - css/past
+  - html/video
+tags:
+  - doka
+---
+
+## Кратко
+
+Псевдокласс `:future` выбирает элементы, которые находятся **после текущего активного состояния** в временной последовательности.
+
+Он относится к так называемым **time-dimensional selectors** — селекторам, работающим с временными потоками (например, субтитрами или медиа).
+
+Чаще всего используется в контексте:
+- [`<video>`](/html/video/)
+- WebVTT субтитров
+- временных треков
+
+## Пример
+
+В этом примере скрываются ещё не показанные субтитры:
+
+```css
+:future {
+  opacity: 0.3;
+}
+```
+
+```html
+<video controls>
+  <source src="video.mp4" type="video/mp4" />
+  <track
+    label="English"
+    kind="subtitles"
+    srclang="en"
+    src="subtitles.vtt"
+    default>
+</video>
+```
+
+## Как пишется
+
+Псевдокласс `:future` используется как обычный CSS-селектор:
+
+```css
+:future {
+  /* стили для элементов в будущем */
+}
+```
+
+Также может комбинироваться с другими селекторами:
+
+```css
+video::cue(:future) {
+  opacity: 0.2;
+}
+```
+
+## Как понять
+
+Временные медиапотоки (например, субтитры) делятся на три состояния:
+
+- [`:past`](/css/past/) — уже было показано
+- [`:current`](/css/current/) — показывается сейчас
+- `:future` — ещё не достигнуто
+
+`:future` позволяет стилизовать элементы, которые **ещё не появились в текущем времени воспроизведения**.
+
+Это полезно для:
+- визуального “приглушения” будущих субтитров
+- создания эффекта прогресса текста
+- интерфейсов с временной навигацией
+
+## Подсказки
+
+💡 `:future` почти всегда используется вместе с [`:current`](/css/current/) и [`:past`](/css/past/), чтобы визуально разделять временные состояния.
+💡 Подходит для эффектов “кинематографичных” субтитров — когда текст постепенно появляется.
+💡 Работает только в ограниченных контекстах (в основном WebVTT и медиа-потоки), а не в обычной вёрстке HTML.

css/index.md

@@ -63,6 +63,9 @@ groups:
       - picture-in-picture
       - fullscreen
       - autofill
+      - past
+      - future
+      - current
   - name: 'Псевдоэлементы'
     items:
       - pseudoelements

css/past/index.md

@@ -0,0 +1,92 @@
+---
+title: "`:past`"
+description: "Выбирает элементы, которые находятся в прошлом относительно текущего состояния, например в субтитрах или временных треках."
+baseline:
+  - group: time-relative-selectors
+    features:
+      - css.selectors.past
+authors:
+  - drakesbot12
+keywords:
+  - past
+  - псевдокласс
+  - WebVTT
+  - субтитры
+  - видео
+related:
+  - css/current
+  - css/future
+  - html/video
+tags:
+  - doka
+---
+
+## Кратко
+
+Псевдокласс `:past` выбирает элементы, которые находятся **до текущего активного состояния** в временной последовательности.
+
+Он используется в так называемых **time-dimensional selectors** — селекторах, которые работают с временем (например, в субтитрах или медиа).
+
+Чаще всего встречается в контексте:
+- [`<video>`](/html/video/)
+- WebVTT субтитров
+- временных треков
+
+## Пример
+
+В этом примере скрываются уже “проигранные” субтитры:
+
+```css
+:past(p, span) {
+  display: none;
+}
+```
+
+```html
+<video controls>
+  <track
+    label="English"
+    kind="subtitles"
+    srclang="en"
+    src="subtitles.vtt"
+    default>
+</video>
+```
+
+## Как пишется
+
+Псевдокласс `:past` используется как обычный селектор:
+
+```css
+:past {
+  /* стили для элементов в прошлом */
+}
+```
+
+Также может комбинироваться с другими селекторами:
+
+```css
+video::cue(:past) {
+  opacity: 0.5;
+}
+```
+
+## Как понять
+
+Временные медиапотоки (например, субтитры) делятся на состояния:
+- [`:future`](/css/future/) — ещё не показано
+- [`:current`](/css/current/) — показывается сейчас
+- `:past` — уже было показано
+
+`:past` позволяет стилизовать элементы, которые **уже прошли в потоке воспроизведения**.
+
+Это полезно для:
+- затемнения уже прочитанных субтитров
+- визуализации прогресса текста
+- создания эффектов “истории воспроизведения”
+
+## Подсказки
+
+💡 Чаще всего `:past` используется вместе с [`:current`](/css/current/) и [`:future`](/css/future/), чтобы создать визуальную шкалу времени.
+💡 Работает только в специфических контекстах (например, WebVTT), а не для обычных HTML-элементов.
+💡 Поддержка ограничена — многие браузеры не реализуют time-dimensional pseudo-classes полностью.