Обнаружение псевдоэлемента::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 {видимость: скрыто;}

В Chrome, Opera и Safari этот CSS скрывает подписи, которые показывает браузер, а затем я программно показываю подписи, которые затем я могу стилизовать подписи именно так, как я хочу.

Firefox и IE в настоящее время не поддерживают псевдоэлемент:: cue, поэтому мне нужно иметь возможность скрыть подписи, которые Im программно показывает для этих браузеров.

Моей первой идеей было бы выполнить некоторый код (скрыть подписи), если браузер не поддерживает псевдоэлемент:: cue, чего я не смог выполнить ни в javascript, ни в sass.

Как определить, когда браузер не поддерживает псевдоэлемент:: cue?

Answer 1

Вы можете создать <style> элемент где video::cue псевдоэлемент установлен, создайте <video> элемент, добавить оба style а также video элементы к documentиспользовать window.getComputedStyle() получить собственность video::cue псевдоэлемент. Если Resolved valueсвойства является пустой строкой,::cueпсевдоэлемент не поддерживается в браузере.

Ресурсы

• Реализуйте псевдоэлемент:: cue(firefox)

• Совместимость CSS в Internet Explorer(т.е.)

• Support:: cue псевдоэлемент для стилизации сигналов WebVTT (например, субтитров)(webkit)

• 10.3.2.3.1 Псевдоэлемент '::cue'

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")
}

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