I've always been one to jump into a discussion, defending span and div as if they were my blood. I've always said they do have purpose, and even—dare I say—semantic meaning.
All the more surprising it might be that I, of all people, have decided to go all Anne van Kesteren on my site and ditch every single generic container. Yes, back to the basics all the way; I don't even use Tantek's layout lists.
So what happened? Did somebody brainwash me? Did I fall on my head really hard? Did the voices
make me do it? No, none of that. In fact, I still believe in the use of span and div: I just want to go without them again for once (it's been so long). What better place to try it out than on my own cuddle home page.
The change (for now) has been limited to the non-Weblog pages, so you won't see any chances here … not for now.
Every page (of those that are static) has their own category, and entries still make for the sections on these pages.
The change required such brutal hacking in the category template file of my content management system (Movable Type 3.11), that I decided to write it from scratch. It's much lighter than the previous version, and so is it's output. (It'd be scary if it wasn't, eh?)
<?php include("<$MTBlogSitePath$>include/doc.php"); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta name="Description" content="<$MTCategoryDescription remove_html="1" remove_xml="1"$>" />
<meta name="Keywords" content="<MTEntries><$MTEntryKeywords remove_html="1" remove_xml="1"$></MTEntries>" />
<title><$MTBlogName remove_html="1" remove_xml="1"$> <$MTArchiveTitle remove_html="1" remove_xml="1"$></title>
<link rel="Shortcut Icon" href="/" type="image/png" />
<link rel="StyleSheet" href="/themes/20041014/" title="20041014" type="text/css" />
<link rel="Home" href="/" title="<$MTBlogName remove_html="1" remove_xml="1"$>" />
<link rel="Accessibility" href="/accessibility/" title="<$MTBlogName remove_html="1" remove_xml="1"$> Accessibility" />
<link rel="Author" href="/ego/" title="<$MTBlogName remove_html="1" remove_xml="1"$> Ego" />
<link rel="Top" href="#" title="Top of Page" />
<link rel="Up" href="../" />
</head>
<body class="<$MTArchiveTitle dirify="1"$>">
<h1><$MTArchiveTitle$></h1>
<$MTCategoryDescription$>
<MTEntries>
<h2 id="id_<$MTEntryTitle dirify="1"$>"><$MTEntryTitle$></h2>
<$MTEntryBody$>
</MTEntries>
</body>
</html>
The Archive File Template looks like this: <MTParentCategories glue="/"><$MTCategoryLabel dirify="1"$></MTParentCategories>/index.php.
Because the styles/themes/visual designs were largely dependent of classes and ids on the (now absent) generic containers (and because I've grown tired of the current design again), I needed to write a new style sheet, too. There's a lot of work that needs to be done, but this is what I've written so far:
* { background: transparent; color: inherit; font-size: 1em; text-decoration: none }
a img { border: .1em solid; border-color: #ccc #ccc #999 #ccc; margin: .2em; padding: .2em }
a:hover { color: #393 }
a:hover img { background: #fff }
abbr, acronym { font-variant: small-caps }
address, blockquote, body, center, dd, div, dl, ol, p, h1, h2, h3, h4, h5, h6, ul { display: block }
address, cite, dfn, em, i, var { font-style: italic }
b, optgroup, strong, th { font-weight: bolder }
big { font-size: larger }
blockquote { margin: 0; padding: 0 4em; position: relative }
blockquote::after { content: close-quote; display: block; font-size: xx-large; margin: -1em -1em 0 0; text-align: right }
blockquote::before { content: open-quote; display: block; font-size: xx-large; margin: 0 0 -1em -1em; text-align: left }
body { background: #fafafa; border: .1em solid #333; color: #333; margin: 0 auto; max-width: 100%; min-width: 561px; padding: 2em; width: 40em }
buttin, input, textarea { border: .3em double }
caption, center, h1, th { text-align: center }
code, pre, samp, tt { font-family: 'Lucida Console', monospace, sans-serif }
del, s, strike { text-decoration: strike-through }
h, h1, h2, h3, h4, h5, h6 { font-family: Georgia, 'Times New Roman', serif; font-weight: normal }
h section h { font-size: smaller }
h1 { font-size: xx-large; line-height: 1em; margin: 0; padding: 0 }
h2 { font-size: x-large }
h3 { font-size: large }
h4 { font-size: small }
h5 { font-size: x-small }
h6 { font-size: xx-small }
html { background: #333 url('html.gif') repeat; color: #fff; font: normal small/1.44 Verdana, sans-serif; padding: 2em 6em 2em 2em }
head, link, meta, script, style, title { display: none }
ins, u { text-decoration: underline }
q::after { content: close-quote }
q::before { content: open-quote }
small, sub, sup { font-size: smaller }
sub { vertical-align: sub }
sup { vertical-align: super }
:lang > :lang { font-style: italic }
[href] { text-decoration: underline }
:active { color: #933 }
:link { color: #339 }
:visited { color: #939 }
.gallery { text-align: center }
As you can see, there's only one class; the rest of the design is hooked on markup elements, pseudo-elements, and pseudo-classes.
Is this change permanent? Probably not, but I will be building on this idea for a while, so watch out for falling bricks, and rotting links. Thank you.
ACJ1 comments so far.
Nice. Working without divs is hard, but it pays itself back. I marked up a page the other day with just h1 and p. It was all smooth sailing.
Posted by: Rob Mientjes on October 15, 2004, at 08:08