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.
Simon Willison
