Codebitch : Click to return to MacEdition homepage
 

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.

— CodeBitch (codebitch@macedition.com) is the grumpy cow who does the HTML production for MacEdition. Read other articles by CodeBitch

E-mail this story to a friend

Talkback on this story!