Styling boxes, pushing envelopes
February 10, 2003
Feedback Farm
Have something to say about this article? Let us know below and your post might be the Post of the Month! Please read our Official Rules and Sponsor List.
Forums
Want to dig even deeper? Post to the new MacEdition Forums!
By now, most people have gotten with the basic CSS program. A quick surf through many popular sites shows that they’re using CSS at some level. Sure, they’re probably also using brain-dead browser sniffers and styling onscreen text using points (thus making the sniffer necessary), but it’s a start. At least they’re ditching the font tag.
CSS is so much more than a substitute for the font tag and the
BGCOLOR
attribute on tables. It isn’t just a new way
of doing the old tag soup thing. Even if it was, the bandwidth savings
would be worth the effort. The point is, though, that Web standards
allow you to do more than font tags and nested table tricks
make possible. Of course, it would help if browsers supported these
features correctly. But imagine a world where most of your human
pageviews are coming from Chimera users, or some other browser with
good standards support. There’s so much more you can do.
When former tag soup artists start attempting CSS, too often they jump straight into heavily positioned CSS layouts, and risk getting bamboozled by their inexperience. Positioning isn’t necessary for much of the cool stuff. Consider some of these things you can do just using CSS1.
Start at level 1
If you look at the left side of Wired’s news page, or at Eric Meyer’s front page, you’ll see borders drawn through text, not above or below. They do it using positioning, which is part of CSS Level 2, but you can do it using just negative margins and floats, which are CSS1, as shown in this test page. Now, try doing that using tables. I suppose you could design something in about five columns that would come close using GIFs, but it would break apart at the drop of a hat.
Another neat trick are the dotted borders under acronyms you sometimes
see here at MacEdition, although we use a span element rather than
acronym
or abbr
to get around some bugs in Netscape 4. Mozilla and iCab do
this for acronym elements by default, but it’s easy to let users
of other browsers know that there’s a definition for that acronym
available in a tooltip. Just give the appropriate element –
acronym
, abbr
, or in our case <span
class="def">
– a dotted border-bottom
– which is just CSS1. You could dispense with the class
altogether using a
CSS2
selector like acronym[title]
,
which applies whenever an acronym
element has a
title
attribute. Again, you could do something like it in
a pre-CSS world using an underline, but then some readers might confuse
it with a link.
Yet another cool styling trick is the drop cap on the first paragraph.
The New York Times does this with a graphic, which could get mighty
tedious to code up if you don’t have some little CMS or neat
function to automate the process. But if you don’t have a CMS
– or a bunch of underpaid post-dot-bomb production staff –
what then? Why not use
the
:first-letter
pseudoelement
from CSS to style and float your drop cap? That will save time if you
also want to present your content without it. Again, if all browsers
supported the
CSS2
sibling selector (+
), you
wouldn’t even need to set a class for the paragraph with the drop
cap. Drop caps usually only apply after headings, so you could use a
selector like H1 + P:first-letter
to create the drop cap
on the paragraph.
Break out of your cell
Pre-CSS, we all became expert in manipulating table formats, both with
standards-based attributes like cellspacing
and proprietary
ones like bordercolordark
.
As my MacEdition Guide to CSS
Support in tables shows, CSS lets you do more. Sure, you used to be
able to set font
, bgcolor
and borders, but if
you wanted different-sized padding around one cell than the others, it
was nested-tables-and-spacer-GIF time. Borders around tables meant more
nested tables. With CSS, it’s just a matter of setting different
padding and borders on different cells. Even if you’re not yet
ready to do full CSS layout – maybe like us, you have a large
enough proportion of iCab or OmniWeb in your readership to make this
risky – you can do more with tables and CSS than tables on their
own, and it will be more manageable.
Graduate to level 2
Of course, most newer browsers support CSS2 to at least some extent, and some have near-complete support. You can do layout using only CSS1 properties, like the float-based layouts that even work in Netscape 4, such as this one at realworldstyle.com. But some of the most interesting features of CSS are in the Level 2 specification.
Take selectors: many longer documents use some form of indenting of the
first line of a paragraph. While it’s easy to do in CSS using
text-indent
, it would have required a mess of non-breaking
spaces in the pre-CSS days. But the traditional printed document styles
also override the text indenting for paragraph immediately
after a heading. Most people would just set a class for the relevant
paragraph, or give up on that presentation altogether. There’s
no need to do either. You can get this effect easily with CSS2 using
the sibling selector:
p {text-indent:5em;}
h3+p, h4+p {text-indent:0em;}
There are some other cool CSS2-specific selectors that can be used to
great effect. The :before
and :after
pseudoelements could be part to all sorts of useful purposes, especially
if combined with another CSS2-specific feature in
print stylesheets.
You could add the link’s URL or the acronym’s definition
into the printed version of the page, so that information presented
dynamically on-screen is still available in the print-out. For example:
acronym:before {content: attr(title) " (";}
acronym:after {content: ") ";}
This isn’t an original idea, but you can use the
:before
or :after
pseudoclass and content
property to add icons to indicate whether links are off-site or to
other parts of the site.
These are just a few ideas. There’s plenty more to explore. You can break out of the design styles that you know, and – who knows – create things as beautiful and inspired as some of the CSS-Edge stuff Eric Meyer does. Or maybe just save some bandwidth. Either way, Web standards allow you to do things tag soup just can’t touch. Experiment and have some fun.