用xslt+css让RSS显示的跟网页一样漂亮

最近在研究如何用 XML+XSLT+CSS 来构造网页，顺手拿自己网站的一部分当实验品。因为实验室的内容放在另一台服务器上，懒得再做个首页，就同步了这边的 RSS 作为入口。但一个没有关联样式的 XML 文件，怎么看怎么别扭。

直接关联 CSS 能让 XML 变得像样一点——虽然这并非最终目标，但确实值得先摸一摸。毕竟不是所有浏览器都支持 XSLT，而目前能接触到的浏览器，基本都能识别关联的 CSS。可惜的是，单靠 CSS 能做的事实在太有限了，还是 XSLT 更靠谱。

给 XML 写 CSS 和平时写 HTML 的 CSS 差别不大，只是元素名变了，但自由度却大大降低——不能为了某个效果随意添加元素。以目前的水平，大概只能写出比纯文本好看那么一丁点的样式。看完例子后，果断跳转到 XSLT 的研究上。

XSLT 能做的事就多了，XML 终于可以直接当网页用了。打开一份别人写好的 XSLT 文件，发现好多熟悉的元素。对于应用在 RSS 的场景，其实只需要知道几个关键结构：

• xsl:for-each select="rss/channel/item" —— 循环遍历
• xsl:value-of select="..." —— 选择节点值
• disable-output-escaping="yes" —— 禁止输出转义

一个循环，一个选择节点，一个控制输出转义的设置，基本上就够用了。接着复制了程序里用的模板文件，把 Smarty 的标签直接换成 XSL 的——太像了，连 HTML 都不用重写，一路复制粘贴。等网站的核心程序写完，一定要尝试用 XSLT 直接做 Smarty 模板。

本以为整理出一个单独的 CSS 就万事大吉，结果——每次做网页总有些浏览器会闹情绪。这次是 Mozilla 内核的“小脾气”：需要显示 CDATA 里的 HTML 内容，让页面更像一个网页，但搜索发现 Mozilla 的 Transformiix 不支持 disable-output-escaping。

记得 FeedBurner 能在 Firefox 里正常显示 CDATA 里的 HTML 代码，看了它的 XSLT 文件，再结合搜索结果，发现大家的解决方案基本都是用 Ja vaScript 的 innerHTML 把内容再写一次就能显示出来。原因不太清楚，但跟着大家的方法，勉强把这个问题解决了。

写 Ja vaScript 时又发现，直接写在 XSLT 里和外链有些不同。本想一个页面一个函数胡乱写过去，能运行就行，结果又冒出不少奇怪的问题。暂时没时间深入研究，等有空再写些测试用例。

说了这么多，核心其实就一条：如果想让 XML 在浏览器里直接呈现为网页，XSLT 是比 CSS 强大得多的方案，但要注意不同内核的兼容性，尤其是那些“不支持”的坑——好在社区里已经有成熟的 workaround。技术选型从来不是一条路走到黑，灵活切换才是关键。