::cue

::cueCSS擬似要素で、選択された要素内の WebVTT キューに一致します。これにより、 VTT トラック付きのメディアでキャプションや他のキューをスタイル付けすることができます。

::cue {
  color: yellow;
  font-weight: bold;
}

利用可能なプロパティ

セレクターに ::cue が付いた規則で使用することができるのは、以下に挙げる CSS プロパティに限定されています。

プロパティは、あたかも1つの部品であるかのように、一連のキュー全体に適用されます。 background とその個別指定だけは例外で、各キューに個別に適用されます。これは、ボックスが生成されて予期せずメディアの大きな領域を占めることを避けるためです。

構文

::cue | ::cue( <selector> )

次の CSS はキューのスタイルを設定し、テキストが白に、背景が半透明の黒い矩形になります。

::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}

仕様書

仕様書 状態 備考
WebVTT: The Web Video Text Tracks Format
::cue の定義
勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
::cueChrome 完全対応 26Edge 完全対応 79Firefox 完全対応 55
補足
完全対応 55
補足
補足 From Firefox 69, only allowed properties apply to the ::cue pseudo-element with no argument. See Permitted properties for a list of the allowed properties.
IE 未対応 なしOpera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 ≤37Chrome Android 完全対応 26Firefox Android 完全対応 55Opera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.5
::cue(<selector>)Chrome 完全対応 26Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 ≤37Chrome Android 完全対応 26Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.5

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報