Improving an XML feed display through CSS and XSLT

XML feeds have become a common way for people to keep updated on their favorite websites, no matter what specification they follow (RSS, Atom, etc.). XML files suffer though from poor usability by nature as they are not friendly to look at in the browser. Your feed handler (e.g.  FeedDemon, FeedReader, NewsGator, etc.) will, of course, display them in a nicely formatted way, but in this article we’ll see two ways to spice up their boring browser display:

1. Using CSS definitions on the individual notes
2. Applying an XSL Tranformation file

For our example, we’ll assume that we are serving feeds in RSS 2.0 format, but the principles discussed should apply for any type of XML feed.  You can rest assured that this type of formatting will not change the way your readers use your feeds. I first got this idea after reading a blog entry by Pete Freitag.

First, the original XML feed

So, Let’s a take a look at a typical RSS 2.0 feed: an example of a possible “latest articles” feed for this site:

We are not doing anything new here. We are following the RSS 2.0 specification to create this feed: a channel wrapper with its feed properties, including as many item nodes as we want of the latest posts (with their own properties). Here’s what this feed looks like through the browser:

Basic yes, friendly to look at no. So, let’s see how to improve this display.

Formatting through CSS

The principle here is that since a feed is made up of XML nodes, we can apply CSS formatting on them to change the way they display in the browser. First we need to add the CSS reference inside the XML file. This can be a full URL with the domain, or simply a website relative address:

Under channel, we have the mandatory title, which is the feed title. To edit the display of this node to a bigger text size we can simply add this to our CSS:

We can follow this principle to format the rest of the notes.  One issue that we have to keep in mind is that if there is more than one node named title, then they will all inherit the same properties. In the example shown, the second tag will also display with font size 140%. To fix this, we will need to create a separate CSS property for it and change the size:

Our feeds most often contain properties that we may not necessarily want to have them display in our improved version. So. we can group all nodes that we want to hide and change their display property to hidden. The order of the nodes in the XML file will be maintained, unless you can figure out a way to change this through CSS.

Here is a complete CSS file as an example:

Here’s a screenshot of the resulting output:

XSL Transformation

Applying an XSL stylesheet to the XML feed has the advantage of being able to fully customize the display, like being able to add links or change the order of the nodes. The transformation needs to happen on the client so that the XML remains intact.

First we add the reference to the XSL file inside the feed:

We can add the XSLT specification, as well as leave the CSS link there as well. Having both added is perfectly fine, as only one of them is going to be used in the end.  If the browser understands XSL, then it will use that and ignore the CSS. I am not going to explain here how to create an XSL transformation file, you can find tutorials on that elsewhere. Instead, let’s see the complete XSL file:

The important thing to notice here is that you can output complete HTML, together with links to external CSS files, for even improved customization of the display. If you already have a stylesheet that you use on your site you can make a reference to it, and use it in the XSL file to create a similar look and feel. This is what is shown above, with the link to the CSS file “xsl.css“. There are also many ways to define an XSLT file, like using templates, mine is simply one of them and not necessarily the best one. It’s simple enough though that it does the job I want. Use the code as it is or modify it to suit your situation. Here’s a screenshot of the resulting browser output:

The display now looks a lot better, and the titles are actually active links to the articles.

In this article I have shown two techniques to improve upon the browser display of your XML feeds, no matter what specification they follow. One involves the use of CSS and the other a complete XSL transformation. The CSS method is easy to implement, while the XSLT offers great customization. I am sure that by applying these techniques, your users will be pleasantly surprised when they get to your XML feeds.

Download Source Code