Written by Ethan Gardner Web Design
Extensible Stylesheet Language (XSL) is a powerful technology often treated like a misfit by the design community. The fact is XSL isn’t that difficult to learn, makes websites faster, offers many ways to format content, and makes working with XML data easy.
Many XSL tutorials are either too technical, make too many assumptions about prior knowledge of the technology, or don’t have an obvious practical application. In this introduction, I hope to change that by presenting a plain-language overview of XSL, how it differs from CSS, and lay the groundwork for a 3-part tutorial where we’ll use XSL in a real-world situation.
XSL is a set of three different languages used to format XML.
For this series of articles, we’ll only be dealing with XSLT and XPath, and the tutorials will be geared towards creating a website as opposed to making a desktop widget or other application.
In order to better understand XSL, it is helpful to compare it to a different kind of stylesheet which you may already know, Cascading Style Sheets. XSL and CSS have several traits in common.
Aside from the similarities listed above, CSS and XSL are quite different.
The best roundup of XSL and the reason I became interested in XSL is a SXSW 2007 presentation, “Why XSLT is Sexy,” (audio, slides). In the presentation, they detail many reasons to use XSL, and I have listed a few of the key points with some of my own findings.
Virtually every programming language supports XSL including PHP, Java, C#. This gives developers the freedom to work in their programming language of choice. Transformations can be applied either on the server or on the client since all modern browsers support XSL. Best of all, data formatting can easily be modified or re-purposed.
XSLT uses the XML parser which is much faster than the parser used for HTML (SGML). According to the previously mentioned SXSW presentation, the XML parser is up to 20-times faster than the SGML variety. XML won’t render if it is not properly formed, so the XML parser doesn’t need to accommodate mismatched or unclosed tags like HTML can have.
The two most common APIs for web services, REST and SOAP, are both XML formats. Using XSL creates the possibility of making your own applications and takes the sting out of displaying data received from popular web services.
The semantic web features additional information about website content embedded in the code. The most common example is the meta keywords and description, but with the continued development of microformats and RDFa, the potential to include semantic metadata goes much deeper. With XSL, it is possible to extract this semantic data and use it in other ways like adding someone’s contact information to your address book.
Extended metadata is becoming increasingly important since key players like Google and Yahoo are including richer information in their search results and much of this data is fueled by RDFa or microformats. Using XSL allows a consistent way to add metadata to your content.
The easiest way to learn XSL is to use it in real-world situation. In the next 3 posts, I’ll be creating restaurant menu with XML, render it with XSL and PHP, and enhancing the interface with MooTools. Here is a brief rundown of the items we will cover:
If this overview piqued your interest on the subject of XSL, I hope you’ll consider joining me for the next steps where you’ll be able to see this powerful technology in action.