检测 ::cue 伪元素，或在浏览器不支持 ::cue 时做一些事情

Question

 <video id="videodisplay-0" class="js-play" crossorigin="anonymous">
    <source src="things.mp4" type="video/mp4">
    <track label="English" kind="captions" srclang="en" default="" src="test.vtt">
 </video>

以上是我页面中带有字幕轨道的 HTML5 视频片段。

我有这个CSS

::cue { visibility: hidden;}

在 Chrome、Opera 和 Safari 中，此 CSS 隐藏了浏览器显示的默认字幕，之后字幕以编程方式显示。

Firefox 和 IE 目前不支持 ::cue 伪元素，因此我需要能够隐藏以编程方式为这些浏览器显示的标题。

如果浏览器不支持 ::cue 伪元素，我的第一个想法是执行一些代码（隐藏标题），我在 JavaScript 或SASS。

如何检测浏览器何时不支持 ::cue 伪元素？

Answer 1

您可以创建一个 <style> 元素，其中设置了 video::cue 伪元素，创建一个 <video> 元素，将 style 和 video 元素附加到document，用window.getComputedStyle()得到video::cue伪元素的属性。如果属性的 Resolved value 为空字符串，则浏览器不支持 ::cue 伪元素。

资源

Implement the ::cue pseudo-element (火狐)
CSS Compatibility in Internet Explorer（即）
Support ::cue pseudo-element for styling WebVTT cues (eg subtitles) (webkit)
10.3.2.3.1 The '::cue' pseudo-element

function cueSupported() {
  var video = document.createElement("video");
  var style = document.createElement("style");
  style.textContent = "video::cue {background: inherit}";
  document.body.appendChild(style);
  document.body.appendChild(video);
  var cue = window.getComputedStyle(video, "::cue").background;
  document.body.removeChild(style);
  document.body.removeChild(video);
  delete style; 
  delete video;
  return !!(cue.length);
}

if (cueSupported()) {
  console.log("::cue pseudo element supported")
} else {
  console.log("::cue pseudo element not supported")
}

plnkrhttp://plnkr.co/edit/UzD41KjUARGEoncRxD5x?p=preview

检测 ::cue 伪元素，或在浏览器不支持 ::cue 时做一些事情

detecting ::cue pseudo element, or doing something when ::cue is not supported in browser

javascript

sass

cross-browser

pseudo-element

webvtt