Styling an RSS/Atom feed with XSL
On my blog I link to my RSS/Atom feed for the convenience of people who use a feed reader. However, since this is an XML document, clicking on the link could be confusing for web visitors. I had previously looked into adding styles to the XML document to make it less scary, but the feed structure isn’t very conductive to normal CSS styles.
I thought I was out of luck on a useless exercise until I saw a post from Hsiaoming Yang. XML provides essentially a templating language that allows creating an HTML document from a raw XML file. By selecting the data needed, you can create just about any view desired.
<!-- excerpt of feed.xsl -->
Visit Website →
The XSL in that document was written for a podcast RSS feed, so I wrote my own for an Atom feed. Since the XSL is independent of the data, it should work for most Atom feeds with only minor modifications needed. The key changes are adding a reference to the XSL to your feed file. Then adjust the XSL file for any missing data or styling changes you’d like.
<!-- start of feed.xml -->
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="/assets/feed.xsl" type="text/xsl"?>
As powerful as XML is, it’s also not particularly developer friendly. I often found that if there was a syntax error or bad reference, the browser gave me almost no indication as to what was wrong. I ended up keeping my scope limited and not working too hard on styling since this isn’t a standard web page. That said, it felt like a usability win to be able to point lost visitors back to the main website in case someone does click on the feed link.
You can see the final product at www.ciccarello.me/feed.xml. Feel free to check out the commit for the full source.
See how responses are collected...
Respond from another site
Responses are collected from posts on other sites. Have you posted somewhere that links to this page? If so, share the link!
Respond via email
If you'd prefer to message me directly, send an email. If you'd also like your message to be visible on the site I can add it as a comment.
Software takes more than “the right technology”
Carpenters have lots of tools to pick from. Drills, impact drivers, circular saws, and miter saws; each tool may be really good for a specific purpose and a great carpenter will know when to use each one. However, the best carpenter is not necessarily the one who uses the most...
Birding in 2020
2020 Trends After a year of international travel that triggered my re-entry into bird watching, 2020 was a much more restrained year. While life events and global lockdowns kept me in the US, I enjoyed refining my birding skills and focusing on more birding from home. As the stress of...
Comment using Comment Parade
You can also use Comment Parade to create a guest post via Quill.