{Carrer web log} ←

Blog about web design & development

Bulletproof CSS3 media queries

Tuesday, July 20, 2010 { 14 Comments }

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:


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


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


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


<!--[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:

Responsive Web Design

CSS3 Media Queries

CSS Media Queries & Using Available Space

Media queries

Eric Meyer at An Event Apart [PIC]

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

W3C Media Queries

If you have any ideas how we can improve this solution please comment!

14 Responses to “Bulletproof CSS3 media queries”

// Anonymous // 7/20/2010

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.
// Save the Pengiuins // 7/20/2010

Too bad the iPhone 4 has a screen resolutoin of 960x640 :)
// Unknown // 7/20/2010

Here's a problem I run into regularly - What about all the other mobile browsers (not based on webkit/opera?) That's still a huge percentage of browsers (I'm looking at you BlackBerry...)
// Jasper van der Kamp // 7/20/2010

@Gabe: I use media queries the other way around. In my stylesheet i begin with the mobile styles. For larger screens I then use a media querie and put all the floats etc. in it. This way other mobile browsers (Nokia, Blackberry etc.) are also included.
For IE<9 I use a conditional comment with the large screen styles from the main stylesheet.
// Vladimir // 7/20/2010

@Divya : My hope was that the browser will make only one http requests and for the other 2 CSS queries will return false. But like I sad I'm not sure about this. I optimized for Firefox because there are still many users that use Firefox 3.5 or lower http://www.w3schools.com/browsers/browsers_firefox.asp.

@Save the Pengiuins: You can add something like this for the new iPhone: <link rel="stylesheet" type="text/css" href="/css/mobile.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

@Gabe: For the mobile browser who doesn't support CSS3 media queries we can add media="handheld" if for some reason this solution doesn't work the user will be able to see pure HTML.
// Unknown // 7/20/2010

@Jasper - that's a good idea, thanks for the tip!
// Roman // 7/21/2010

Currently there is only the one way to make mobile sites, make separate sites, the rest solutions are the playing.
// Rimantas // 7/22/2010

@Roman: it's not about making "mobile sites" it's about making websites to look good on different resolutions.
Current WebKit powered mobile browsers are quite capable, so making separate sites is just a waste of time. Spending some time to improve how your site look on mobile device on the other hand will benefit users.
// Beben Koben // 7/25/2010

good good ^^
// Anonymous // 10/09/2010

Are we laboring under the impression that users on mobile devices *want to do the same things* as their sedentary friends?

The main purpose of providing a dedicated mobile site is not to fiddle about with screen sizes *on* a mobile, but to create an interface, experience and, most importantly a set of functionality that is suited for humans who *are* mobile.
// offbeatmammal // 3/22/2011

James has a point.... a lot of the time on a mobile client you might not want to download an lot of extra content.
Just hiding it via CSS makes the UI look good, but better to not waste the bandwidth in the first place.
Sadly there's no good way to do that that's foolproof so I think a combination of techniques will be haunting us for a while yet
// Anonymous // 8/10/2011

Thanks for the code but there is something I do not understand exactly what does the js code for Firefox does? What is the test.? Why isn't the screen resolution listed in the script.
// Anonymous // 9/30/2011

i found this page in google because i couldn't achieve media queries working in my browser, but your demo doesn't work either. I use the latest chrome 14.
// Vladimir // 9/30/2011

@Anonymous: This solution is not responsive web design, if you resize the browser it won't work. It will work only if are using deferent device like iPhone, iPad .. The goal is to force the browser to download only the CSS that is used for that device not all the CSS. That is the main difference with the responsive CSS solution.