Cameron Adams and Dave Shea both came through recently with some smart new CSS techniques.
Cameron’s trick, entitled Resolution dependent layout, provides a welcome new angle to the long running debate over liquid vs. fixed width designs. The standard dilemma is that fixed width designs waste browser real estate, but liquid designs can lead to unreadably long lines of text. The CSS specification provides a solution in the form of the max-width property, but this is unsupported by Internet Explorer (barring clever but invalid expression hacks) and can still leave liquid designs looking less than optimal in uncommonly wide or narrow browser windows.
Cameron’s solution is ingenious: use JavaScript to detect the size of the window and swap in different stylesheets depending on how much space is available. In his example, a three column layout element is dynamically switched to use a single column when the browser window is resized to below a certain width.
Using JavaScript to modify a page based on its width is not a new idea: I’ve seen it used to serve larger advertisements in a page gutter before – but altering the actual page layout seamlessly is definitely an interesting twist on things. Best of all, Cameron’s JavaScript is clean and unobtrusive and should be easy to adapt for other purposes with minimum effort.
Dave Shea on the other hand has been working vertically: in min-height: fixed; he takes on the sticky problem of design elements which need to maintain a certain height, but expand when their content outgrows them. Dave’s eventual solution is a veritable tour de force of CSS browser hacks, with workarounds for IE on Windows and Mac, Opera 7 and Safari! The trade-offs involved in using so many hacks are discussed intelligently in Dave’s comments. As always, I would caution designers to make sure they are fully aware of the hacks in use and what they do before applying the technique to a live project.
Related posts:
- 101 Essential CSS Tips, Tricks & Hacks The team at SitePoint is pleased to announce a new...
- 5 Reasons to Avoid CSS Hacks and Conditional Stylesheets CSS hacks and conditional style sheets can cause more problems...
- The New W3C Website Goes Live … With Invalid CSS! The new and overdue W3C website redesign has been completed....
- 5 Rarely-Used CSS Properties It is easy to forget CSS that you don't use...
- Where Have All the Flexible Designs Gone? Are flexible, fluid, and elastic designs dying out? Craig discusses...
Thanks for sharing!
September 22nd, 2004 at 5:57 pm
Eii, ingenius or out, it’s flawed… I’m currently using a 400mhz Celeron (I know, it’s pathetic) running MSIE (even worse), and it lags when I resize. Had he done it properly, it’d go:
if (width < 800 && prevWidth > 800)
…
else if (width > 800 && prevWidth < 800)
…
As I see it, EVERY SINGLE pixel change when resizing causes the style to be changed, and that lags me on this computer… should really cache what it is BEFORE resizing happens (ie on init, or at the end of the function called onresize), and then only if it’s crossed the border (800px) should it do anything… cool nonetheless though.
just my 2 cents
October 1st, 2004 at 7:51 pm
I’ve done just that on a few of my pages for quite awhile. heres one of them:
http://www.dimensionalized.com/new.php?firstname=justvisiting
However,
if the script finds that the screen size is bigger than 800×600
than I include an iframe to include another page of extra info on the far right side.
If they have an 800×600 than I include that extra info page as a link on the side.
This way I can keep a fixed width for all my pages and do not lose out on browser real estate that is of great value.
October 14th, 2004 at 3:56 pm
I really don’t understand what’s so surprising about this. It’s only common sense that several stylesheets can be designed for several resolutions.
The problem lies not in what is obvious, but in the extra time spent creating those stylesheets. So why not make a nice “fluid” website from the start?
October 31st, 2004 at 5:07 pm
I created a very basic working example that you can look at the source code:
http://www.dimensionalized.com/instruction/screenrealestate.html
The iframe includes this other file:
http://www.dimensionalized.com/instruction/extrainfo.html
If you save all this to your desktop and go to line #189 and change the value to false, you can see in action.
It is very solid, although it does not take into account the 2% who disable JavaScript.
November 9th, 2004 at 12:03 am
You still alive Simon?
November 12th, 2004 at 10:39 am
I still can’t see what’s wrong with fluid. We all need a drink now and again. So, I’m off for some more fluid ;)
November 12th, 2004 at 1:56 pm
Uhh, Simon? Where’d ya go?
November 18th, 2004 at 11:58 am
I am in the process right now (Mar.2006) of developing a new site.
http://www.calgarymotorcyclescooter.com/index.htm
Again, since there are still some using the smallest of screen sizes of 800×600 I made this the default size when designing. However like is mentioned before there is screen real estate that is being wasted. So by testing for some of the sizes you can add ads and or other extra information. I’m using the same info as noted above. Tell me what you think? You know, one has to know the box really well before one can step outside the box.
March 18th, 2006 at 5:59 pm