Style your RSS feed

Style your RSS feed

by

Send to HN

RSS is not dead. It is not mainstream, but it’s still a thriving protocol, especially among tech users. However, many people do not know what RSS feeds are or how to use them. Most browsers render RSS as raw XML files, which doesn’t help users understand what it’s all about:

XML example as rendered in Chrome

In this post, I’ll explain how to style RSS feeds and educate readers at the same time.

XSL(T) to the rescue

This is how the RSS feed for this blog looks like:

A styled RSS feed preview. It contains an alert box with a short description about RSS feeds and a list of blog post titles and dates.

To style a raw XML file in a browser, you have to provide styling information. You can do that by attaching an xml-stylesheet processing instruction within the RSS feed:



<feed xmlns="http://www.w3.org/2005/Atom"
      xmlns:media="http://search.yahoo.com/mrss/">
  ...
feed>

The href attribute specifies a URL to a valid XSL file. You can check out mine for inspiration. Here’s the gist:


<xsl:stylesheet version="3.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:atom="http://www.w3.org/2005/Atom">
  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
      <title>
        RSS Feed | <xsl:value-of select="/atom:feed/atom:title"/>
      title>
      <link rel="stylesheet" href="/assets/styles.css"/>
    head>
    <body>
      <p>
        This is an RSS feed. Visit
        <a href="https://aboutfeeds.com">About Feedsa>
        to learn more and get started. It’s free.
      p>
      <h1>Recent blog postsh1>
      <xsl:for-each select="/atom:feed/atom:entry">
        <a>
          <xsl:attribute name="href">
            <xsl:value-of select="atom:link/@href"/>
          xsl:attribute>
          <xsl:value-of select="atom:title"/>
        a>
        Last updated:
        <xsl:value-of select="substring(atom:updated, 0, 11)" />
      xsl:for-each>
    body>
    html>
  xsl:template>
xsl:stylesheet>

This code is inspired by pretty-feed-v3, but I’ve adopted it for the Atom specification.

The XSL file transforms the XML feed into a valid HTML document that any browser can render. You can use any information included in the XML file and put it into a new markup structure. You can even include content that is not part of the XML feed. A perfect use case is to include a note about what RSS feeds are and how to use them (as shown in the example above).

You can define inline CSS styles with a regular