How to use XSLT to style an RSS feed
June 17th, 2009 By nFriedly
XSLT is a fairly well-supported technology. It allows you to take any XML file – including RSS – and transform it into a styled HTML document. It’s kind of like CSS on steroids.
Unfortunately, most browsers think they know better and go off and do their own thing on RSS feeds.
We’re going to look at how and which browsers can be brought into line, and how to use XSLT to improve the look of your RSS feed in those browsers.
The RSS problem
In most browsers, XML and XSLT are supported in every single case *except* RSS. By default, Internet Explorer, Firefox, Safari, and Opera all ignore XSLT files and do their own thing with RSS. In fact, Google Chrome is the *only* browser I tested that got it right without tinkering.
To their credit, Microsoft at least gave their users the option to turn off the “feature”. No other browser even gives this option.
During my tests, I have found a way to “trick” Firefox into rendering RSS with XSLT correctly. Currently there seems to be no solution for other browsers except to try and detect them on the server and send the user an HTML file if they’re in a browser that doesn’t work properly.
Internet Explorer
IE requires that the user specifically choose to disable their take-liberties-with-rss “feature”. I would point out that this really isn’t good enough because 99% of users will never get that far, but sadly, it’s the closest thing to getting it right out of any browser on the market! (Aside from Google Chrome.)
Here’s how:
- Click on the Tools menu,
- Click on the Internet Options sub-menu,
- Click on the Content tab,
- Click on the Settings button of the Feed section to bring up Feed Settings dialog box,
- Un-check the Turn On Feed Reading View option.
- Click OK all the way to close all opened dialog boxes.
- Restart Internet Explorer
Firefox
Firefox can be tricked into working because it decides fairly early on in the rendering process whether to treat the page in a standard way or to fly off the handle with it. In fact, it makes this decision before even completely downloading the RSS file.
Because of the early decision process, we can insert 512 characters of white space in between the <?xml ?> declaration and the opening <rss> tag. Firefox is then “tricked” into doing the right thing and rendering the feed correctly.
Working around it
Although not practical in most cases currently, I’ve included an example of a script that will take any RSS feed and add a style sheet to it. It includes the hack to work in firefox and instructions for enabling it in Internet Explorer.
http://nfriedly.com/stuff/rss/?url=http://nfriedly.com/techblog/feed/
Code for index.php:
<?php
// grab the url
if(isset($_REQUEST['url'])) $url = $_REQUEST['url'];
else $url = false;
// make sure the url is good (no local files)
if($url && substr($url,0,7) != "http://") exit("Please start urls with 'http://'");
// make the stylesheet link
$xsl_file = 'xsl.php';
if($url) $xsl_file .= '?url='.urlencode($url);
define('XSL_LINK','<?xml-stylesheet href="'.$xsl_file.'" type="text/xsl" ?>');
// if we don't have a url, use the home page
if(!$url) $url = "home.xml";
// download the rss feed
$rss = file_get_contents($url);
// xml header so firefox doesn't decide it's text
header('content-type: text/xml');
//echo out the header right away, if there is one
if(substr($rss,0,6) == '<?xml '){
$header_end = strpos($rss,'?>') +2;
echo substr($rss,0,$header_end);
$rss = substr($rss,$header_end);
}
//otherwise echo a default header:
else echo '<?xml version="1.0" ?'.'>';
// remove any existing stylesheet
$rss = preg_replace('/<\?xml-stylesheet([^?]|\?(?!>))*\?'.'>/','',$rss); // uses lookahead
// add in our stylesheet
echo "\r\n" . XSL_LINK . "\r\n";
// toss in 512 bytes of nothing to throw off firefox
echo " ";
//finally, pass along the content
echo $rss;
?>
The xsl.php file is only php to allow for setting the current url in the feed url input box. Ignoring that, you can view it’s source by looking at http://nfriedly.com/stuff/rss/xsl.php. You could simply save that as an .xml file and have a working copy.
You can also view the CSS and Javascript used to make everything look nice.
Hire me for web development
Need an expert web programmer to research and solve some off-the-wall problem like this? I’m available. I’m good solving run-of-the-mill problems too – Javascript and AJAX development is my specialty. Get in touch with me for more information and a free quote.
[...] This post seems to explain what’s going on. Most browsers do funny stuff with [...]
[...] How to use XSLT to style an RSS feed – nFriedly Web Dev Tech Blog Easy way to force a browser to display RSS as plain XML. (tags: rss xslt) [...]
[...] July 23rd, 2009 · No Comments XSLT is a fairly well-supported technology. It allows you take any XML file – including RSS – and transform it into an styled HTML document. It is kind of like CSS on steroids. How to use XSLT to style an RSS feed [...]
[...] RSS – and transform it into an styled HTML document. It is kind of like CSS on steroids. How to use XSLT to style an RSS feed XSLT is a fairly well-supported technology. It allows you take any XML file – including RSS – [...]
i’ve not used XSL in a few years but now i’m wanting to use it with a project. i am very surprised about this RSS/ATOM handling by Firefox. This just does not make sense. It should at least be an option that is turned off by default and maybe an alert message (like you get when a popup window tries to load) tells user that they can activate auto-styling for RSS feeds.
anyway, thanks for the post. I also found the official mozilla bug mentioning this work-around – https://developer.mozilla.org/en/XSL_Transformations_in_Mozilla_FAQ
Hey, thanks for that article, that is helpful.
I read a long flamewar arguing back and forth the pros and cons of having a special case for RSS. There’s a lot of people on both sides of the issue, but I think that it’s a “feature” that they can drop from firefox.
I never knew you could do that. Thanks!
Hi. It does not work on Opera 9.64
but it works on IE 8 and the latest FF.
How can we make it work in Opera too? Do you have any idea?
Thanks in advance.
Nope, I tested a few things in opera and did not find a way to make rss work correctly.
Since you use jQuery, is it possible to add say a light window function if an image exists in the RSS feed?
Yea, I imagine that would be possible. Take a look here: http://nfriedly.com/stuff/rss/?url=http://feeds.gawker.com/lifehacker/full
And then run this in the address bar: javascript:void(jQuery(‘a img’).css(‘border’,’5px solid green’))
That works, so a lightbox function would probably also work.
[...] http://nfriedly.com/techblog/2009/06/how-to-use-xslt-to-style-an-rss-feed/ [...]
Another option is to declare a prefix for the namespace and use it in the root element. This will break the “<feed" string that is sought by the browser. You can also keep the default namespace to avoid altering the rest of the document. Only the Opera browser is not fooled by this method. This costs much less than 512 bytes in comments.
Good point Alejandro – thanks!
Great article. Is there a way to fool Opera into using a custom xsl.
Hi Ian,
It’s been about a year since I’ve done my research, but at the time there was no way to make Opera behave properly with RSS + XSL.
I just took a quick glance at Opera 10.60, and it seems that nothing has changed since then.
Transforming XML into a nice and neat HTML is a nice trick. Although it’s just so much trouble to just make it work for most of the browsers. Chrome works but what about the rest.
Very nice article.
Regards, Gaz
Actually Gaz, it’s only in the case of RSS, where browsers all want to be “special”, that this doesn’t work. Outside of RSS feeds, XML + XSLT works reliably in every modern browser I can think of. I think part of this comes from the fact that the language is much more strict, so there is less room for the quirks and differences that HTML & CSS have in different browsers.
Thanks for the comment though. Have a great new year!
-Nathan
That was new information for me! Had no idea you could transform XML in to HTML like that.
Great information on XSLT. I had some issues with this in a recent university assignment where i was incorporating an RSS feed into a website
While XSLT for browsers has moved into the non-issue category using XSLT on RSS feeds in WordPress is still a bit of a challenge. The XML Documents plug-in is a big improvement.
I never knew that was possible. I always wondered why my RSS page looks so ugly. Now it goes well with the design of my web page. Thanks!
WTF? Why are there pictures of Gunbuster on a page about RSS feeds?
Because that’s how awesome this trick is! And seriously, what are you going to put pictures of? Raw XML?
(Also, they’re transformers, just like XSLT – Extensible Stylesheet Language Transformations
Very nice article. Is there any technic to incorporate into other browsers as well. It works on chrome, but it would be so much helpful if it is compatible with others too.
Hi, thanks. I don’t know that there is, but if you find one, please let me know
Hi, for a non technical person what is the significance of XSLT to work it with different web browsers? Suppose if I see a page how will it change if the RSS feed is not working with XSLT? This article was interesting and thought I can get my doubts cleared, so put a comment.
XSLT never really caught on, so there’s not a lot of significance to it. If you have an XML file that’s not an RSS feed, you can add an XSLT file and make the XML render like an HTML web page without needing any server-side logic. This might be handy for XML data stored in Amazon S3 or a CDN. But this is not very common. It only works if you control the XML generator, and at that point, most sites just generate two files: one in XML and one in HTML.
However, the primary place where XML is used on the internet is RSS, and from what I’ve found, it is not very feasible to to combine XSLT and RSS due to Internet Explorer’s default configuration.
Very nice article. After a lot of trouble, I succeeded in converting XML to HTML. Thanks for your expert tips. It is very compatible with Chrome. Not sure about other browsers.
It is surely great work. Many people are not that comfortable with XML. Thus your post will definitely going to help these people to convert XML to HTML. If you can manage to provide an alternative to JQuery for this then it will much more helpful than earlier as jQuery is little complex. What do you say?
Yeah Allen you are absolutely right and I am one of them those don’t like XML. XML is little complex thats why I like and prefer HTML instead of XML.
I want to ask the same question Allen asked that is there any alternative to JQuery here? Can DOM API be used in place of JQuery, If yes then please give some code example for that.
Thanks for your reply in advance.
I don’t have time right now to make a safe translation to pure javascript. But if some one else would like to, they can post it here in the comments.
<code>tags should work and make it a little more readable.Yes, I agree that JQuery is quiet complex but I can translate it to javascript and I’ll do it on next weekend and will post that here. So stay tuned here.
Hey Wilson you were about to post the JQuery to javascript translation last weekend, I am waiting for your post. Please provide the javascript code because JQuery is not that understandable by me.
If anyone else here has a solution then please share here…
You know, jQuery is really just javascript, and it’s source code is very well documented. If you’re up for a bit of a challenge, take a look at http://code.jquery.com/jquery-latest.js and see if you can work out what the jQuery code here is doing.
Yes nFriedly! You are absolutely right that jQuery is well documented javascript but some persons don’t want to put any efforts and want everything readymade, thats why some people are asking for javascript.
Very informative post and discussion on it. I never try to use XSLT yet but really want to use it now in one of my recent project itself.
I will use it and will get back here.
Thanks for sharing.