• Skip To Content
• News
• Site Map

CSS Media Targeted JavaScript

Wednesday, February 28, 2007 by Nicholas Gagne

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:

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

First, we will use the following CSS code to distinguish which media type is being requested. For the sake of completeness I have included all media types as of CSS2.1. The CSS will set the z-index of our "mediaInspector" div to a certain number, our "variable":

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

Next, we will use JavaScript to determine the z-index of our "mediaInspector" div, getting our "variable" in a sense. Although using element.style.zIndex might seem like the correct approach, it won't be what you expect at all. Using the style property will only return a css style property set using inline CSS or one that is set by JavaScript itself. So, we will use JavaScript's computedStyle method to receive the actual z-index. Of course, Internet Explorer has its own way of doing this, currentStyle, and is late to catch on to standards. So, we will check for and use whichever method is supported by the browser.

After receiving the z-index value of our "mediaInspector", we will examine that value using a switch statement, and deliver the appropriate JavaScript based on the user's media device. I have included comments and alert statements for learning and testing purposes only, I would not recommend throwing an alert statement at anyone:

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

I've set up an example page of CSS Media Targeted JavaScript in action, and take a look at how I've laid out the code.

And there you have it, CSS Media Targeted JavaScript. I do plan to follow this article up with some real-world examples, but in the meantime I'm sure you'll find your own use for it. Enjoy!

Note: I realize that certain media types such as "print" might not make sense to have JavaScript or even support it, but I've put it in there for completeness. Besides, you never know where browsers will be in a few years.

• Digg this article
• Add to Del.icio.us
• Read more articles
• Subscribe to RSS Articles Feed