Different Stylesheets for Differently Sized Browser Windows

Otherwise known as "resolution dependent layouts". Single website, different CSS files for rearranging a website to take advantage of the size available.

There is a W3C standard way of declaring them. One way is to test the "device-width", like this:

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

The above code will apply the 800.css styling to the document only if the device viewing it has a width of 800px or wider. And... supports "media queries" in this way.

Keep in mind this is the device width, not the current width of the browser window. On the iPhone (3G(s)), that means 480px. My fancy new MacBook Pro is going to return 1920px for the device width. But my actual browser window is only half of that at this exact moment. The device width is quite useful when dealing with mobile devices where the browser is probably 100% of the screen whenever in use, but less useful in laptop/desktop browsers.

Seems to me far more useful is the current width of the browser window ("viewport"). We can even specify stylesheets that are only to be used when the viewport is between two different pixel sizes:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

That stylesheet will only take affect when the current browser window is between 701 and 900 pixels in width.

Browser Support

IE 9+, Firefox 3.6+, Safari 3+, Any Chrome, Opera 10+. Mozilla suggests starting the media attribute of the <link /> with "only" which will hide the stylesheet from older browsers that don't support media queries. That may or may not be what you actually want to do... case dependent of course.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Generally, layout is one of those things that it's tough to sell "progressive enhancement" on. Rounded corners becoming squares, no big deal. Messed up layout, that is a big deal. Devices like the iPhone right now are kind of great, since browser choice is so limited (there used to be just Mobile Safari and that's it, now there is Opera as well) and they are very good browsers, you can rely on techniques like this to work.

If IE support is paramount, we always have JavaScript!

Doing it with jQuery

Using JavaScript, we can test the windows width and change the active CSS file accordingly. This will work across all browsers. You can have an ID for a <link /> element like any other, so let's add that:

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

Then we can use that as a hook and change the href value of the stylesheet. The browser will see that change and unapply the old CSS and reapply the newly linked CSS. We'll run our little adjustment test once right away, and then anytime the window is resized thereafter.

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

Is jQuery really necessary just for this?

No, but I'm sure you know that's just how I roll in general and it makes it easier. Kevin Hale wrote about dynamic resolution layouts literally five years ago. It's "raw" JavaScript and still works great today.

Also, there is a kick ass polyfill: Respond.js

Example One

This one has a special stylesheet for narrow (less than 700px), medium (701 - 900px), and wide (greater than 901px) browser windows.

View Demo

Example Two

This does the exact same thing as example one, only through jQuery/JavaScript instead of CSS media queries.

View Demo

Example Three

This example shows that we can target mobile devices by testing for a maximum device width.

View Demo

Download

Snag all of these for reference in one place.

Download Files

IE only stylesheet and hacks

As a web developer one of our biggest challenges is to make web design look the same or at least similar for all browsers. Most of the browsers renders almost identical but we have one mind bugging little nasty thing called Internet Explorer, we can’t ignore this browser as it is the standard browser in Windows so it has a lot of users and of course Microsoft made extra hard for us so that every version has its own life. There are a few ways to tackle this thing, most common once are with conditional tags or CSS hacks.

What is and how to use conditional stylesheets

Reason is graphical issues and they need to be fixed. It also verifies in html and is accepted by Microsoft. It’s also possible to less-than/greater-than targeting multiple versions at once.

Syntax

Needs to go in your with all the other CSS linked files. Syntax should be familiar, just regular HTML comments. Opening >!–[if IE]< and closing >![endif]–<. “!” stand for not, so !IE means not IE. “gt” means “greater then”, “gte” means “greater then or equal”, so >!–[if gte IE 8]< means IE8 or higher. Then we have “lt” means “lower than” and “lte” means “lower than equal.

Examples

<head> <!-- TARGET ALL IE --> <!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie.css" /> <![endif]-->   <!-- TARGET ALL NON IE BROWSERS --> <!--[if !IE]><!--> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]-->   <!-- TARGET ONLY ONE SPECIFIC VERSION, IN THIS CASE IE 6 --> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]-->   <!-- TARGET ONLY ONE SPECIFIC VERSION, IN THIS CASE IE 5.5 --> <!--[if IE 5.5000]> <link rel="stylesheet" type="text/css" href="ie55.css" /> <![endif]-->   <!-- TARGET IE 6 AND LOWER --> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> <![endif]-->   <!-- TARGET IE 8 AND HIGHER --> <!--[if gt IE 7]> <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> <![endif]--> <!--[if gte IE 8]> <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> <![endif]--> </head>

CSS hacks, only if you must

Hacks are used in your general stylesheet file, it is not recommended to use but sometimes it makes the life easier.

/* HIDE FROM IE 6 AND LOWER */ #selector { width/**/: 320px; } html > body #selector { width/**/: 320px; }   /* HIDE FROM IE 7 ONLY */ #selector { _width: 300px; }   /* IE 6 ONLY */ * html #selector { width: 240px; }   /* IE 7 ONLY */ *+html #selector { width: 300px; }   /* IE-8 ONLY */ #selector { width: 300px\0/; }   /* IE-7 & IE-8 */ #selector { height: 300px\9; }

Hack vs conditional stylesheets

Hacks are against web standards and should be carefully used, I’ll say it’s wrong to use them and should always be avoided.

Plus for conditional stylesheets

If you call you self a web developer and do care of your end product, you do need them. Using conditional styelsheets is the only way you can get a good result in all IE browsers. I’ll say this is the most boring part as a developer, most time consuming and frustration work. Don’t know how many times I’ve been swearing at Microsoft doing this kind of work. I always try and use greater-than/less-than to target multiple versions, its a great tool.

What about IE 6?

Probably one of the most challenging browsers to work with, I dropped support for this browser years ago, so have also big corporations and governments so I’ll say its safe to ignore IE 6. You can visit theThe Internet Explorer 6 Countdown to see if you target areas has a lot of users. If you targeting China I say you must tackle this bugger.

Quick Tip: Mimic a Click Event with CSS

In today’s video quick tip, I’ll show you a nifty technique: we’ll use plain and simple CSS to mimic click events. The key is to use the helpful :target pseudo class.

 Demo.

Quick Tip: Display Elements Sequentially with jQuery

In this video quick tip, I’ll teach you how to add a bit of flair to your page, by displaying a set of elements sequentially. While there are numerous ways to accomplish this task, today, we’ll review one technique that uses recursive functions.

Demo

The State of CSS3

Just because you didn’t get to go to that awesome conference doesn’t mean that you can’t still watch the lectures! Each weekend, we’ll feature a recommended web development lecture on Nettuts+.
In this recent lecture, from Fronteers 2010, Håkon examines the history of CSS3, its current status in the browsers, and what the future of CSS holds.


Håkon Wium Lie | CSS3 | Fronteers 2010 from Fronteers on Vimeo.