Styling RSS News Feeds with XSLT

I have been using Chrome for my general browsing in the last few months and have noticed they have no support or predefined styling for RSS feeds, IE6 also doesn't support RSS and instead both print out the raw code. Most people presume IE6 users aren't interested in RSS but we should not presume anything and not rely on browsers to style your RSS for you. After giving myself a slap on the wrist I jumped onto Google and searched for the best way to structure and style my RSS feed.

The solution: Styling Your RSS with XSL and CSS

XSL stands for Extensible Stylesheet Language, XSL gives us the ability to restructure your feed if it is viewed by a browser with no RSS support. To take this one step further we add XSLT. Extensible Stylesheet Language Transformations (XSLT) is an XML-based language used for the transformation of XML documents into other XML or "human-readable" documents. Using XSLT I add a section at the top of my RSS feed explaining what it is and how the subscribe to it. This really helps users that stumble across the feed not knowing what to do with the information they are being shown.

My RSS feed in Chrome with XSLT:

How to Apply XSLT to your RSS Feed

Applying all this starts with adding a line of markup which will tell the browser where to find the XSL file:

<?xml version="1.0"?>
<!--The new line is below-->
<?xml-stylesheet href="rss.xsl" type="text/xsl" media="screen"?>
<rss version="2.0">

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
  <head>
    <title>Paul West's development tutorials and design articles RSS Feed</title>
    <style type="text/css">
    @import url(/css/rss.css);
    </style>
  </head>
  <body>
    <div id="explanation">
      <h1>Paul West's RSS Feed</h1>
      <p>You are viewing an <acronym title="Really Simple Syndication">RSS</acronym> feed. RSS feeds allow you to stay up to date with the latest news and features you want from websites.
To subscribe to it, you will need a News Reader or other similar device.</p>
      <p>Below is the latest Articles available from this feed.</p>
    </div>
    <div id="subscribe">    
     <h1>Subscribe to this feed</h1>
     <p><a href="http://www.paulwest.co.uk/news-feed/"><img src="../img/rss.png" alt="Paul West RSS News Feed" border="0" align="absmiddle"/> Paul West RSS News Feed</a></p>
<p>To subscribe to this RSS feed:</p>
<ul>
<li>Drag the orange RSS button into your News Reader</li>
<li>Drag the URL of the RSS feed into your News Reader</li>
<li>Cut and paste this pages URL into your News Reader</li>
</ul>
	</div>
    
    <div id="content">
    <ul>
      <xsl:for-each select="rss/channel/item">
      <div class="article">
        <li><a href="{link}" rel="bookmark"><xsl:value-of select="title"/></a></li>        
      </div>
      </xsl:for-each>
      </ul>
    </div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

The most noticeable additions of new code are xsl:for-each and xsl:value-of.

xsl:for-each pulls directly from the RSS feed and loops through each of the items stored in the feed exactly the same way you would do for an array in PHP.

xsl:value-of pulls the value for that one item. Using the XML key value for the select you can grab what part of the xml you want. Doing this allows formatting of the RSS feed that would not normally be possible just using standard XML. To learn more about XSLT please read the XSLT Specification

Use CSS to style and structure the RSS feed like you would any other HTML page. View my CSS file

You now have all the tools to create your own XSLT RSS page. I would advise doing this and not just presuming the users browser to do all the work.

*Note Firefox and IE7+ will override your style and use there default style.

Published 19.02.09

News Feed

Bookmark & Share

Tags

Comments