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?

• 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 can get content with minimal (or zero!) style

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;}

/* highlighting and border effects */
#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 to 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;}

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;}

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, depending on how you place it on the page
• Weigh the old-browser situation against the accessibility and efficiency wins

Example: foxsearchlight.com

• Created by Jeffrey Zeldman and Hillman Curtis
• Uses transitional design and Flash
• Greatly improved download and layout speed
• Changes to layout and appearance are much easier

Example: NEOP

• The JPL Near Earth Object Program site re-imagined
• All tables were removed, although a few divs remain
• Navigation links are now at the bottom of the source
• Two backgrounds are used and stay in place

Example: wired.com

• In October 2002, wired.com redesigned using no tables at all
• CSS positioning is used for basic layout
• Daily color themes are handled with stylesheet changes
• Turn off CSS (or visit with a non-CSS browser) and you get just the content
• Cellphone and handheld browsers get the non-CSS version

Example: Netscape DevEdge

• In February 2003, DevEdge went from transitional design to fully positioned layout
• CSS makes subtle but useful effects very easy to accomplish
• "Wireframe" layout is managed by its own stylesheet; themes are in separate stylesheets
• Menus based almost entirely on CSS, and don't require JavaScript in some browsers
• Print-media styles automatically insert link URLs into text for advanced browsers

How Far Can We Go?

• CSS looks simple, and in a basic sense it is
• It's also highly complex and gives rise to surprising effects
  • Flowing text along a curve
  • Translucency effects
  • Popups menus without JavaScript
• We still don't know the limits of CSS-driven design

And last

• Sophisticated layout doesn't mean complicated structure!
• You can offer a less rich but still readable site to v4 browsers
• Alternate and user styles can mean complete redesigns without markup changes
• Stronger structure means wireless-friendly and accessible design
• If you get creative enough, there are deeply surprising possibilities