::Cue - CSS Pseudo-Element for WebVTT Styling

Introduction to WebVTT and ::Cue

Web Video Text Tracks Format (WebVTT) is a standard for displaying timed text alongside video content. The ::cue pseudo-element serves as the bridge between CSS styling capabilities and WebVTT cue content, allowing developers to apply visual treatments to captions without modifying the underlying track data.

What is WebVTT?

WebVTT (Web Video Text Tracks Format) is a format for marking up external text track resources in connection with the HTML5 track element. The format supports various track kinds including captions, subtitles, descriptions, chapters, and metadata. Each track contains individual "cues" - time-aligned text segments that display during specific intervals of media playback.

WebVTT files use the .vtt extension and follow a simple text-based format with timestamped cue definitions. The format supports basic HTML-like tags for text formatting within cues, enabling bold, italic, underline, and ruby text annotations.

Proper caption implementation is essential for meeting accessibility standards. Our web development services team can help you implement comprehensive video accessibility across your digital platforms.

Why Style Captions?

Default caption styling varies across browsers and media players, often resulting in inconsistent user experiences. Custom styling through ::cue enables developers to ensure captions remain readable across different video content, maintain brand consistency, and optimize for various viewing conditions.

Accessible video content also supports your overall SEO strategy, as search engines increasingly favor content that serves all users effectively.

The W3C WebVTT Specification provides the official standard for this format and its associated CSS extensions.

Syntax and Selector Patterns

The ::cue pseudo-element accepts two selector forms, each serving different styling scenarios.

Basic ::cue Selector

The simplest form applies styles to all cues within a media element:

video::cue {
 color: white;
 background-color: rgba(0, 0, 0, 0.7);
 font-size: 1.2rem;
}

This selector targets every cue displayed in the associated video element, regardless of the specific cue content.

Functional ::cue() Selector

The functional notation allows targeting specific elements within cue text:

/* Style underlined text within cues */
video::cue(u) {
 color: #ffcc00;
 text-decoration: underline wavy #ffcc00;
}

/* Style italicized content */
video::cue(i) {
 font-style: italic;
 color: #ff9999;
}

The ::cue() selector matches internal node objects defined in WebVTT: <c> for classes, <i> for italics, <b> for bold, <u> for underline, <ruby> for ruby text, <rt> for annotations, <v> for voice, and <lang> for language. The MDN Web Docs ::cue documentation provides a comprehensive reference for all available selectors.

Related Styling Concepts

Understanding ::cue connects to broader CSS and web development practices. The CSS Flexible Box Layout guide covers modern layout techniques that complement caption positioning strategies. For more advanced CSS techniques, explore our guide on Houdini APIs which enable custom styling capabilities in the browser.

Permitted CSS Properties

The WebVTT specification deliberately limits which CSS properties can be applied to cues.

Text and Font Properties

• font-family - Typeface specification
• font-size - Text scaling
• font-stretch - Width adjustments
• font-style - Italic treatments
• font-variant - Typographic alternatives
• font-weight - Thickness control
• line-height - Vertical spacing

Color and Background Properties

• color - Text foreground
• background-color - Background fill
• background-image - Background images
• background-clip, background-origin - Positioning
• background-position, background-repeat - Layout
• background-size, background-attachment - Sizing

Background properties apply to each cue individually rather than the entire cue set.

Text Decoration and Layout

• text-decoration-* - Underline, overline, line-through effects
• text-shadow - Shadow effects
• white-space - Whitespace handling
• visibility - Content visibility
• outline-* - Border-like effects
• ruby-position, text-combine-upright - Internationalization support

For a complete reference on permitted properties, consult the MDN Web Docs ::cue selector guide.

Practical Styling Examples

White-on-Black Caption Style

video::cue {
 color: white;
 background-color: rgb(0 0 0 / 60%);
 font-family: system-ui, -apple-system, sans-serif;
 font-size: 1.1rem;
 line-height: 1.4;
}

High-Contrast Accessibility Styling

video::cue {
 color: #ffff00;
 background-color: rgba(0, 0, 0, 0.85);
 font-size: 1.25rem;
 font-weight: 500;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

Styling Internal Node Objects

00:00:01.500 --> 00:00:02.999 line:80%
<c.primary>Welcome</c> to our <i>special</i> presentation.

video::cue(c) {
 color: #4a90d9;
}

video::cue(i) {
 color: #ff6b6b;
}

Accessibility Best Practices

WCAG Compliance Considerations

Web Content Accessibility Guidelines (WCAG) 2.1 Level AA requires that captions be readable and distinguishable for users with disabilities:

• Contrast ratios: Maintain minimum 4.5:1 contrast between text and background
• Text sizing: Use at least 18px equivalent for caption text
• Color choices: Avoid color combinations that cause issues for color vision deficiencies
• Text shadows: Can improve contrast but should not create visual confusion

User Preference Considerations

Some users benefit from the ability to override default caption styling with their own preferences. Design caption systems that allow for customization when necessary for optimal accessibility.

Proper caption accessibility is a key component of our accessibility services, ensuring your video content reaches all users effectively. For organizations processing large volumes of video content, our AI automation services can streamline caption generation and management workflows.

Implementation Guidelines

HTML Track Setup

<video controls src="video.mp4">
 <track
 label="English Captions"
 kind="captions"
 srclang="en"
 src="captions.vtt"
 default>
 Your browser does not support the video element.
</video>

VTT File Structure

WEBVTT

00:00:01.000 --> 00:00:04.000 line:90%
Welcome to our tutorial on CSS styling.

00:00:04.500 --> 00:00:08.000
Today we'll explore the ::cue pseudo-element.

00:00:08.500 --> 00:00:12.000
<c.classname>Styled text</c> within captions.

Cue settings (like line:90%) position captions vertically, while internal tags enable targeted styling through ::cue(selector) selectors.

The MDN WebVTT API documentation provides comprehensive guidance on implementing and managing video captions in web applications.

Conclusion

The ::cue CSS pseudo-element provides essential capabilities for styling WebVTT captions in HTML5 video content. With broad browser support and a carefully designed property allowlist, ::cue enables developers to create readable, accessible, and visually consistent captions.

Key takeaways:

• Use ::cue for global caption styling and ::cue(selector) for targeted formatting
• Apply permitted properties including fonts, colors, backgrounds, and text decorations
• Prioritize accessibility through proper contrast, sizing, and readability
• Test across target browsers and devices for consistent rendering

The ::cue pseudo-element provides the tools to achieve professional caption styling in a standards-compliant manner.

Sources

1. MDN Web Docs - CSS ::cue Selector
2. MDN Web Docs - WebVTT API
3. W3C WebVTT Specification