Learn to Write Professional CSS

Pulling Information from a Page with Microformats Using the hCard example above and an extension add-on for the Mozilla Firefox browser, it is possible to demonstrate a simple example of how powerful microformats can be. Michael Kaply at IBM has created an excellent extension called Operator, which you can download and install from the Mozilla Add-ons site: https://addons.mozilla.org/en-US/firefox/addon/4106
Once the extension is installed, users have either a new toolbar or a status bar icon that becomes active when visiting a Web page with data embedded in a microformat. The toolbar allows a multitude of ways to interact with a variety of microformats.

Since this example is an hCard, the Operator extension allows the user to export the embedded contact information to a vCard file, which can be imported into any software package that accepts that format, such as Microsoft Outlook. It is an incredibly easy and powerful way to add information to an address book directly from a Web page, particularly in a business environment.

The specifications being created at microformats.org are not only an excellent source of inspiration for class names, but they may pave the way to a more semantic Web. By marking up content of certain types in POSH and standardized ways, the content is given meaning. Tools embedded in Web browsers today (there are extensions for Mozilla Firefox already) can call out that information and enable users to do useful things with it, such as adding appointments to their calendar software or adding users’ contact information to their address books.

Future tools may do even more. Search aggregators that mine for data such as reviews of products, resumes, or even syndication of articles are a distinct possibility.

There are a number of microformats already standardized, and more in development every day. Some of these include:

• hCalendar format for date and time (appointment) type information
• hCard format for contact information
• XOXO format for outlines
• hAtom format for syndication of blog articles
• hResume format for resumés
• hReview format for reviews

Not including styles in the global files has both advantages and disadvantages. The technique is a powerful approach from a maintenance and distributed-team standpoint, where multiple teams may need to import CSS files that are from a parent brand or some similar scenario. Additionally, from a CMS or template-based site structure, this has the added benefit of being able to add new CSS files without updating the XHTML site templates, because only a change to the CSS link files is required. Also, from a performance standpoint, if the forms rules are large in size, users do not need to download that data before it’s needed.

However, this performance consideration should be carefully considered, because there are also performance downsides. Essentially, for a given page a Web browser and a server are going to have to create and execute lots of HTTP requests.

To load a single page with the second example above, four HTTP requests are issued—which puts added burdens on both the client Web browser and the Web server. Multiply that by the full number of users hitting a site at a given moment and the number grows exponentially. This is one demonstration of how the CSS setup alone can impact page load times and site performance. The pros and cons of this type of approach should be carefully considered before being implemented.

The first two examples in the previous section are similar to many others commonly found online. The second of the two comes from a Web author who thinks he is doing the right thing by pulling presentation information into CSS classes.

It is a good start, but it does not convey structure or meaning. It also continues to rely on the presentation aspects of the <p> tag without marking any text as a paragraph.

The third example is superior in many ways:

• The content is easier to read in the code.
• The article is surrounded by a <div> element with a class of article, and the credit section is surrounded by a class of credit. This breaks the portions of the code up from others and allows the usage of CSS, which does not need extra classes added to the markup. A single class per section is easier to remember, use, and document than several.
• Presentation elements such as the bold <b> tag have been dropped in favor of meaningful code. Additionally, usage of <em> for emphasis as opposed to italics is preferred.

What about the following:

<span class=bigHeader>My Online Article Title</span><p>
<span class=dateentry>May, 2007</span><p>
<span class=regulartext>Hey everybody, welcome to my article. Today
we’re going to be talking about:<p>
<span class=list>
Web standards-based markup<br>
Cascading Style Sheets<br>
XHTML</span><br><br>
Let’s get started!
<table class=”box”>
<tr><td>
<span class=”italics”>About the author:</span><br><br>
<a href=”http://navigationarts.com” class=authorHeader>Rob Cherny</a><br>
Lead Developer<br>
NavigationArts, LLC<br>
7901 Jones Branch Road<br>
McLean, VA, 22102 United States of America<br>
703.584.8920
</td></tr>
</table>

This code uses CSS and pulls content and presentation information apart. So what’s wrong with it and the first example? For starters, in both these examples, the code as it relates to the content is meaningless.

Even more so:

• The first example uses the <font>, <b>, and <i> presentation elements, all of
  which are deprecated.
• The second example features usage of <span> elements around all the content items, which does not convey that the information is a header, paragraph text, or list.
• With the <span> elements, the usage of the bigHeader class implies presentation information in its name.
• The <p> tags are being used at the end of each line and do not explain what a paragraph is in the document so much as demonstrate what its presentation attributes might do: create a double line break. The list class on the last <span> is just odd when there are perfectly good XHTML elements for lists: <ol> and <ul>.