Richard showed me how to put my style sheet (Which Boris made) in my feeds (RSS 1.0/RSS 2.0). Take a look at it in your news reader and tell me what you think. Also, if you think this is "funky" please let me know why. It is sort of a weird thing, but at least in NetNewsWire, it looks pretty good.

Richard describes how to do it on his blog.

39 Comments

CSS in RSS does indeed look good in NetNewsWire. I wish more would do it. Do you have a pointer on how to do it?

In Feed on Feeds (open source web based news reader) your stylesheet over-rides the design of everything on the page. It's probably the fault of FoF, but it's pretty annoying none the less.

In sharpreader (http://www.sharpreader.net/) it doesn't work correctly. Somehow the opening bracket is converted to < so the tag is just displayed in cleartext on top of every post. Most likely a problem with the reader, i suppose. Nonetheless i welcome this addition, i always thought something like this would be great for further feed-"branding" and to help the reader keep track of who he's reading. Now if only it'd work in my newsreader...

I think this is a mistake for several reasons. First, I see you use linking to import your css, which is required to be declared within the tag in html. The tag in RSS is equivalent to the body tag, so this is invalid markup.

Also, by using CSS you start catering to specific aggregators and go away from what RSS is all about: SIMPLE syndication. News aggragtors should allow users to customize layouts, like Feed Demon for example, instead of relying on the feeds.

Personally, I find it quite annoying to have my style preferences overriden by others.

Cheers.

I've posted a bug report to the Feeds on Feeds project, so that they're aware this can happen, as well as mentioning this problem at the tutorial.

It does indeed sound like SharpReader is converting something unexpectedly. I'll see if I can contact the author.

Sorry, some tags were stripped

I think this is a mistake for several reasons. First, I see you use linking to import your css, which is required to be declared within the HEAD tag in html. The DESCRIPTION tag in RSS is equivalent to the body tag, so this is invalid markup.

Also, by using CSS you start catering to specific aggregators and go away from what RSS is all about: SIMPLE syndication. News aggragtors should allow users to customize layouts, like Feed Demon for example, instead of relying on the feeds.

Personally, I find it quite annoying to have my style preferences overriden by others.

Cheers.

Wes, would you have any recommendations on fixing the markup? Perhaps an inline <style> with an @import command? I'm open to suggestions; this is all a big experiment.

As for modifying your styles, yes, this feature would bring an end to the era of all articles looking the same -- something I find I enjoy in my RSS as well. I'm not sure how I feel about seeing this widespread, but I could very well see applying the print stylesheets from blogs to the RSS feed; it's normally much more sane with regards to using less formatting, colors, etc.

In the end, I suspect that a mini-stylesheet just for the RSS feed, to control the formatting of blockquotes -- without adjusting the font sizes or families or colors -- would be the most popular solution. If Joi's feed didn't redefine anything related to the font, but simply included the blockquote border thing, would your objections be (at least somewhat) assuaged?

a revolution

Similarly to Feed on Feeds, your CSS overrides the rest of the feeds in rawdog another OSS newsreader.

Hm. Is there any way to apply a stylesheet to a DIV, as opposed to a BODY?

I've filed a bug report with SharpReader and rawdog as well.

Richard,

As for a solution, I suggest using DIV tags and setting the "style" attribute to include your css. STYLE tags must also be declared in the HEAD, so that would be a no no.

I can understand the need for applying print stylesheets, but the best way to go about this is to declare a separate namespace in your feed, instead of lumping it in the descriptions.

Again, by including CSS in your feeds, you are making assumptions about the capabilites of RSS readers, even in terms of them handling css.

Obviously I'm not going to completely oppose limited use, but it can be slippery slope. I would hate to see RSS turn into micro-sites.

Hm, let me rephrase my question, then: how can we style BLOCKQUOTE tags inside a post without (a) style="" on each tag, (b) LINK or STYLE earlier in the post?

I'm personally of the opinion that it's impossible to use CSS properly within the RSS feed, given the restriction that the post be BODY only.

Yup, there's definitely some assumptions in this; even limited uses have their problems, and I'm all for avoiding them when appropriate.

I think the way NetNewsWire handles JavaScript and plugins (namely, a preferences checkbox to disable them) would work beautifully if extended to styles; thus giving people a chance to decide if they mind their posts being "styled" or not.

As others have noted, your CSS styles intermingle with other styles defined on a page. Generally, I like the concept, and think the use of CSS in a news reader is great. Not sure what to suggest for clashing styles on websites though...

fyi, here's my business commentary blog...
http://www.bloggerjack.com/weblog/page/deeje

This is a bad idea and really confused things. I've thought a lot about CSS in RSS and I can't come to any realistic situation where it can be used as part of the standards process.

To be honest there are even some security holes here. What if you are using a web based aggregator or one that uses Mozilla/IE.

A feed could potentially totally ruin the presentation of a page.

Stick to just using the basic HTML elements if you want consistent presentation.

Kevin

Yes, there's an open denial-of-service hole in virtually all feed readers that parse HTML:

<style type="text/css"> * { display: none; } </style>

And suddenly the entire page is gone. With the advent of :before and :after and content-rewriting CSS, combined with browsers that parse the content being written for HTML tags (violating the spec), you could theoretically set up a cross-site CSS attack, replace hyperlinks with other links, or many other things.

For those who want to syndicate styled content, though, must we revert all the way back to style="" attributes? The way this is implemented is bad, but I'm not seeing anything better. Does Atom support applying stylesheets to individual posts? (I presume not, if is equated to .)

Richard,

I'm not seeing away around using the style attribute. As I mentioned before, I think the best solution for including CSS in RSS, is to create a separate element in your feed. This has a number of advantages. It's completely backwards compatible, will allow for easy discovery of style sheets, and will put the user in control of the layout. The only problem is getting aggregators to support it, although just from the comments here, many seem to be interested.

If you're worried about the use of the style attibute bloating your feed, I would suggest turning on gzipping on your server. This will drastically reduce you're bandwidth.

Just FYI, your CSS doesn't work with SharpReader -- you just get a line with the link tag as the first line of every blog entry.

Hmm. Well, RSS is supposed to be extensible, but should we really implement formatting for HTML content outside of the HTML content itself? Should I submit a proposal to the Atom project to get a element on each post, so I can link stylesheets to posts? Must I link a single stylesheet to the entire feed?

I'm not at all worried about bloat; I'm worried about asking humans to translate MovableType stylesheets into their blog HTML. If I have to ask Joi to type <blockquote style="..."> instead of a simple <blockquote> (and what about A, DIV, LI?) each time, copying the style from the stylesheet, I may as well not ask him in the first place.

Interestingly, that turns this debate back around to the original point: should formatting be supported in feeds? Does simple include (a) blockquotes (b) citations (c) hyperlinks? If simple includes hyperlinks, can they have complex attributes?

This is a really big question, and I have no idea how to even address it. Fortunately, I seem to have brought it out into the open anyways.

Joi--

styled feeds can look quite nice, however your styles seem to be causing problems with the current release of rawdog, my current aggregator of choice. Would it be possible to provide both styled and unstyled feeds?

I'm sure they look great in a great number of aggregators, but they have broken mine. (let me know if you'd like to see an example.)

