RSS.Style logo RSS Style


What is this?

Every website that updates routinely should have an RSS or Atom news feed that people (and search engines) can use to watch for changes.

By default, these files look horrible when a human looks at them in a browser. But there is a simple way to make them look better: RSS Style!

If you are not a webmaster, checkout out What is a new feed? and Picking a news reader for how to get started!

How do I use it?

In your feed file (often feed.xml but see below) add a line to the top (after the <?xml...?> but before any real xml) of with one of the styles here on RSS Style:

Questions and Answers

How does this work?

The xml-stylesheet processing instruction tells the browser to use the XSLT stylesheet to transform the raw XML into HTML. This has been supported by all major browsers for a long time.

Why is the snippet so huge?

The entire XSLT stylesheet needs to be included because of a bug in Chrome that prevents cross-domain loading.

What if I don't want a huge base64-encoding blob in my feed?

You can host the XSLT file yourself and point to it directly:

  1. Download the appropriate XSLT file and host it next to your feed (/localcopy.xslt in the example below).
  2. The code is MIT licensed: customize to your liking (though XSLT is not for the faint of heart IMHO)

Are there other ways to make my feeds look nice?

Yes! You can also use a CSS stylesheet. I plan on having some examples here, but in the meantime check out Pete Freitag's overview for making your own.

Links

Examples

Website News Feed Notes
Hacker News (front page) before after missing self link, HTML page discovery link is relative analyze
Hacker News (Show HN) before after title doesn’t have ‘Show HN’, missing self link, HTML page discovery link is relative analyze
Fly.io before after bad self link, HTML page is missing the discovery link analyze
Jacques Mattheij before after bad self link analyze
Dave Winer before after missing the self link analyze
Dan Nguyen before after insecure self link analyze
Thomas Schranz before after self link is different, though it works analyze
Colin Wright before after already has styling! CSS analyze
Hillel Wayne before after Opens ‘Save as’ dialog analyze
Patrick McKenzie before after analyze
Allen Downey before after Opens ‘Save as’ dialog analyze
Julia Evans before after analyze
Thomas Park before after Opens ‘Save as’ dialog analyze
Kyle Kingsbury before after Opens ‘Save as’ dialog analyze
Mark Nottingham before after Opens ‘Save as’ dialog analyze
Tim Bray before after Opens ‘Save as’ dialog analyze
John Graham-Cumming before after Opens ‘Save as’ dialog, self link mismatch but working analyze
Dan Luu before after bad self link analyze
Steve Klabnik before after missing the self link analyze
Stavros Korokithakis before after discovery vs self link mismatch but working analyze
Terence Eden before after Has styling, but not exactly pretty. analyze
Logo of the day before after Perfect, since it is my sample for testing. analyze
Try it on your own feed! Problems?Feed Analyzer
Share: