CSS CSS Media Targeted JavaScript

Posted 2021-05-23

<div id="mediaInspector"></div>

<style type="text/css">
  #mediaInspector {
    display:none
  }
  @media aural {
    #mediaInspector { z-index: 1 }
  }
  @media braille {
    #mediaInspector { z-index: 2 }
  }
  @media embossed {
    #mediaInspector { z-index: 3 }
  }
  @media handheld {
    #mediaInspector { z-index: 4 }
  }
  @media print {
    #mediaInspector { z-index: 5 }
  }
  @media projection {
    #mediaInspector { z-index: 6 }
  }
  @media screen {
    #mediaInspector { z-index: 7 }
  }
  @media tty {
    #mediaInspector { z-index: 8 }
  }
  @media tv {
    #mediaInspector { z-index: 9 }
  }
</style>

<script type="text/javascript">
  var mediaInspector = document.getElementById('mediaInspector');
  if (mediaInspector.currentStyle) {
    zIndex = mediaInspector.currentStyle['zIndex'];
  } else if (window.getComputedStyle) {
    zIndex = window.getComputedStyle(mediaInspector, '').getPropertyValue("z-index");
  }
  switch (parseInt(zIndex)) {
    case 1:
      // @media aural code
	  alert('@media aural code');
      break;
    case 2:
      // @media braille code
	  alert('@media braille code');
      break; 
    case 3:
      // @media embossed code
	  alert('@media embossed code');
      break;
    case 4:
      // @media handheld code
	  alert('@media handheld code');
      break;
    case 5:
      // @media print code
	  alert('@media print code');
      break;
    case 6:
      // @media projection code
	  alert('@media projection code');
      break;
    case 7:
      // @media screen code
	  alert('@media screen code');
      break;
    case 8:
      // @media tty code
	  alert('@media tty code');
      break;
    case 9:
      // @media tv code
	  alert('@media tv code');
      break;
  }
</script>