Microformats are a simple way to structure informations in (X)(HT)ML.
This CSS allow to show the Microformats bits contained in a page. View a page.
Design principles
- Simplicity: Use only a CSS, no image, nothing else
- Portability
- Be unobtrusive but visible
- Use the green color to remind of the logo
- For inline elements, one clue is enough
- For block element, a start and end element is needed but not sufficient. That is the reason for the border.
Usage
To install, just copy the file "microformats.css" in the directory next to your CSS, then at the end of your CSS add a line with
@import "microformats.css";
Camino/FireFox
The Camino default style sheet is in
~/Library/Application Support/Camino/chrome/userContent.css
The FireFox default style sheet is in
~/Library/Application Support/Firefox/Profiles/profilename/randomstring.default/chrome/
And restart Camino/FireFox
Thunderbird
~/Library/Application Support/Thunderbird/Profiles/profilename/randomstring.default/chrome/
Safari
Put the css file anywhere you like (your username/Library/Safari/ folder might be a good place) and then select it in Preferences > Advanced > Style Sheet. Restart Safari.
Others
Just find the default local CSS and add the line
@import "microformats.css";
at the end of the file.
Update 2008/12/4: see an example of use of microformat
Notes:
Idea from the DotClear style sheet.
Some informations found on http://www.hicksdesign.co.uk/journal/highlight-microformats-with-css found via the Microformat wiki