Question

I was looking to add CSS media query workaround for ie8 in my code..

I came across css3-mediaqueries.js

http://code.google.com/p/css3-mediaqueries-js/

But could not find details or example of how to implement it in my site.

Could you please provide any example for the same.

Answer 1

On the site it says “Usage: just include the script in your pages.” and has a few more rules on how its used. It appears to only work for media queries that are inside the style sheet and not media query attributes and won’t work with @imported CSS files.

UPDATE

Based on our conversation, the goal is to serve up one stylesheet for the desktop and another for tablets. The natural solution is to do the following:

<link media="screen and (max-width: x)" href="tablet.css">
<link media="screen and (min-width: x)" href="desktop.css">

The problem is that IE6, 7, and 8 will apply both stylesheets. Fortunately, we know for a fact that IE6, 7, and 8 will never be on tablets (or at least not tablets in the modern sense), so we can use Internet Explorer Conditional Comments to prevent these versions of IE from seeing the tablet CSS. Here is an example using downlevel-revealed conditional comments:

<![if gte IE 9]>
    <!-- This code is visible to IE9 and above and all non-IE browsers. -->
    <link media="screen and (max-width: x)" href="tablet.css">
<![endif]>
<link media="screen and (min-width: x)" href="desktop.css">

For any non-IE browser, <![if gte IE 9]> is a nonsense tag which is ignored. For IE browsers, they do a logical check: if(version >= 9) use content. IE 6, 7, and 8 will therefor ignore the tablet css and only see <link href="desktop.css">. You could alternatively use the more verbose:

<![if gte IE 9]>
    <!-- This code is visible to IE9 and above and all non-IE browsers. -->
    <link media="screen and (max-width: x)" href="tablet.css">
    <link media="screen and (min-width: x)" href="desktop.css">
<![endif]>
<!--[if lt IE 9]>
    <!-- This code is only visible to IE8 and below. -->
    <link href="desktop.css">
<![endif]-->