Different style sheet for different browser width

In order to have one stylesheet for browsers smaller than 1000px wide and one for browsers wider than that, I am using this code:

<link rel="stylesheet" type="text/css" href="http://badoh.com/wp-content/themes/refresh/style.css" title="default"/>
<link rel="alternate stylesheet" type="text/css" href="http://badoh.com/wp-content/themes/refresh/small.css" title="thin"/>
<link rel="alternate stylesheet" type="text/css" href="http://badoh.com/wp-content/themes/refresh/big.css" title="wide"/>

<script src="http://badoh.com/wp-content/themes/refresh/dynamiclayout.js" type="text/javascript"></script>

Code (markup):

It seems to work fine in Firefox, but the additional browser-dependent stylesheets are not loading in Safari, IE7 or Chrome. Is this a javascript thing?

What's the best way to have browser width dependent stylesheets in all browsers?

badoh.com

 

Its hard to employee this type of techniques for all the browsers. You can set the browser width as a percentage.

 

completely separate stylesheets for this sort of thing are usually a disaster, and ends up being a lot more code than is usually desirable.

My approach to this usually involves using a single stylesheet, and setting a class on my outermost containing DIV. All my javascript has to do is swap that one class to re-arrange the whole layout. In the stylesheet I just prefix the 'narrow' differences with .narrow and the 'wide' differences with .wide

See this site for example (one of my clients)
http://www.smallblogsnetwork.com/

Alternates between an 800px friendly (single column) and a 1024 friendly layout (two column) on the home page - the sub pages all make similar adjustments.

You look at the CSS for that:
http://www.smallblogsnetwork.com/themes/default/screen.css

You'll see the number of items that get .narrow and .average varients is pretty small. Keeping them all together next to each-other in the stylesheet also makes it easier (for me at least) to maintain.

The parts of the script to make that work are fairly small:

var switchyLastWidth=0;

function quickSwitchy() {
	change=document.getElementById('container');
	var curWidth=document.body.clientWidth;
	if (curWidth!=switchyLastWidth) {
		switchyLastWidth=curWidth;
		if (curWidth<992) {
			change.className="narrow";
		} else {
			change.className="average";
		}
	}
}

function initialize() {
	quickSwitchy();
	if (window.addEventListener){
		window.addEventListener('resize',quickSwitchy,false);
	} else if (window.attachEvent){
		window.attachEvent("onresize",quickSwitchy);
	} else {
		window.onresize=quickSwitchy;
	}
}

Code (markup):

I also do NOT wait for onload to run this script, instead manually calling the initialize function before </body> - this actually prevents the class swap from occuring after the browser attempts to render the page, preventing that whole 'jumping layout' problem common to these types of scripted changes. It also allows me to add my scripted fix for Opera not rendering background images on some elements. I start out with #container also set to class="narrow" in the markup, so if scripting is not present the page defaults to the lowest common denominator.

I use this technique on several clients sites with great results:

www.topgamez.net (has a 1024 and 1280+ mode, the owner specifically didn't want 800 support...)

www.publishorperish.com - has three states, .narrow, .average and .wide - .narrow isn't 'perfect', it's more of a 'close enough'.

and I have a big project - the rewrite of my largest and most successful site - that is going to be a full screen fluid that is going to make all sorts of radical layout changes to the pages - yet uses pretty much the same code.