Migrating my RSS feed off XSLT

rssxsltastro

I opened my RSS feed in Chrome and got a red banner across the top of the page:

This site uses XSLT; that functionality is being removed from this browser very soon.

Chrome is removing XSLT. It stops working on Chrome stable in version 158, on November 17, 2026. I’d been using an XSLT stylesheet to turn the raw feed XML into a styled page, so anyone who clicked the RSS icon in my footer saw something readable instead of a tree of tags.

What the stylesheet was doing

The feeds are generated by @astrojs/rss, which takes a stylesheet option and emits an <?xml-stylesheet?> processing instruction at the top of the feed.

const response = await rss({
  title: 'Thought Eddies',
  // ...
  stylesheet: '/rss-style.xsl',
});

The .xsl file rendered the feed as an HTML page with my site’s colors and fonts. I had two of these, one for the full site feed and one for the per-section feeds, nearly identical, together about 600 lines of XSL and copied CSS that I had to keep in sync with the site theme by hand.

Feed readers ignore the stylesheet entirely. It only exists for the person who opens the feed in a browser. So when XSLT goes away, subscribers aren’t affected. The only thing that breaks is the “I clicked the RSS icon, now what?” experience.

The options

  1. Remove the stylesheet and let the browser show raw XML.
  2. Swap the XSLT for a CSS stylesheet. Browsers still apply CSS to XML documents, and that is not being removed.
  3. Load Google’s XSLT polyfill, which is libxslt compiled to WebAssembly, so the existing .xsl files keep working.
  4. Stop sending people to the XML at all and link to a normal HTML page that explains the feeds.

The polyfill keeps everything looking the same, but it adds a WebAssembly dependency to preserve a technology the browser vendors are actively walking away from. I did 1, 2, and 4.

What I did

The RSS icon in my footer now links to /feeds, a regular page on the site that lists each feed and explains how to subscribe. That page uses the site’s real styles, so there’s nothing to keep in sync.

I deleted both .xsl files and pointed both feeds at one CSS file.

stylesheet: '/rss-style.css',

@astrojs/rss only adds type="text/xsl" when the path ends in .xsl. For any other path it omits the type, and both Chrome and Safari treat an untyped xml-stylesheet as CSS.

CSS for XML works like CSS for HTML, except the element names are whatever your document uses. Everything starts out inline, so the first step is hiding all the elements and then showing only the ones I want.

channel > *,
item > * {
  display: none;
}


channel > title,
item > title,
item > pubDate {
  display: block;
}

From there, I copied the color, font, and spacing values from my site’s theme and styled the feed to look like my feed pages: a centered title, the date above each entry, and a fading divider between items. prefers-color-scheme handles dark mode, since the XML document can’t see my site’s theme toggle.

There’s no HTML, so the explanation text lives in pseudo-elements:

channel > title::after {
  content: 'RSS Feed';
  display: block;
  font-family: var(--font-mono);
}

The feed is readable in a browser, the warning is gone, and anyone who clicks the RSS icon lands on a real page that tells them what to do with it.

raweditcommit