检测 ::cue 伪元素，或在浏览器不支持 ::cue 时执行某些操作答案

【问题标题】：detecting ::cue pseudo element, or doing something when ::cue is not supported in browser检测 ::cue 伪元素，或在浏览器不支持 ::cue 时执行某些操作
【发布时间】：2017-04-25 07:55:29
【问题描述】：

 <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 伪元素？

【问题讨论】：

标签： javascript sass cross-browser pseudo-element webvtt

【解决方案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

【讨论】：