Styling XML Feeds in 2026

Back in the day if you had an RSS or Atom feed you could use the power of XSLT to transform the plain and rather unassuming view that a browser gave it by default into a moderately functional web page. XSLT was a tool to transform one dialect of markup into another.

This was back in the day when XML was the grand future of the web and XHTML was all the rage.

Spin forward 25 years and XSLT is looking a bit long in the tooth. Google, who apparently make one of the more popular browsers have decided that they no longer want to support it as a technology. Which is fine for many use cases, but if you want to make your website's feed look vaguely usable not so much.

By all accounts other browsers are also looking to deprecate the technology, because it needs maintenance and has had a few security concerns. Apparently big tech doesn't have a few quid to pay for open source XSLT processors to be supported. Presumably because they spent it all on AI data centers instead.

So I was looking at my own feed and thought it might be worth experimenting with plain old CSS to style it into something more readable. After all CSS has way more functionality than back in 2001, so it should be possible to use ::before and ::after to make things a little better.

What I came up with was this:

feed,
title,
subtitle,
link,
updated,
author {
    margin: 1rem;
    display: block;
}

feed {
    max-width: 60em;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, Helvetica, sans-serif;
}

subtitle::before {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.4rem;
    content: url('/images/rss.svg') / ""
}

subtitle::after {
    content: " - Copy the web address of this page into your feed reader to keep up to date."
}

id {
    display: none;
}

link::before {
    content: "Feed link: "
}

entry link::before {
    content: "Link: "
}

link::after {
    content: attr(href);
    font-weight: bold;
}

link+link {
    display: none;
}

updated::before {
    content: "Updated: "
}

author::before {
    content: "Author: "
}

entry {
    display: block;
    padding-bottom: 1rem;
    border-bottom: 2px solid #ddd;
}

title {
    font-size: 2rem;
    font-weight: bold;
}

entry content {
    display: none;
}

Basically using CSS generated content to add context to the page and then styling the elements to fix the width a bit, hiding the full text and make things more readable. You can see the reuslt on my feed.

The disadvantage of using CSS for this is you can't transform the links into clickable elements. You could hack this with Javascript, but I've left it at making them bold and giving some instruction on what to do with the feed.

Similarly you can't transform the dates into something more readable. You could probably add them in a transformed form to the xml as an attribute in another namespace and then show they with attr, but I'm not sure it's worth it.

This CSS is stored in an rss.css file and attached in the feed template by adding this line:

<?xml-stylesheet type="text/css" href="css/rss.css"?>

Overall it covers the main aim of making the feed look less ugly so I'm happy enough.