CSSnewbie

Great Resources Elsewhere: May 02 to May 09

7 Tips for Replacing the Font Tag

So let’s say – hypothetically – that you’ve decided to take the plunge and replace all of the font tags in your website with semantic code and CSS. Hypothetical congratulations! You’re one step closer to web nirvana. Or perhaps you’ve just inherited a website filled to the brim with hundreds of nested font tags forming some sort of primordial typographical soup. You have my (very real) condolences. Luckily, replacing font tags with semantic code and CSS isn’t as terribly difficult as it might seem at the outset. And to help you along your way, here are a few tips on how to tackle the project.

Font Usage Assessment

Start out with a complete assessment of your current font usage. How many typefaces are you using currently? How many sizes? Do you use some of them more than others (hopefully so!). In what context are the fonts used? Write out this information and see if you can’t discover some sort of a rational pattern in the usage. If you’re lucky, a good, distinct pattern will appear – article headings always appear in 20-pixel Arial, for example.

Replace Font Tags with Semantic Tags

If you’re lucky, and the font tags follow some sort of a rational pattern, you’re in a good spot. The easiest way to start down the road to font tag recovery is to replace as many font tags as you can with semantic, meaningful tags. For example, if all of the article headings look the same, why not replace those font tags with an actual heading tag (<h1> - <h6>)? And if all of your paragraphs contain identical font tags, then you can just eliminate those tags straight away. Then you can style these elements later on down the road with CSS.

Avoid Classitis

The last thing you want to do when eliminating all of those font tags is just to replace them with a slew of unique classes and IDs. Classitis (as this practice is commonly called) is nearly as bad a disease on the web as is font tag usage. Only use classes and IDs when absolutely necessary; if all of your <h3> tags have a class of “articleHeading,” what’s to stop you from just applying those styles to your <h3> instead? For more information on Classitis and how to prevent it, see this article on Combating Classitis.

Let Your Fonts Cascade

When it comes time to start writing your CSS, remember to let your font choices cascade. If you discover that you have one size and typeface used in 90% of your website (14px Arial, for example), there’s no reason to set this font information on every possible tag in your CSS. Just set your “default” (i.e., most common) typeface on your body tag instead. This will save you a ton of time and effort down the road.

Perform Unique-Case Triage

If you come across a single-use font tag in your website – a font style that is used in one and only one place in your website – this would be a good time to stop and consider whether to eliminate that unique case. Is that different typeface necessary? Was it even and intentional choice? With so many font tags scattered about, some differences in typography may be entirely accidental. If you decide that this specific instance is both deliberate and necessary (e.g., your error messages look different than the rest of the text), set an ID on the tag and style the element that way.

Use CSS Shorthand

You’ve probably found that, while you’ve managed to eliminate hundreds of font tags from your website, you’ve added dozens of lines of CSS to your site – and that can seem like an uneasy trade if you’re more comfortable with font tags than CSS. To help cut down on the length of your CSS file, it can help to use the font property shorthand (described here). By using the shorthand, you can turn six or so lines of CSS into a single, easily digestible rule.

Make an Editor Do the Work

HTML editors can sometimes cause just as many problems as they solve – they can be a great source for font tags, for example. But many editors (Dreamweaver, Notepad++< and many others) also have pretty powerful search-and-replace functionality. And this will come in handy when you finally get to the toughest part of transitioning away from font tag usage – deleting all of those font tags you don’t want anymore. At that point, and editor capable of doing a search/replace – and perhaps even better, one that understands regular expressions – can be worth its weight in gold. Otherwise, you could just always consider the time it takes you to go through all that code as some sort of penance. :)

These are seven suggestions to help make it easier to transition from font tags to semantic code and CSS. If you have any other suggestions you’d like to add, offer them up in the comments!

Show/Hide Content with CSS and JavaScript

There are plenty of reasons why you might feel the urge to wax verbose on your website’s front page: to prevent your users from having to click through to a new page to find your information, to avoid having to reload the page, or even to improve your front page’s SEO. But just because your front page is text-heavy doesn’t mean it all needs to be visible at once.

