RSS feeds with a Safari CSS Theme
Safari RSS is Apple’s default web browser for Mac OS X Tiger. As indicated by its name, it now features a built-in RSS (and Atom) reader. Aside from the powerful feed indicator and notification functions, Apple has created an elegant design as an alternative to complicated-looking XML-based feeds. While the XML format is intended to be human-readable, Apple has coated it over with blue accent gradients and hidden all the tags. For many users, this will be the defining look of RSS/Atom feeds.
We can make our RSS/Atom feeds look similar to the Safari RSS look. All we need is the proper CSS file linked as a stylesheet from our RSS/Atom XML file.
When you load an XML feed in a web browser, it’ll often display raw XML tags in a hierarchy tree. Users who unknowingly click on an orange RSS button experience this. Why confused people with a dead end page?
Other websites have began to style their XML feeds with CSS. Dive Into Mark’s Atom Feed mimics his website. Sam Ruby also posted an Atom+CSS example. All current Blogger/Blogspot Atom feeds are greeted with CSS-styled XML. In addition, Atom’s inclusion of an
tag can let users know that it is designed to be read in a syndicated feed reader.
Make it So!
Make a backup of your RSS/Atom templates.
xml-stylesheet tag into the second line of your RSS or Atom feed.
<?xml version=\"1.0\" encoding=\"utf-8\"?> <?xml-stylesheet href="feed.css" type="text/css"?> <rss version="2.0?> <channel> <title>starvingartist</title> ...
<?xml version=\"1.0\" encoding=\"utf-8\"?> <?xml-stylesheet href="feed.css" type="text/css"?> <feed version="0.3? xmlns="http://purl.org/atom/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:lang="en"> <title>starvingartist</title> ...
This is a syndicated feed, designed to be read in a syndicated feed reader. I recommend BlogLines (web-based), SharpReader (Windows), or NetNewsWire Lite (Mac OS X). Just paste the address of this feed into the feed reader to "subscribe" to this feed, and you'll always be up to date with the latest news.
Upload the following customized CSS file (feed.css) and image files (bgside.png, bgtitle.png, info.gif) into the same directory as your RSS and Atom XML feeds. This styles your XML into the Safari look.
Load up your XML Feed files. Now, with the CSS file, your RSS 2.0 or Atom 0.3 should look like this:
At the very least, raw XML is not displayed to user. They’re presented with something much more simplified and helpful. It also shouldn’t affect syndicated feed readers, since the XML stylesheets aren’t usually applied. While this currently works only for RSS 2.0 and Atom 0.3 XML feeds, it can be modified to work with any other XML document. Client-side XSL Transformations could be used to modify the XML much further than CSS styles. It’s currently being used by services such as FeedBurner and is supported in IE5/Win, Mozilla and Opera 8.
Notes: There’s some extra padding issues with IE that are still unresolve. And I’m having problems styling RSS 1.0 feeds. Anyone have any ideas? Feel free to play around with it.