RSS with CSS [DOES NOT WORK]

Many put a lot of effort into the look and feel of their website, and then watch it reduced to plain-looking HTML in RSS readers.  After seeing Joi's feed reduced in this manner, I decided to try applying the rather elegant style from his site to his feed.  I met with success.  Here's how I did it.

Update: Sam Ruby provides some technical guidance; I've updated the RSS 2.0 and Atom instructions.  The RSS instructions may change again soon once a way is found to move the stylesheet out of the content and into the XML; the Atom feed is now HTML and XML compliant, however, readers will need to be configured to look for the stylesheet link.  Thanks, Sam!

Notes

Backup your templates before trying this.

If you're the auther of software that renders the HTML it receives from feeds, I strongly recommend reading Mark's post about sanitizing RSS feeds, and then following his advice.  This implementation of RSS stylesheets will be changing to be more like the Atom way, as the current method wreaks too much undesired havoc on readers.

Replace http://www.example.com/site.css with the URL to the desired stylesheet; for MovableType users, I recommend styles-site.css; for TypePad users, styles.css.

This is an experiment, and may break things; there's a bug with Feed on Feeds, for instance. The RSS approach violates the specification; however, your feed will validate as XML.

These directions will only work as expected if your feed is both full-content and HTML.  MovableType's default templates do not ship with either of these features; I strongly urge using the full-content, HTML enabled RSS templates — and verify the content type on the first line of each template if you're installing these, as they aren't UTF-8 by default.

After making these changes, please check to make sure that your feed is still usable; subscribing to the feeds in an RSS reader works well for this, as does FEED validator.

Tips on how to do this for other feed formats not listed below are welcomed; if I've left out your favorite syndication format, that can change.

RSS 1.0 and 2.0

Search for the <content:encoded> tag (or, if that's not present, the <description> tag) in your template; make sure it's the one that contains the entry body of your posts; for MovableType users, this would be the one that contains <$MTEntryBody>.  Immediately after the tag, before any other content, add the following text:

<![CDATA[<link rel="stylesheet" href="http://www.example.com/site.css" type="text/css" title="styled" />]]>

Atom

Search for the <feed ... > tag in your template; inside the tag, before the <entry> tag, add the following text:

<link rel="stylesheet" href="http://www.example.com/site.css" type="text/css" title="styled" />

Links: Brent set me down this path in the first place; Morbus discussed this, too; Anil talked about this a year ago; Liz researched CSS and Atom; Michael does a lot of research, including an actual proposal for styled Atom; Mark talked about styles and syndication; Gadgetopia's audience chimes in.

<b>Note:</b> This method is ineffective and must be replaced with CSS, styling, or acceptance of a plaintext fate.

Comments

[timsamoff]

Hi, Richard... Thanks for stopping by.

Everything seems to be cool for the moment. I've checked my feed with a number of RSS "desktop clients" and all seems well. In RocketInfo ( http://demo.rocketinfo.com/desktop/ ), a web-based reader, the CSS appears correctly. On ShortWire.com, another web-based reader, other CSS overrides mine, which appears to work fine. Bloglines.com the CSS gets overridden as well -- it also sticks everything into tables. Weird idea, but it looks fine.

Of course, all this being said, I don't use CSS on my page to do anything major like float images or put buttons into my actual entries, et cetera, but I can see how that might get screwed up.