CODEWITHSUNDEEP
cssxmlxslt
pisswillis
pisswillis

Reputation: 1589

XSLT vs CSS for displaying XML

It has been suggested that I use CSS for displaying XML. I know in my heart that this is wrong, but cannot find the words to adequately convince others. Can anyone provide me with a list of pros/cons of using CSS and XSLT for displaying XML.

Upvotes: 19

Views: 12546

Answers (5)

Abel
Abel

Reputation: 57169

What your heart tells you is correct. Though it is possible to use CSS for XML, XML itself does not have any semantics. CSS is meant for the web, for HTML and for giving semantic data a (good) look.

XML is way more general then that. XSLT is was invented for transforming one data format to another (XSLT 1.0 only XML, XSLT 2.0 any Unicode data format), i.e., XML to HTML or XML to XSL-FO or another XML or text format. XSL-FO was invented for laying out XML on paper or screen and is much more detailed then CSS.

Some pros and cons on CSS+XML

Mainly cons, esp. in the light of using XML in a browser. Skip to the overall advice below if you don't want all my babbling ;-)

CSS cons 1: no CSS+XML for internet

The cons: it depends a lot on the context, but if you want to use XML for display on the internet, think again: don't use XML, but transform it into HTML. Then use CSS + HTML to display your data. If you use XML on the internet, no search engine or crawler, will understand the difference between <x> and <y>, but they will understand the difference between <h1> and <h2>.

This alone is enough a reason for using XSLT to transform to HTML + CSS and avoid XML on its own.

CSS cons 2: CSS means lots more work

The other extremely big reason you can use: XML + CSS means defining each and every element in CSS. Using HTML + CSS means user agents already know the default layout properties for all elements. Using XML + XSLT means usually you create HTML + CSS. You should do this on server side, because client side XSLT is not very reliable and cross-browser compatible still.

CSS cons 3: accessibility

(sorry, I can't find pros) Unless XML has semantics (SVG, as mentioned by another user), it makes little sense to use CSS for layout. If the layout is supposed to be semantically understood by a user agent, XML + CSS is a no-go. Text-to-speech readers have no idea what to do, WAI (accessibility) validity will be impossible etc.

CSS cons 4: maintainability, understandability, scripting, trouble

Using XML makes it hard to do any client side scripting (yes, the DOM is available, but how do you tell the browser what the script-tag is? But perhaps it'll react to <script>, but hey, you need XSLT to get that tag in there) and makes it hard to make it cross-browser correct (some browsers have a hard time using XML per se). Anything HTML (like meta, title, body, script) will not be available. There's no way to add title attributes or to tell the browser what an image is (afaik).

No script in existence will work on you XML-only page (prototype.js? jquery.js? ajax? no no and no).

Anybody looking at your code will have to learn what each tag "means". Using XSLT to transform to HTML, prevents this. This extra step is beneficial and should be applied whenever you go from XML to browser display.

CSS pros 1: domain specific

If your domain is SVG, SMIL, OD or anything else, you probably already know this: CSS is an integral part of the specification and should be used. This is completely different from pure, possibly unstructured, data XML.

AJAX thought

Just for comparison: any asynchronous AJAX call (should) return XML. But any library working with it, will either interpret it as HTML, or will use XSLT or another means to transform it prior to injecting it in an existing page.

Overall advice

Based on the remark from the OP, we are looking at data XML (not SVG or OpenDocument) and it needs to be displayed in browsers. Accessibility and indexability are not important. But that doesn't really matter: you shouldn't use XML + CSS alone, unless you're really into some adventure and want to find out all the shortcomings of XML in browsers, want to invent every HTML tag again and define each and everything, only to give up after a while and revert to HTML (XML + XSLT == HTML + CSS).

Upvotes: 21

NickFitz
NickFitz

Reputation: 35061

There is nothing inherently wrong with using CSS to style XML, it's just not done very often (although I've done it in the past as an experiment).

Take SVG as an example: it's XML, and it can be styled with CSS. Also, have a look at section 3.1, "Definitions", of CSS 2.1:

Source document

The document to which one or more style sheets apply. This is encoded in some language that represents the document as a tree of elements. Each element consists of a name that identifies the type of element, optionally a number of attributes, and a (possibly empty) content. For example, the source document could be an XML or SGML instance.

Document language

The encoding language of the source document (e.g., HTML, XHTML, or SVG). CSS is used to describe the presentation of document languages and CSS does not change the underlying semantics of the document languages.

(My emphasis).

The primary possibilities to consider in deciding whether whether to use CSS as opposed to XSLT strike me as being:

  1. Does it make sense to transform the XML document into a different structure (e.g. XHTML) the better to represent the semantics of the document?

  2. Is the semantic structure of the document sufficient in itself, such that only presentational styling needs to be applied?

If you have some pretty arbitrary and meaningless XML - something like <data><column><row><value>1</value><value>foo</value></row></column></data> then the XSLT route would make sense. If however you have a document that has its own clearly defined semantics (e.g. an SVG file, or one of any number of XML applications) and all you want to do is make the headings stand out and the font look nice, then CSS is fine.

Ultimately, do the simplest thing that could possibly work. CSS - at least from version 2 onwards - was specifically designed to be language-agnostic (that is, not tied to HTML) so there's no good reason not to use it when it makes sense.

Upvotes: 1

Joey
Joey

Reputation: 354714

CSS:

  • Styling and overall visual presentation

XSLT:

  • Styling and visual presentation (if desired)
  • Allows complete and radical changes of the actual tree that's rendered

If your XML maps pretty nicely to individual layout elements then use CSS, if you need more work in adapting it for display, then use XSLT. Things like arbitrary re-orderings of content or collapsing multiple lists of values into a table, etc. don't lend themselves well to CSS. CSS really only works nicely if your overall structure of the document is already the same you want to display.

Upvotes: 3

Pete Duncanson
Pete Duncanson

Reputation: 3256

Did they mean a stylesheet? Any XML Stylesheet is different to a CSS stylesheet. XSL is sometimes refered to as a Stylesheet so you might both be right :)

Upvotes: -1

austin cheney
austin cheney

Reputation:

CSS seems to fail for XML in IE8: How to apply CSS to namespace prefixed elements in IE8?

Upvotes: 0

Related Questions