JavaScripts missing attribute, media

Over the last few weeks I’ve been writing a jQuery plugin called jMedia when I got a free moment, for allowing the media attribute on script elements and also using the @import rule. As you may already know this rule currently exists for the Css style tag, so I wanted to see how it could work for JavaScript and controlling what scripts are loaded.

You may be thinking ” whats the point? ” and you might be right. I’m not saying this is how is should work, more of a concept, how it would work, and its benefits.

How it works / Benefits

You would use this the same way you would for Css, but with the exception of two media types to choose from, screen, for desktop computers and handheld, for mobile devices. As you can see from the two media types allowed, I think this would be good for use when different scripts are need for desktop browsers and mobile browsers on tablets, mobile phones etc. So your markup might look something like this:

<script type="text/javascript" media="screen">
	/**
	@import url="js/desktop.js";
	*/
</script>

<script type="text/javascript" media="handheld">
        /**
	@import url="js/mobile.js";
	*/
</script>

As shown above, It has a slight difference than its use in Css. The @import rules have to be wrapped in /** */ comment tags, so it doesn’t get parsed as JavaScript code.

You can also comment out scripts that are not used (during testing etc) so in the following only the first script would be loaded in the following:

/**
@import url="http://localhost/jmedia/js/mobile.js";
//@import url="http://localhost/jmedia/js/script2.js";
*/

Usage

You would set up your markup something like this adding media=”screen” or media=”handheld” to the appropriate script tag and simply listing each script required on its own line:

<script type="text/javascript" media="screen">
	/**
	@import url="js/desktop.js";
        @import url="js/desktop2.js";
	*/
</script>

<script type="text/javascript" media="handheld">
        /**
	@import url="js/mobile.js";
	*/
</script>

And then to use the jMedia Plugin you would simple do any of the following:

<script type="text/javascript">
$(document).ready(function(){
	$.jMedia();
        //Can provide a custom user agent string for testing
        $.jMedia({"customUserAgent" : "Mozilla/5.0 (Linux; U; Android 1.0; en-us; generic) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2"});
});
</script>

I’ve created a basic example you can download here. Try it out and have a play around.

As this plugin is simple and basic it may not also not work on every mobile device (there is quite a lot of browsers and mobile devices out there!). The plugin has also not been tested in every browser, so it may not work in some of them, again, its only a concept, for now possibly.

Summary

This article shows a concept of how the media attribute would work if it would be used on script tags. It could be used the load scripts that are only needed for desktop browsers or mobile browsers. It may never be used and I can see why but I thought it would be an interesting concept to work on.

This entry was posted in Blog. Bookmark the permalink.

Comments are closed.