Aside from your css wreaking havoc on my aggregator, I really like it!

Oh, sure, Joi does this and it's a revolution. I suggested it about a year ago and everyone said I was nuts. :) I need nice readers like Joi has.

Seriously, though, I think that the Atom community would welcome a discussion on the wiki about how styles for the feed format could be specified in a standardized way that user agents could choose to ignore at the user's option.

Thanks for pointing that out, Anil, and I'm sure a few think I'm nuts.

For those interested in further back reading, there's also an old post by Ben Hammersley, and Liz has done a wonderful spot of research (as seen here in trackbacks).

For the record, Brent's original post on RSS and stylesheets is what I had in mind when I did this.

Perhaps not suprisingly, but it doesn't seem to do anything on Bloglines

I'm the author of rawdog. (Thanks to Richard Soderberg for bringing this to my attention.)

My current feeling about this is that it's flat-out wrong to include
style information in an RSS feed; the purpose of RSS is syndicating
content, not style, so items should contain semantic rather than
stylistic markup. The reason I'm using an aggregator in the first place
is so that I can view other peoples' content in the way that's most pleasant for me; if I want to view an article with the author's
stylesheet, then I'll visit the author's web pages to do so.

rawdog does break when it's presenting with a broken feed; this is
partly by design, because working around broken feeds discourages people
from fixing them. On the to-do list for the next major release is adding
an (X)HTML cleaner to reduce collateral damage from feeds with invalid
HTML, but this is unlikely to happen for a while.

