Псевдоэлемент CSS `::cue`

::cue CSS псевдоэлемент выбирает реплики WebVTT внутри выбранного элемента. Это можно использовать, чтобы оформлять субтитры и другие реплики в медиаданных с дорожками VTT.

Попробуйте

video {
  width: 100%;
}

video::cue {
  font-size: 1rem;
  color: yellow;
}

::cue(u) {
  color: red;
}

<video controls src="/shared-assets/videos/friday.mp4">
  <track
    default
    kind="captions"
    srclang="en"
    src="/shared-assets/misc/friday.vtt" />
  Sorry, your browser doesn't support embedded videos.
</video>

Свойства применяются ко всему набору реплик так, как если бы он был единым целым. Единственное исключение — background и его сокращённые свойства применяются к каждой реплике отдельно, чтобы избежать создания блоков и неожиданного перекрытия слишком больших областей медиаданных.

В примере выше селектор ::cue(u) выбирает все элементы <u> внутри текста реплики.

Синтаксис

::cue | ::cue(<selector>) {
  /* ... */
}

Разрешённые свойства

Правила, селекторы которых включают этот элемент, могут использовать только следующие свойства CSS:

• background
• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• color
• font
• font-family
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• line-height
• opacity
• outline
• outline-color
• outline-style
• outline-width
• ruby-position
• text-combine-upright
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness
• text-shadow
• visibility
• white-space

Примеры

Оформление реплик WebVTT белым текстом на чёрном фоне

Следующий CSS задаёт стиль реплики так, чтобы текст был белым, а фон — полупрозрачным чёрным блоком.

::cue {
  color: white;
  background-color: rgb(0 0 0 / 60%);
}

Оформление внутренних узлов WebVTT

Текст реплики может содержать внутренние узлы в виде тегов (аналогичных элементам HTML) <c>, <i>, <b>, <u>, <ruby>, <rt>, <v> и <lang>. Селектор ::cue() можно использовать для применения стилей к содержимому внутри этих тегов, чтобы настроить отображение дорожки WebVTT. Рассмотрим следующий текст реплики, в котором тег <u> используется для подчёркивания текста:

00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the <u>lord of the universe</u> in?

Следующее правило CSS задаёт цвет и text-decoration текста внутри тега <u>:

::cue(u) {
  color: red;
  text-decoration: wavy overline lime;
}

Спецификации

Совместимость с браузерами

См. также

• Формат видеодорожек Web (WebVTT)
• <track>, <video>