If you’ve been in the web industry for even just a few days, I’m sure you’ve heard the mantra “content is king.” Whether you agree with it or not, it would be impossible to have any sort of website without content.
And content is what we’ve focused on in this book:
• How to identify content that is well suited for microformats
• How to structure content with POSH
• How to enrich your content by publishing microformats
But content alone just isn’t enough, especially with today’s web filled with tons of competing information. Content should—or, I hazard to say, must—look good. I mean, even kings have fancy clothes, right?
This is where CSS comes into play. If you are following today’s web standards (if not, then shame on you), you are using CSS to control the look of your website. And microformats do not restrict your ability to use CSS. In fact, the sets of class
values from microformats provide nice, semantic styling hooks you can use instead of or in addition to custom class
es.
The process of styling microformatted content is the same as that of styling non-microformatted content. If you have the CSS ability, you can style microformats any way you can imagine. I’ll prove it to you.
My friend Jason Nakai worked up a few designs for some of the microformat examples in this book. I’ve translated each into CSS, using the markup from the examples so you can see the wide range of presentation options you have and, hopefully, imagine a few more for your own content.
Now, I won’t be going into detail about the CSS. I’ll just be showing you the style rules and end results. Remember, this book is about microformats, not CSS.
Some of the easiest microformats to style are those used to define links, primarily because links are so simple. A link is just some text, and most CSS for links focuses on color, decoration such as underlines, and font weight.
A trend I’ve seen for some links, though, includes little icons preceding certain links to give users more context about those links. Our link-based microformats are perfect cases to apply this little design element.
As you may remember, XFN is really just one or more specific rel
values assigned to links, indicating a social relationship with the people behind those links. If you’d like to make your XFN links stand out from your other links, you can use CSS attribute selectors to present an icon before these links.
Lucky you (and me, since I suck at pixel work), Wolfgang Bartelme created a few sets of microformats icons you can use for just such a purpose: http://bartelme.at/journal/archive/microformats_icons.
I’m going to use one of his XFN icons to style an example from Chapter 4 (pages 67–68) for a link to a friend
(remember that value?).
The CSS is extremely simple. I add a few declarations to make the link text itself look nice. Then, using attribute selectors, which I can use to target links with specific rel
values, I indicate the icon should appear before the link text:
And with that little bit of CSS, any links that have a rel
value of friend
will appear as such (Figure 12.1).
We can take this approach and apply it to any links with specific attribute values, including VoteLinks, which uses the rev
attribute. Wolfgang Bartleme’s microformats icon collection includes a set for VoteLinks (which are adorable), but you can use anything you like. For this example from Chapter 3 (page 55), we’ll use the one Jason made for us.
Once again, CSS attribute selectors come to the rescue:
So, without having to add any class
es to my link, I get this cute little icon (Figure 2.2) before any links assigned rev="vote-against"
:
It isn’t really common practice to style contact information as a business card on a website, but that doesn’t mean you can’t do it. So let’s! We’re going to use the hCard for the Badass Tattoo Company from Chapter 6 (pages 131–140).
Here are the styles I chose to use:
I hope you noticed that the CSS for this example only uses the elements of my markup and the class
es from hCard as the selectors. I didn’t have to add any additional markup, class
es, or id
s.
I will mention, though, that the CSS for this business card design (Figure 12.3) really only renders as intended in Safari, Chrome, and Firefox due to the rotated text. So, this may not be an ideal implementation. Nonetheless, I’m digging the text rotation.
And, of course, IE 6 and 7 have some issues with positioning on top of not supporting the text rotation. But that’s what conditional comments are for, right? And there are some filters you can use to get IE to cooperate with the text rotation.
Calendars, just like any content, can come in a wide variety of presentational flavors. For the <table>
-based calendar from Chapter 7 (pages 181–192), we are going to create a clean and simple grid appearance.
Here are the styles I chose to use:
Both IE 6 and IE 7 bork just a bit on this CSS. And interestingly (or not if you’ve been dealing with IE for a while), the problems are the same:
• Neither display the <caption>
element positioned absolutely inside the <table>
. Instead, the <caption>
appears immediately before the <table>
.
• Both render the <h3>
content in a larger font size than is declared, apparently ignoring the cascade and the font size applied to the containing <div>
.
For me, these issues aren’t deal breakers. However, especially if you work for an organization that requires IE 6 to look as close to the other browsers as possible, these issues should be resolved—to an extent.
Personally, I’d leave the <caption>
display as is. The content renders just fine, and that is what is truly most important. As for the font size, I would use conditional comments to create IE-specific CSS.
For this look, I only had to add a couple of additional class
es to certain <table>
cells. For the <td>
that would contain the current day’s information, I added class="today"
. And for the last few <td>
s that aren’t part of the displayed month, I added class="otherMonth"
. I also added the cellpadding
attribute to the <table>
.
But nothing additional was needed for the hCalendar data itself. I just use the vevent
property as my styling hook for that information. And voilà (Figure 12.4):
Now let’s style an hAtom example, using the fictional Homer Simpson blog post from Chapter 9 (page 228–232).
Here are the styles I chose to use:
I didn’t have to add a single class
, id
, or additional markup element for this presentation (Figure 12.5):
However, as in the hCard example, I’m using text rotation, which renders only in Safari and Firefox. So again, as in the hCard example, this particular CSS might not be ideal for you folks seeking cross-browser consistency. The rounded corners, though, nicely degrade to square corners for browsers that don’t support border-radius
.
With the expected exceptions of IE 6 and IE 7 (both of which choke a bit on the positioning), the rest of the design translates identically across browsers.
Last, but certainly not least, we’re going to style the hRecipe example from Chapter 11 (page 263).
Here are the styles I chose to use:
To achieve this look, I did have to add a nonsemantic <div>
inside my <div class="hrecipe">
, containing all the other content. I also added a class
to one of the <h2>
s (instructHead
), so I could target it for the image replacement.
Other than that, I relied entirely on the elements from the original markup example and the class
es from the hRecipe example.
This particular look renders identically across standards-compliant browsers with the exception of the rounded corners, which display only in Firefox and WebKit browsers.
IE 6, as one would expect, doesn’t recognize the advanced selectors and, as I’m sure you are aware, doesn’t support alpha transparency in the PNG used for headings.
But the content still renders beautifully; users can get the information they need. If IE 6 needs to look closer to how the other browsers render the presentation, turn to conditional comments.
These are but a few examples of different looks for microformatted content. And while you may prefer a different approach to your CSS to achieve these looks, the point is anything you can do with CSS can be applied to microformatted content.
You are limited only by your imagination and your CSS skills.