Following my CSS Pencils Demo I suddenly realised I could use alternate stylesheets to create the effect of frames. These could be anywhere on the page, created merely by restyling a div with a different stylesheet! It works and it's magic. A practical use for my CSS after all!

This is a much smaller demo, so there should be no trouble loading it. The stylesheets are also laughably small. Take a look!

I hope this inspires someone to use this technique in a real world example. The only drawback is that it uses background images to change the frame. But you could also use generated content to add text. Of course that would only work in certain browsers, but could be very useful I think.

How It Works

Just three divs are used to create the frame I've used. Since the content in them is added via alternate stylesheets, all they need is an id:

<div id="header"></div>
<div id="photo"></div>
<div id="text"></div>

The main stylesheet used on the page defines the positions of these divs along with their heights and widths. Because I don't give the stylesheet a title in the link tag that refers to it, the style is always applied, no matter what alternate style is also chosen. This trick saves you having to repeat the same code over and over for each stylesheet. All the alternate stylesheets need are the changes you wish to apply, such as colours.

So here's all that's needed in one of the alternate stylesheets to change the frame:

#header {background:transparent url(../../images/tips/grassbirdheader.gif) no-repeat top left}
#photo {background:transparent url(../../images/tips/grassbird.jpg) no-repeat top left}
#text {background:transparent url(../../images/tips/grassbirdtext.gif) no-repeat top left}

Full Browser Support:

Windows (XP):

IE5, 5.5, 6, 7 - superb
Mozilla 1.5, 1.6 - superb
Firefox 1.0.5 - superb
Opera 7.23 - superb
Opera 7.54 - superb
Opera 8.02 - superb

Windows (2000):

Opera 6.06 - no images appear

Mac (OS X):

Safari 1.1.1, 1.2.2 - superb
IE 5.2.3 - superb
Mozilla 1.6b - superb
Opera 7.50 Preview 3 - superb

Thanks to Marco Ney and others for testing in various browsers.

Try it yourself. Let me know if it works! If not, here's a screenshot from IE6 on Windows XP.

The Demo Itself

CSS Frames Demo

Comments (11)

Comments are locked on this topic. Thanks to everyone who posted a comment.

John Rudge:
Effective and yet uncomplicated Chris!

Posted on 7 January 2004 at 10:46 pm ¶
juris:
it works good but problem is with search engine scanning, giving link to second or third frame (common frames problem)

Posted on 8 January 2004 at 7:33 am ¶
csant:
very nice and effective: the idea is wondeful in its simplicity...

Posted on 8 January 2004 at 8:24 am ¶
Mark:
juris is correct, this shares many problems of real frames; third frame is not addressable, bookmarkable, shareable. Also, it breaks the back button; clicking 2nd and 3rd frames, then clicking back goes to previous page. Browser does not register the click.

Use real links. It's the only way.

Posted on 8 January 2004 at 3:55 pm ¶
Chris:
It does not work on my win32 Firebird with proxomiton popup killer. thought you'd like to know.

Posted on 8 January 2004 at 8:56 pm ¶
Chris Hester:
There's no reason for that.

Posted on 8 January 2004 at 9:07 pm ¶
Steve Clay:
I realize this is just a demo, but it's careless to call "practical" a method of using CSS for /content/ delivery. CSS is powerful and can generate content, of course, but we have to be careful not to endorse building a web of content only available to the sighted in the latest graphical browsers.

Posted on 16 January 2004 at 2:41 pm ¶
Brad Bice:
Another method for mimicking frames with CSS would be to use the display: property. This way you can Put any text you need in the XHTML, and just hide the divs you don't want to be shown. Just absolutely position them over each other. And all your alternate stylesheets will have in them is the list of divs and their respective display properties. If there aren't too many images being loaded into each "frame", it will load quickly, the markup will retain it's structure, the "frames" will change quickly, and it's search-engine friendly. The only drawback is what was mentioned here, the back button. This can probably be dealt with using Javascript but including a full navigation to the 'home' div should suffice.

Posted on 21 January 2004 at 10:57 pm ¶
Mr. CaN:
Hey, I like it, but what is in the javascript. I can't seem to get this to work for me. It works the first time, but then it always brings up the second image, and never the plain stylesheet.

Posted on 3 April 2004 at 7:14 am ¶
David:
Extreme CSS !
I love it. This charts the future. We worry too much about designing for "older browsers" while we should be thinking of the future. KUDOS Mr Hester!

Posted on 10 April 2004 at 1:12 am ¶
David Okunmuyide:
David (above)is right!

I quote him -- "We worry too much about designing for "older browsers" while we should be thinking of the future" -- end quote.

I love the demo too.

People should realise that 'demos' like this help chart the way for the future in web designing and even development of browsers and web software. You are not meant to blindly implement all you see or hear. If it suits your audience fine, if not read it and move on. Thanks Mr Hester.

Posted on 19 November 2004 at 5:14 pm ¶