WEB STANDARDS CREATIVITY

So there we have it: a single class value on our body attribute can act as a kind of traffic cop for each module on our sidebar.
We’ve written some CSS that expects (and exploits) the presence of either ad-column-180 or ad-column-300, leaving
our markup completely untouched.
Additional classes, additional control
At this point, we’ve been using one value in the class attribute. By using ad-column-180 or ad-column-300, we can instantly
reformat our right sidebar and its contents. As we’ve discussed, the class attribute can accept multiple values, but can we
use the body element to control other aspects of our page’s presentation? There I go with the leading questions again.
Starting small (980 pixels’ worth)
When I came on board with the New York Magazine website redesign, I was told that the production team wanted to be able
to selectively override the flexible-width design on certain pages, effectively fixing the page’s width at the full 980 pixels.
Presumably, some of the pages would contain wide-format media (e.g., large photographs), and the client wanted to ensure
that the rest of the page’s layout would remain intact.
Let’s take another look at our #wrap rule, which contains our min-width and max-width parameters:
#wrap {
margin: 0 auto;
min-width: 770px;
max-width: 980px;
}
So if this is the default behavior, let’s add a new class value to our body element to override it—say, “fixed”?
We can now drop in the following CSS to turn our flexible design into a static one:
body.fixed #wrap {
width: 980px;
}
And there we have it. Since we’ve now set a width on our wrap block, the min-width and max-width properties are obsolete.
Our design’s container div is fixed at the requested 980 pixels, which fulfills our client’s request.
A word of caution about multiple class names: The aged IE5/Mac has a whitespace parsing bug
(www.macedition.com/cb/ie5macbugs/substringbug.html) that can cause it to become confused when
encountering a class name that is a substring of another class. As a result, try to make the categories of
class types you’re applying as unique as possible, and test thoroughly in that browser.
chapter 3 New York Magazine: My, What a Classy
71