Today’s tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn’t require a refresh or navigation to a new page and all your content is still visible to search engine bots that don’t pay any attention to CSS or JavaScript.

We’ll start with structuring our XHTML appropriately:

<p>...This is all visible content...
<a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">See more.</a>
</p>
<div id="example" class="more">
	<p>...This content is hidden by default...</p>
	<p><a href="#" id="example-hide" class="hideLink"
	onclick="showHide('example');return false;">Hide this content.</a></p>
</div>

There are three things of importance here: the “show” anchor, the “hide” anchor, and our “hidden” div. Each has been given an ID and a class. The IDs are used by our JavaScript to locate and style the items appropriately. I’m then using the classes to set our “default” CSS. Technically you could just use the IDs the set that CSS as well, but if you wanted more than one hidden section on your page, that could get messy.

You’ll notice in the code above that all of our IDs are fairly similar. This is a trick I’m using to simplify our JavaScript, as you’ll see later on down the road, so I suggest doing something similar. The class names have no relationship to the JavaScript whatsoever, and could really be whatever you wanted them to be.

It’s also important to note that we’re calling our JavaScript using the “onclick” call, and passing it the name of our hidden div. Our JavaScript will use that single variable to do the rest of the work.

Now that we have our XHTML in place, let’s put together our default CSS:

.more {
	display: none;
	border-top: 1px solid #666;
	border-bottom: 1px solid #666; }
a.showLink, a.hideLink {
	text-decoration: none;
	color: #36f;
	padding-left: 8px;
	background: transparent url('down.gif') no-repeat left; }
a.hideLink {
	background: transparent url('up.gif') no-repeat left; }
a.showLink:hover, a.hideLink:hover {
	border-bottom: 1px dotted #36f; }

I’m technically doing far more styling than is necessary here, mostly for aesthetic purposes. The only truly important style is the “display: none;” rule on our .more class. This hides our extra content by default. The rest of the CSS simply adds a border to our div (the border is hidden by the display rule, but becomes visible later) and fancied up our show/hide anchors by putting down/up arrows next to them and replacing the standard underline with a dotted border. You could style these yourself however you like, and everything would still work just fine.

Next comes the JavaScript, which looks far more complicated than it is:

function showHide(shID) {
	if (document.getElementById(shID)) {
		if (document.getElementById(shID+'-show').style.display != 'none') {
			document.getElementById(shID+'-show').style.display = 'none';
			document.getElementById(shID).style.display = 'block';
		}
		else {
			document.getElementById(shID+'-show').style.display = 'inline';
			document.getElementById(shID).style.display = 'none';
		}
	}
}

Our JavaScript is doing four things here:

1. It checks to see if it can find an element with an ID that matches the variable we passed it.
2. If so, it checks to see if our “show” link is visible (this is where the ID naming convention starts to matter).
3. If the “show” link is visible, that means our content is still hidden. The JavaScript then hides the link and displays our hidden content.
4. If the “show” link is hidden, that means our extra content is currently visible. So it just reverses course, displaying our link again and hiding our extra content.

And that’s it! You can see a working example in action here.

Our job has been made much simpler by a few tricksy tricks. First off, we’re using the same function to show and hide our content, which saves us a bit of coding time. Our function simply checks on the state of things: if things are hidden, it shows them, and vice-versa.

Second, by using a defined schema for our element IDs (“example,” “example-show,” and “example-hide,” in our example above), we only need to pass our JavaScript a single variable. It then uses that variable to find all of our other elements and style them appropriately.

And finally, we put our “hide this content” anchor inside the hidden div. This means that we never have to set its display property: it’s hidden when the container is hidden, and visible when the container is. That saves us two lines of JavaScript and at least one line of CSS.

This technique could be used in loads of situations. Say for example that you have a Wordpress blog and the front page shows excerpts instead of the full article. You could use this technique to have the whole article on the front page for the search engines to find, visible to your users at the click of a button. Or maybe you have a complex form that could use some detailed in-page explanation, but you don’t always want the help content visible, eating up real estate when some users already know what to do. Or… well, anything, really. Let me know if you come up with any creative uses!

Great Resources Elsewhere: April 25 to May 02