Resolution dependent layouts – the future?

In 2004, the Man in Blue introduced the web community to the Resolution dependent layout. Using CSS and JavaScript, Cameron was able to make the layout changed based on the users viewport size.

So where to next? As modern browsers gradually start to support media queries, the next step will mean that these types of layouts can be achieved with CSS alone.

Let’s take a simple example:

1. Create a simple html page

<!DOCTYPE html>
<html lang="en">
		<meta charset="utf-8">
		<title>Title here</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

2. Add a link to an external style sheet into the <head>

<link rel="stylesheet" href="resolution.css">

3. Drop in some quick HTML

<p class="one">
	Visible when the viewport (browser window) is less than 1500px wide.
<p class="two">
	Visible when the viewport is less than 1000px wide.
<p class="three">
	Visible when the viewport is less than 500px wide.

4. Create a CSS file called “resolution.css” in the same directory

5. Paste in the following CSS:

@media (max-width:1500px)
	body { background: yellow; } { display: block; }
	p.two { display: none; }
	p.three { display: none; }

@media (max-width:1000px)
	body { background: green; } { display: none; }
	p.two { display: block; }
	p.three { display: none; }

@media (max-width:500px)
	body { background: red; } { display: none; }
	p.two { display: none; }
	p.three { display: block; }

See a sample in action – viewable in Safari 4, Firefox 3.6, Opera 10 and Chrome 5.0. Now resize your browser window in and out.

So what is going on?

For browsers that support media queries, we are able to deliver different CSS based on the size of the screen – using the “maxwidth” value.

What does this mean?

Not much at present, as there is still one or two small browsers (the IE family) that does not support media queries. However, in the near future, we may be able to use media queries to overcome layouts, and solve world hunger!

Have fun!