::cue

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

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

Правила, селекторы которых включают этот элемент, могут использовать только следующие свойства 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

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

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

Текст подсказки может включать внутренние узловые объекты, как теги (похожие на 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 настраивает текст внутри тега <u> с помощью цвета и text-decoration:

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

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