In the event that this does take off, then I'll make rawdog
strip feed-supplied styling from the content. Unless feed authors are
willing to write stylesheets with actual syndication use in mind, then I
don't feel that CSS is flexible enough to permit styling on a
per-article basis at the moment.

Perhaps per-feed stylesheets for NetNewsWire-style aggregators would be
better handled with a new RSS/Atom element, rather than trying to
shoehorn stylistic markup into the existing content?

Why not just include a snippet of javascript that redirects the feed reader to your site? Or collects their cookies? Or some embedded ActiveX object that reformats their hard drive? Or, for some old school fun, an unclosed blink tag? The possibilities are endless.

Yes, there are lots of ways feeds can screw up aggregators by including unexpected stuff. I guess aggregators will have to start to treat data sent in by remote sites as 'tainted' and clean them up for display.

To "fix" Feed on Feeds so you're no longer forced to use Joi's website design for all your feeds, add the following code somewhere in the <head> section of view.php:

<style type="text/css">
blockquote {
margin:0px !important;
padding-left:5% !important;
padding-right:5% !important;
font-size:100% !important;
font-family:georgia,serif !important;
border:none !important;
}

a {
color:blue !important;
}

a.link {
color:blue !important;
text-decoration:underline !important;
}

a.visited {
color:purple !important;
text-decoration:underline !important;
}

a.hover {
color:inherit !important;
text-decoration:underline !important;
}
</style>

This same method should work for any web based news reader.

To disable it in NetNewsWire Pro, create a new text file (named anything you like - anywhere on your drive). Copy the style block above into the file. Delete the opening and closing <style> tags, then Save it. In NNW, go to the 'HTML' section of 'Prefrences'. Check the last box, "Use custom style sheet". Click the 'Choose' button next to it. You'll get a standard file open window. Find and choose the text file you just saved. Then click 'Open' and presto.... no more clever blockquoting.

Yes, readers will need to start sanitizing HTML; any that aren't already doing this need to start immediately. I've identified what could nearly be considered a security flaw with blindly supporting CSS, and if I can put in <link> tags, is anything stopping me from putting in <meta>?

The reader I use already sanitizes HTML for <objects>, <embeds>, and/or <scripts>, based on my preferences. The author of SharpReader pointed out that it's intentionally not processing <links>; I haven't seen any uses of <blink>, but it sounds like an appropriate use of a custom CSS.

We've been syndicating raw HTML to parsers and viewers, and many applications have blindly integrated the display of this HTML without processing. If this were done with emails, people would be incensed — which is why Outlook has become so restrictive about what can be loaded from an email.

I'd like to bring to the foreground an old article by Mark about sanitizing feeds; it seems relevant at this stage, and seems to be a useful list of things that feed readers probably shouldn't be supporting in their HTML.

I think, when this debates wind down, that my position will be to stand in support of some new element introduced into RSS and Atom, indicating the stylesheet to be applied to a given feed (and/or article!); however, I'd rather see readers sanitize their HTML than implement a new style tag, so my current recommendation is that we continue this experiment until the readers have adapted.

The software readers, not the human readers. I'm all for making life easy for humans :)

Anil was wrong then, Joi is wrong now.

CSS in RSS is a bad idea.

Could we leave *something* in the hands of users instead of forcing style down their throats at every turn?

I find the idea of embedding style in newsfeeds (be they Atom, RSS or something else) fundamentally flawed.

