CSS Sanity from Zed Shaw
Most developers I know have a dislike/hate relationship with CSS. We get that it's necessary, but -- really -- why is it so badly implemented? Design purists may shudder at things like Blueprint, Grid960, etc, but they exist because they serve a valuable purpose: making CSS somewhat intelligible. I've used them and they're much better than pure CSS, but they introduce their own complications. Meh -- it's life, right? Nothing to be done. But I just happened across a post by Zed Shaw that seems something of a miracle -- it restores sanity to CSS.
Zed's post is http://oppugn.us/posts/1287608776.html. If you're not familiar with Zed Shaw, he is the very definition of a brilliant curmudgeon. You'll get the "curmudgeon" part right away -- but what about the brilliance?
I'll show you some things I did with Zed's Oxymoron stylesheet, but first, what exactly is wrong with the present state of CSS? I've said for years that CSS was written by people who wanted to be programmers -- but aren't.
But maybe I'm being unfair. Maybe it was really written by people who want to create an industry to sell books, tools, and training.
4,240 results for "CSS" in Books? Wow. But again, maybe I'm wrong. Maybe the quote widely attributed to Napoleon has it right: Never attribute to malice what is adequately explained by stupidity.
CSS is, simply, a train wreck. I know -- some wonderful smart and creative designers can make it do wonderful things but, as Zed explains, look at many influential design books and they begin with the idea of a grid.
Tables gave us grids. Easy grids. Understandable grids. But, of course, tables are taboo for layout. What's a poor programmer to do?
Adopt Zed's Oxymoron stylesheet. This is what it looks like:
body {
width: 500px; /* I adjusted Zed's original to make it smaller */
margin-left: auto;
margin-right: auto;
}.oxymoron {
display:table;
width: 100%;
border-collapse:collapse;
border-spacing:10px;
}
.notarow {
display:table-row;
}
.notarow div {
display:table-cell;
}
How do you use it? Let's say I want to build a very simple "grid". I want "cell" A to be 300 pixels wide and cell "B" to be 400 pixels wide. Here's the HTML:
<html>
<head>
</head>
<body>
<div class="oxymoron">
<div class="notarow">
<div class="menu">I'll always be 300 pixels wide, whether
there's any content in me or not. In fact, even if I have stuff that's
much wider than 300 pixels, I'll still stay at 300 pixels.</div>
<div class="main">I'll take up the remainder of what's left,
the maximum width having been set by the body style. No floats
required.</div>
</div>
</div>
</body>
</html>
I'll give cell "A" the class attribute of "menu" and cell "B" the class attribute of "main". My CSS:
.menu{
width: 300px;
border: 2px solid red;
}.main{
width: *;
border: 2 px solid black;
}
And that produces this:
Or, this one:
<html>
<head>
</head>
<body>
<div class="oxymoron">
<div class="notarow">
<div class="left-menu">I'll always be 110 pixels wide, whether
there's any content in me or not. In fact, even if I have stuff that's much
wider than 110 pixels, I'll still stay at 110 pixels.</div>
<div class="main">I'll take up the remainder of hasn't been specified,
the maximum width having been set by the body style.</div>
<div class="right-menu">Hi</div>
</div>
</div>
</body>
</html>
<style>
.left-menu{
width: 110px;
border: 2px solid red;
}
.main{
width: *;
border: 2px solid black;
}
.right-menu{
width: 110px;
border: 2px solid red;
}
</style>
that produces this:
Now, we know the evils of using tables for layouts. I confess that, at times, I'm sorely tempted to backslide into temptation.
So that this starts to look very appealing:
<table width="500">
<tr>
<td class="left-menu"></td>
<td class="main">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</td>
</tr>
</table>
But I manfully resist the temptation. Of course, if I was so loutish as to use that code, it would produce something like this:
Can I have the simplicity of tables -- without the downside?
<div class="oxymoron">
<div class="notarow">
<div class="left-menu"></div>
<div class="main">
<div class="oxymoron">
<div class="notarow">
<div class="td">Hello</div>
<div class="td">World</div>
</div>
</div>
</div>
</div>
</div>
It appears I can -- thanks to Zed Shaw.
I realize that you don't have any table tags in your HTML, but so what?
Despite what the purists might say, sometimes tables are the best solution - even in the modern world. Of course, often there are better ways (positional layout is often superior to floats, for example). I plan to start blogging on these kinds of HTML/CSS questions very soon.
I haven't tried them myself, but they look pretty cool, and seem to address some of your complaints.