RSS feeds with a Safari CSS Theme

Screenshot of Safari RSS

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

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 with CSS Feed

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!

  • Make a backup of your RSS/Atom templates.

  • Add the xml-stylesheet tag into the second line of your RSS or Atom feed.

    RSS 2.0:

    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <?xml-stylesheet href="feed.css" type="text/css"?>
    <rss version="2.0?>
    <channel>
    <title>starvingartist</title>
    ...

    Atom 0.3:

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

    Safari-Themed Atom with CSS

    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. :)

    4 Responses to “RSS feeds with a Safari CSS Theme”

    1. fiz Says:

      That’s cool. I had never heard of XML style sheets. :)

    2. Ben Says:

      Is it possible to get this style sheet to work in firefox Sage Rss Reader extension, I really like the design.

    3. starvingartist Says:

      Ben: I haven’t used the Sage RSS/ATOM feed aggregator before, but I believe you can modify the HTML templates and the CSS file by editing the files under your Sage’s “chrome://sage/content/res/” folders (where ‘chrome’ is located depends on where you installed it).

      You’ll find “template-html.txt”, “template-item.txt” and “sage.css” to modify.

    4. starvingartist Says:

      For those still looking for a Sage skin, there’s a Safari RSS Skin for Sage available for download at deviantART. Instructions notes are available in the artist’s comment area.