1. In many cases, newsfeeds are about summarys and headlines. It is a notification tool. The presentation of such a notification is a job best left to the client. Yes, I hate HTML mail as well.

2. For a web site, visual design serves two purposes:

2.1 It is a sales pitch. People create pretty designs to make the first-time visitor feel comfortable, so they become return visitors. Those reading via their aggregator are already return visitors, and hence don't need your eye candy.

2.2 Visual design is also about organizing information so that the different types of content (headings, titles, site navigation etc.). The aggregator already takes care of this, so you won't need to.

And, oh: My aggregator of choice is Opera, and it's M2 [1], and it suppresses external embeds, including your stylesheet.

[1] Opera 7.50 preview 1 has an RSS aggregator, with earlier versions you can use it in combination with nntp//rss.

It may be fundamentally flawed, but that's what they said about ethernet, TCP/IP, html and a whole bunch of things we use today. So lets not call it RSS aggregation. How about calling it design control in syndication. I don't want to have to have everyone come to my site just so I can organize my blockquotes the way I want them. Why can't I have design in my own little piece of micro-content that is syndicated? Why can't this have an XML wrapper? Forget for a moment about where we came from. Explain to me why syndication and limited design can't work together?

Because it's overengineering Joi. It's adding yet more technology and more burden on to something that should be nothing more than a very clean, uncomplicated syndication process.

It's a fall away from the primary focus of the business of syndication, making it into what's tantamont to 'little baby web browsers'. It's allowing in bad HTML and worse style that can make everyone else's stuff look like crap. It also makes the process more complicated than they need be.

It pulls away from the focus of the words, forcing webloggers to yet again have to screw around with the technology, until I wonder sometimes if our words aren't nothing more than little bits of glue holding together all the moving parts.

It also adds to the burden of the loads on systems by having yet again, millions of little aggregator bots now downloading stylesheets in addition to syndication feeds.

Ask yourself: what is the business of syndication? Then ask yourself, what does design have to do with it?

Good points Shelley. So lets take the example that started this thing in the first place. Nested blockquotes. It doesn't seem like very many people use them, but I really like them. I'm not religious about using my personal style sheets for having them appear properly, but I'd like to add that in my syndication. I have three choices, 1) don't use blockquotes, 2) figure out a way to represent them in XML and figure out a way for aggregators to understand them or 3) put them in a style-sheet. Which are you suggesting I do?

Joi, you're talking about a syndication feed, not your weblog. You should continue to use whatever you want in your weblog, and we should continue coming to your weblog to read the content, beautifully formatted providing the ambiance to accompany the words. I come here based on an update in my online aggregator that you have updated. I might look at the title first, but I don't look at the content because I want to experience your words in your environment, including comments, trackbacks, photoroll, moblog, the whole experience. Aggregators will never provide this (well, unless they have a full browser component that opens your page).

You're a full content person, which means you put your full content into your syndication feed. This is, in many ways, no different than what the LA Times and Washington Post and other publications do, except that they don't expect that whatever publication re-publishes their syndicated material, also reduplicate the formatting of same.

I just read a great article at the LA Times about the 'discouraged workforce' and how the unemployment counts don't reflect the true picture of the workforce in our country. I also found it republished at Yahoo News. If I point to the article in my weblog, I will do so at Yahoo News, because it's not behind a subscription wall -- even though it is more prettily formatted in the LA times.

All that matters, is the words.

I noticed that in Bloglines, your content does have the blockquote tags embedded, so the HTML formatting is there. But you want the 'personquote' formatting to go with them, correct? Why? It's a pretty bit of elegance in your weblog, and adds to the aesthetics, and I know how important this is to many people -- but the business of an aggregator should be to aggregate syndicated content to a point that the words are communicated cleanly and efficiently. If stylesheets become the norm with Bloglines, I'd probably turn them off because it adds nothing to my use of the tool, which is to know when sometimes I like to read, updates, how many posts, and its nice to have a title and an excerpt -- all easily read in a very uncluttered, clean interface.

