/blog/

2021 0310 RSS styles

TIL that you can apply CSS to XML. This allows for styling your RSS feed.

What does it look like?

See mine here.

By default, your browser might show an unstyled RSS feed like this:

Unstyled RSS feed

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):

My RSS feed with CSS applied

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:

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.

Update: as of 2023-09-15, Firefox does show the styled feed now. Progress!

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.

Responses

Webmentions

Hosted on remote sites, and collected here via Webmention.io (thanks!).

Comments

Comments are hosted on this site and powered by Remark42 (thanks!).