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:
In this post, I’ll explain how to style RSS feeds and educate readers at the same time.
This is how the RSS feed for this blog looks like:
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>
<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