I'm not pushing against technology because I do this for fun -- I'm trying to make a point that the business should drive the technology, not the other way around and syndication has to do with content, not design. Well, other than a very clean and easy to use interface for the aggregation tools, and unambiguous and clean syndication feeds.

From an end user perspective I have a question ... can't the feed be set to offer both full content and notification?

All I'm interested in is notification and a synopsis. I don't want to spend the time getting the full content unless I choose to.

Why not allow style in feeds as an option, if it's possible to do within standards? As long as the styles only apply to one feed, cause no harm in general, and are disabled by default, what's the problem? Just because some violently oppose them doesn't mean everyone shares this opinion ;-)

I think any basic HTML structure should be indicated. Links are already underlined so you know they're links, and that's basic stylistic formatting. I sometimes have problems with lists appearing 'inline', making them hard to read. I don't mind if this basic formatting comes from the feed reader's default stylesheet, a user stylesheet, a feed's stylesheet, or a cascade of all three. The more options the better!

I'd also like to plug for a summary feed of joi.ito - something I can scan quickly before loading the articles I want to read in my browser. This might also save you a little bandwidth ;-)

My main problem is that my database and the structure of my blog is unweidly and every new feed increases the rebuild time which slows down comment posting and other things. That's the gating factor for this issue. It really would be great if the standards allowed a user to decide what to get. Full/summary/CSS and allow me to produce just one feed with options.

Leave a comment

12 TrackBacks

Listed below are links to blogs that reference this entry: CSS in RSS feed.

TrackBack URL for this entry: http://joi.ito.com/MT-4.35-en/mt-tb.cgi/1243

Liz's inner librarian surfaces for long enough to track down past discussions on combining styles with syndicated content in Atom, and attempts to connect those threads to a conversation taking place on Joi's blog. Read More

At work, one of the things I'm working on is a better way for information to flow to people. Since... Read More

Silly of me to think we were about to be reduced to 'and here's another ...' Instead, 'and now for something completely different'. Overnight, there have been postings about enabling RSS feeds to carry some of the design, as well Read More

IMO ist CSS in RSS kompletter schwachsinn, warum benutze ich RSS gerne und oft? Weil es simpel ist... Read More

Overnight, there have been postings about enabling RSS feeds to carry some of the design, as well as the content, of its originator. See Joi Ito and then: floating atoll, mamamusings and (from his archives) anil. And add to these: Read More

RSS and CSS from Adventures in Troubleshooting
December 30, 2003 11:10 PM

So, Richard Soderberg, being a registered genius, has implemented CSS in RSS. I've put it in my feed here, but so far, it looks like utter crap, thanks mostly to the fact that divs and spans and stuff that are Read More

Time to take a break from photos and philosophy, and feed the machine. I have a file that maintains a list of 404 accesses, and the URL where the missing resource access originated. The file most accessed is the old Alter Ego weblog's rss.xml feed. Sin... Read More

Richard Soderberg figured out how to include CSS in RSS feeds, and now Joi Ito is using the technique. It's a clever hack, but to me this negates one of the core values of RSS feeds, which is the separation of content from presentation. I want all my f... Read More

Joi Ito's experiments of including CSS in RSS raises the issue of how much of the style of a page in an RSS reader comes from the original author and how much from the RSS reader itself? At floating atoll Richard says: 'Many put a lot of ef Read More

This topic seems to have resurfaced now that Joi is putting this in his feeds and there even is a howto... like Shelley, I've yet to be convinced that syndicating CSS is appropriate, but on a purely technical level, here's a few comments This topic see Read More

All Your RSS from Your Guess Is As Good As Mine
January 2, 2004 11:11 PM

More to the point, I dislike that the Ito format has taken over. Read More

Scratch a blog and you'll find an RSS feed (a.k.a. XML feed). An RSS feed enables you to monitor a blog or other RSS-enabled source without having to visit the Web site. Currently, most RSS feeds consist of raw text Read More

About this Archive

This page is an archive of recent entries in the Business and the Economy category.

Books is the previous category.

Computer and Network Risks is the next category.

Find recent content on the main index.

Monthly Archives