::cue

::cue — псевдоэлемент для стилизации реплик WebVTT (субтитров, описаний и прочих подсказок) внутри элемента <video>, если подключена дорожка <track kind="subtitles">. Можно менять цвет текста, фон плашки, шрифты и оформление.

        
          
          <video controls>  <source src="video.mp4" type="video/mp4" />  <track src="captions.vtt" kind="subtitles" srclang="ru" label="Русский" default />  Ваш браузер не поддерживает видео.</video>
          <video controls>
  <source src="video.mp4" type="video/mp4" />
  <track src="captions.vtt" kind="subtitles" srclang="ru" label="Русский" default />
  Ваш браузер не поддерживает видео.
</video>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          video {  width: 100%;}video::cue {  font-size: 1rem;  color: yellow;}::cue(u) {  color: red;}
          video {
  width: 100%;
}

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

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


        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Синтаксис:

• Форма ::cue применяет стили ко всем репликам.

        
          
          ::cue {  /* стили для всех реплик */}
          ::cue {
  /* стили для всех реплик */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

• Форма ::cue(<селектор>) позволяет выбрать внутренние узлы текста реплик (например, u, b, i, ruby, rt, lang) и стилизовать только их.

        
          
          ::cue(<селектор>) {  /* стили для внутреннего содержимого реплик */}
          ::cue(<селектор>) {
  /* стили для внутреннего содержимого реплик */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

• Стили из правила с ::cue применяются к набору реплик в целом, как к единому блоку. Исключение — свойства фона: background и его лонгхэнды применяются к каждой реплике отдельно, чтобы фон не перекрывал излишне большую область видео.
• ::cue(<селектор>) работает только с внутренними узлами WebVTT-текста, а не с реальными HTML-элементами страницы.

Внутри правил с ::cue разрешён ограниченный набор свойств:

• background, background-*
• color
• шрифтовые свойства: font, font-*
• outline, outline-*
• ruby-position
• text-combine-upright
• text-decoration, text-decoration-*
• text-shadow
• visibility
• white-space

💡 Для читабельности субтитров соблюдайте контраст: светлый текст на тёмной полупрозрачной плашке или наоборот.
💡 Не переусердствуйте с декоративностью: сложные шрифты и насыщенные эффекты ухудшают восприятие.
💡 Поддержка ::cue(<селектор>) может отличаться: в некоторых браузерах она недоступна. Всегда проверяйте в целевых браузерах.
💡 Помните о локалях и длине строк: используйте white-space, line-height и шрифты с нужной поддержкой алфавитов.