Minimal Markup, Surprising Style

Eric A. Meyer

Netscape Communications

(Re)stating some truths

• CSS is NOT a pixel-fidelity presentation language!
• The reader can always trump the designer
• Use structural (X)HTML elements when you can
• Tables are okay, but use them sparingly
• Write CSS that's readable to you

Where do we stand?

• It's 2003, and CSS has been out for most of a decade now...
• Basic font and color controls are solid
• Layout and positioning is pretty firm, but gets shaky at the edges
• IE6/Win and Opera 7 join IE5/Mac and Gecko browsers in having "DOCTYPE switching"
• Improvements are coming all the time

Old browsers

• You may have a site visited by lots of old browsers
• CSS support (and everything else support) wasn't so good back then
• They're consumers just like everyone else
• We can give them the content without all the style
• Use of @import and comment hacks helps in this endeavor

Tripping the list fantastic

• Navbars, toolbars, sidebars—they all have one thing in common: they're collections of links
• We can represent such a collection as a list and style it
• With this simple structure, we have a lot of presentational flexibility
• Whether the list is ordered or not is up to you; unordered is more likely the sensible choice

<ul id="navigation">
<li><a href="index.html">WidgetCo Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="fun.html">Widgety Fun!</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about.html" id="current">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

Making a sidebar

• By removing the bullets and indentation, we have what looks like break-separated text
• We can get a lot done just by styling the li elements
• Separators are a breeze, and you can cap the list using the ul element
• It can be a panel, an open list, almost anything you want

/* simple separators */
#navigation {padding: 0; margin: 0;
  font: bold 12px Verdana, sans-serif;
  border-bottom: 1px solid gray; width: 13em;}
#navigation li {list-style: none; margin: 0; padding: 0.25em;
  border-top: 1px solid gray;}
#navigation li a {text-decoration: none;}

/* panelize */
#navigation {padding: 1px; margin: 0;
  font: bold 12px Verdana, sans-serif;
  border: 2px solid; border-color: #AAA #EEE #EEE #AAA;
  background: #CCC; width: 13em;}
#navigation li {list-style: none; margin: 0; padding: 0.25em 1em;
  border: 1px solid; border-color: #FFF #AAA #AAA #FFF;
  text-align: center;}
#navigation li a {text-decoration: none;}
#navigation li a:link {color: black;}
#navigation li a:visited {color: gray;}

Strengthening the links

• Besides the list and list item elements, we also have the anchor (a) elements themselves
• The links don't fill up the list items, but they can thanks to display: block
• Having now "blocked out" the links, we can do even more with the style
• Borders within borders, hover effects, changes of state—all are possible

#navigation {padding: 0 1px 1px; margin: 0;
  font: bold 12px Verdana, sans-serif;
  background: gray; width: 13em;}
#navigation li {list-style: none; margin: 0; border-top: 1px solid gray;
  text-align: left;}
#navigation li a {display: block; padding: 0.25em 0.5em 0.25em 0.75em;
  border-left: 1em solid #AAB; background: #CCD;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #FE3; color: #FFF; background: #332;}

Making a navbar

• It's a little trickier, but you can turn a list into a horizontal navbar
• Instead of blocking out links, we need ot make the list itself inline
• Now we can visually separate the links with borders
• Watch out for how inline elements behave in different browsers, especially whitespace between them
• With some creative styling, we can even create a "tabbed" interface

/* simple inlining of previous example */
#navigation {padding: 0 1px 1px; margin: 0;
  font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0; border-top: 1px solid gray;
  display: inline;}
#navigation li a {padding: 0.25em 0.5em 0.25em 0.75em;
  border-left: 1em solid #AAB; background: #CCD;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #FE3; color: #FFF; background: #332;}

/* traditional navbar */
#navigation {padding: 3px 0; margin: 0;
  border: 1px solid #BBC; background: #DDE;
  font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0;
  display: inline;}
#navigation li a {padding: 3px 0.5em;
  border-right: 1px solid #BBC;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #88C; color: #000; background: #AAE;}

/* tabbed styles */
#navigation {padding: 3px 0; margin: 0;
  border-bottom: 1px solid #778;
  font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0;
  display: inline;}
#navigation li a {padding: 3px 0.5em; margin-left: 3px;
  border: 1px solid #778; border-bottom: none;
  background: #DDE;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {color: #000; background: #AAE;
  border-color: #227;}

/* "current tab" style */
#navigation li a#current {background: white; border-bottom: 1px solid white;}

So what's the catch?

• Maybe none—it depends on your visitor demographics
• NN4.x is not going to respond well to the inline list technique, and IE4 isn't likely to be much happier
• If you hide the styles from them, they'll just render an unordered list
• That could be okay for the sidebars, depending on how you place it on the page
• Weigh the old-browser situation against the accessibility and palmtop wins

How far can we go?

• The markup savings alone can be astounding
• Once you make the leap into using lists, there are a lot of possibilities
• Menus and submenus can be represented as nested lists, and either CSS or JS can drive the menus
• Even without popup menus, you can drive "area-specific" submenus with CSS alone
• If you use positioning, the links can go anywhere in the source and anywhere on the screen

Another quick effect

• Let's go back to the panel and add a heading, inline it, shift it up a bit, and flip some styles around
• By making the heading inline, we end up "shrink-wrapping" the text
• Adding a background color obscures pieces of other elements
• Relative positioning moves the element out of its usual place
• Some changes to backgrounds, borders, and text alignment, and we have a whole new menu look

<ul id="navigation">
<li id="title"><h4>Navigation</h4></li>
<li><a href="index.html">WidgetCo Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="fun.html">Widgety Fun!</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about.html" id="current">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

#navigation {padding: 0; margin: 2em 0 0;
  font: bold 12px Verdana, sans-serif;
  background: white; width: 11em;
  border: 1px solid gray; border-width: 1px 1px 0 0;}
#navigation li {list-style: none; padding: 0; margin: 0.5em 0;
  text-align: right;}
#navigation li a {padding-right: 0.5em; border-bottom: 1px solid gray;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: red; color: #000;}
#navigation h4 {display: inline; margin: 0; padding: 1px 0.33em;
  position: relative; top: -1em; font-size: 1.1em;
  background: white; border: 1px solid gray;}
#navigation #title {text-align: left;}

And last

• Sophisticated layout doesn't mean complicated structure!
• Fiddling with the display of elements can multiply your options
• You can offer a less rich but still readable site to v4 browsers
• Stronger structure means wireless-friendly and accessible design
• If you get creative enough, there are deeply surprising possibilities