starvingartist

Screenshot of Safari RSS

Safari RSS?

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.

Screenshot of Raw XML in Mozilla Firefox

Some Background

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?

Screenshot of Blogspot Atom + CSS Feed

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!

<?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.

Load up your XML Feed files. Now, with the CSS file, your RSS 2.0 or Atom 0.3 should look like this:

Safari-Themed Atom with CSS

So What?

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.

This entry was posted on Tuesday, July 6th, 2004 at 4:13 am and is filed under Technology, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.