CSS Frames

7th January 2004 · Last updated: 5th October 2016
 

Comments

Another demo! CSS Frames shows how you can use CSS to create a dynamic frame anywhere on the page, that can be updated instantly using nothing more than alternate stylesheets. Based on my CSS Pencils demo, but with much smaller code.

Comments (11)

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

  1. John Rudge:
    Effective and yet uncomplicated Chris!

    Posted on 7 January 2004 at 10:46 pm
  2. 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
  3. csant:
    very nice and effective: the idea is wondeful in its simplicity...

    Posted on 8 January 2004 at 8:24 am
  4. 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
  5. 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
  6. Chris Hester:
    There's no reason for that. :-O

    Posted on 8 January 2004 at 9:07 pm
  7. 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
  8. 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
  9. 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
  10. David:
    Extreme CSS ! :-D
    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
  11. 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