Using javascript expressions in CSS

I usually prefer a fixed layout for pages, because this allows for more control over typography, readability and so on.

Still, one of biggest clients specifically required two years ago their site to be built with a liquid layout that expands full-width; the whole site (about 2000 html and aspx pages) was eventually done this way and everybody was happy…

…until last week.

The directors just got some new fancy widescreen laptops and they realized the site doesn’t look very nice when spread to 1920 pixels wide. So I was told “the site should not expand more than 1024 pixels, but also not shrink below 800 pixels.”

This would be relatively easy to do with a simple CSS rule like

{
    min-width: 760px;
    max-width: 955px;
}

Alas, our good ol’ friend IE6 doesn’t support min-width and max-width properties. I found however a very nice little trick for IE. It looks like you can actually use javascript expressions in CSS, like this:

{
    width:expression(document.body.clientWidth < 955 ? "955px": "100%" );
}

I know it’s not standards-compliant, but it works and doesn’t bother the other browsers.