TIL that you can apply CSS to XML. This allows for styling your RSS feed.
What does it look like?
By default, your browser might show an unstyled RSS feed like this:
If styling is applied, it can look more or less like anything. Here’s a screenshot of my feed with styling applied (or you could just click on the link above):
This is pretty nice. It links to my subscribe page, and it looks pretty good.
Other examples on the web
There are some other examples of well-styled RSS around the web:
- A very nice style which I have copied for my site https://lepture.com/rss.xsl (related blog post)
- A cool style that shows poetry https://interglacial.com/~sburke/sburke_foaf.xml (the related blog post has many other examples as well)
How do you do it?
First, you need an XSL transformation.
This will contain CSS in a <style> tag just like HTML,
as well as some weird XML things.
The weird XML things are pretty powerful, however –
with constructs like <xsl:if> and <xsl:foreach>.
You can also add entire <div> elements anywhere you want.
See my RSS XSL file for one example, and look through the links above for more.
Your RSS XML file must contain an <?xml-stylesheet ...> tag
in between the <?xml ...> tag (normally the topmost line)
and the <rss...> tag (which contains your feed metadata and all posts).
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<?xml-stylesheet href="/rss.xsl" type="text/xsl"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
And that’s it!
Not supported everywhere
Unfortunately, some browsers will refuse to show XML documents, which means they refuse to show RSS feeds. Firefox just downloads it, while Safari will kick you over to any installed RSS readers if you have one.
Updates:
- 2023-09-15: I noticed that Firefox does show the styled feed now. Progress!
- 2024-11-14:
I learned that Safari will show the page inline
if you set the
X-Content-Type-Options: nosniffheader
Styling the feed in a browser, not a feed reader
It’s important to note that this is styling the view of the RSS XML file in a browser, and not the content of your RSS feed in a feed reader.
This has no effect on how my feed looks in Feedbin or NetNewsWire or any other feed reader. It only affects how (some) browsers will display the RSS feed file itself.