HTML5 Zone is brought to you in partnership with:

Vladimir is a DZone MVB and is not an employee of DZone and has posted 21 posts at DZone. You can read more from them at their website. View Full User Profile

Bulletproof CSS3 media queries

08.23.2011
| 8915 views |
  • submit to reddit
If you are part of the CSS community you probably know that CSS3 media queries will change the way how we write CSS.

Why is that?

CSS3 media queries are very handy to target various devices with various monitor (screen) size. With the help of the CSS3 media queries we can have site optimized for iPhone and other mobile devices, with the same solution we can have site optimized for iPad and all other tablets . This CSS solution will be much more cheaper than building new mobile web site something like http://m.somewebsite.com or http://ipad.somewebsite.com .

Can we start using the CSS3 media queries today?

Yes we can!

The main problem of the CSS3 media queries is they will not work in the older browsers .

CSS3 media queries will not work in IE8 (and lower) also browsers lower then Firefox 3.5, Safari 3, and Opera 7. Basically the main problem is IE and the older version of Firefox.

For the mobile web browsers this solution should work for the modern webkit and opera browsers that support CSS3 media queries.

I tried to resolve this problem by providing pure CSS solution for 95% of market share PC browsers and JavaScript solution for the rest of the browsers.

Here is the solution:

<!-- Big screen -->
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="screen and (min-device-width: 800px)" />

<!-- Tablet pc -->
<link rel="stylesheet" type="text/css" href="CSS/tablet.css" media="screen and (min-device-width: 481px) and (max-device-width: 799px)" />

<!-- Mobile -->
<link rel="stylesheet" type="text/css" href="CSS/mobile.css" media="only screen and (max-device-width: 480px)" />

<!-- If is lower than IE9 use conditional comments -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="all" />


And the JavaScript solution for Firefox:

<script type="text/javascript">

if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){

var ffversion=new Number(RegExp.$1);

if (ffversion<=3.5){
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'CSSNEW/main.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}
}
</script>


We have one CSS for mobile browsers with max screen of 480px. For the older phones who doesn’t support CSS3 media queries we can alternately add media="handheld" CSS.

For the monitor size from 481px to 799px (iPad and other tablets) we will have other CSS.

In the case of the monitors from 800px and more we will have the main CSS.

All current IE browsers don’t support media queries but we can easily fix this by using IE Conditional Comments

For the older version Firefox we can use JavaScript

Probably very few people use Opera6 and Safari2 so I didn’t provide any solution. Alternately can be added JavaScript solution.

This CSS + JavaScript solution should work at 99% of all PC browsers and on newer Opera and Webkit mobile browsers.

Other important thing the browsers will probably download only one ( <link type="text/css" … /> ) stylesheet and ignore all the other CSS. In this way the browser will not load unnecessary CSS.

I’m not 100% sure that all the browsers will ignore the unnecessary CSS probably the browser speed experts like Steve Souders and Stoyan Stefanov may know little more about this.

Demo of this solution

Download the code

Conclusion: CSS3 Media Queries are cheap and easy way to optimize your web site for various devices. With this solution you can safely cover 99% of PC browsers and the modern mobile browsers (iPhone, iPad, Android, new webkit BlackBerry and the new Opera Browsers).

Other useful resources:
If you have any ideas how we can improve this solution please comment!
References
Published at DZone with permission of Vladimir Carrer, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Nabeel Manara replied on Fri, 2012/01/27 - 12:44pm

I would strongly advocate using media queries within the same CSS file rather than splitting them up into 2 different ones. It does the same thing with the benefit of not doing 3 separate page requests.

I still do not get why you need JS for old versions of Firefox. It would make sense if you are detecting the viewport widths and serving a different CSS file based on that, but that does not seem to be the case.  

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.