Resolution dependent layouts – the future?

Date: 9 April 2010
Author: Russ Weakley

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 PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Resolution-dependant layout using CSS only</title>
</head>
<body>
</body>
</html>

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

<link rel="stylesheet" href="resolution.css" type="text/css" media="screen">

3. Drop in some quick HTML

<p class="one">
	I am less than 1500px 
</p>
<p class="two">
	I am less than 1000px 
</p>
<p class="three">
	I am less than 500px 
</p>

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

5. Paste in the following CSS:

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

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

@media screen and (max-width:500px)
{
	body { background: red; }
	p.one { 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!

Comments so far

  1. [...] media queries, the next step will mean that these types of layouts can be achieved with CSS alone. This article outlines a possible solution – with a rough and ready [...]

  2. clawsout says:

    That’s awesome Russ – and so great that it serves such a good cause too.

    I’m looking forward to a puréed CSS resolution to hunger dependence ;-)

    (and tailored designs for various device displays too.)

  3. halans says:

    Cool! And you managed not to mention “iPad”… :)

  4. Avinash says:

    Neat example. But for the browsers that still don’t support media queries, isn’t there a way to detect which browser the visitor is using and then generate appropriate JS/CSS on the fly for that particular browser?

  5. Russ says:

    #Avinash – resolution dependent layouts:
    http://www.themaninblue.com/writing/perspective/2004/09/21/