<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>

http://www.ibloomstudios.com/articles/css_media_targeted_javascript/

With the ever increasing use of alternate media types I feel there is a need to deliver JavaScript targeted to these types of devices. This would allow alternate and modified content, as well as a customized user experience through the use of modern AJAX techniques.

My goal with this technique is to use CSS to be instructed as to what type of media device is being used, and deliver that information onto the JavaScript which could then in turn run CSS media targeted code. To accomplish this, we will use a div set to display:none with an id of "mediaInspector", to hold a "variable" passed from CSS to JavaScript:

CSS Media Targeted JavaScript

css, js

CSS