In this post, I'm going to show you how to stylize an hCard with CSS. An hCard is a specification which defines a new type of microformat. In simple terms, it is defined as:
hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard (RFC2426) properties and values in semantic HTML or XHTML. hCard is one of several open microformat standards suitable for embedding in HTML, XHTML, Atom, RSS, and arbitrary XML.
In our example, we're going to stylize the following hCard:
<div class="vcard">
<a class="fn org url" href="http://onwebdev.blogspot.com/">onwebdev</a>
<div class="adr">
<span class="type">Work:</span>
<span class="street-address">Some address</span>
<span class="locality">A City</span>,
<abbr class="region" title="Region">A Region</abbr>
<span class="postal-code">000000</span>
<span class="country-name">Italy</div>
</div>
<div class="tel">
<span class="type">Work</span> +39-00-00-00
</div>
<div class="tel">
<span class="type">Fax</span> +39-00-00-00
</div>
<div>Email:
<span class="email">gabriele.romanato@gmail.com</span>
</div>
</div>
with the following CSS styles:
.vcard {
height: 100%;
border-top: 3px solid #000;
border-bottom: 2px solid gray;
padding: 0.4em 0;
}
a.url {
display: block;
height: 100%;
color: #339;
font: 1.3em Georgia, serif;
background: url(img/warning.png) no-repeat 0 0;
padding-left: 19px;
border-bottom: 1px solid gray;
}
.adr {
width: 90%;
margin: 10px auto;
padding: 5px 5px 5px 19px;
background: #eee url(img/name.png) no-repeat 0.3em 0.5em;
border-left: 4px solid gray;
border-right: 4px solid gray;
}
.adr span {
font-style: italic;
padding: 0 0.3em;
}
.adr span.type {
display: block;
height: 100%;
font: normal 1.3em Georgia, serif;
color: #666;
border-bottom: 1px dashed;
}
.tel {
height: 100%;
margin-bottom: 10px;
padding: 5px 0 5px 19px;
border-bottom: 1px dashed gray;
background: url(img/subject.png) no-repeat 0 0.5em;
}
.tel .type {
font-weight: bold;
}
div.tel + div.tel + div {
height: 100%;
margin: 10px 0;
padding: 5px 0 5px 19px;
border-bottom: 1px dashed gray;
background: url(img/email.png) no-repeat 0 0.4em;
font-weight: bold;
}
div.tel + div.tel + div > .email {font-weight: normal;}
As you can see, there's nothing really difficult here. Of course this is only a basic example, but you can extend it further. You can see the final result here.
Microformats are designed to work with XHTML by adding semantics to some of its elements. There's nothing wrong with this approach, but I think that we could extend its design principles to make Microformats work with XML. For example, taken the hCard specification, we could write something like this:
<?xml version="1.0" encoding="utf-8"?>
<vcard>
<tel>
<type>home</type>
<value>123.123.1234</value>
</tel>
</vcard>
As you can see, our root element is actually vcard, followed by some of the elements defined in the hCard specification. With this approach, our document can actually be used in a wide range of possible scenarios, like mobile directories, email and chat clients and so on. Again, this proves how the extensibility of XML can be used to write new languages which allow us to go beyond the limits of some existing standards.