Applying CSS to an XML file is easy, well supported in modern browsers, and can be quite handy at times. For instance, slap some lipstick on that RSS feed. Sick of the tag soup of HTML-land? Make the switch to pure XML web pages with xml-stylesheet!
And now a quick tip for simplifying your venture into xml-stylesheet for TextMate users…
You can create a Bundle Item in TextMate that works just like the CSS Drag Command. Here’s what to do:
- In TextMate, choose Bundles > Bundle Editor > Show Bundle Editor.
- Click on the “plus” button at the bottom right of the Bundle Editor window and choose New Drag Command…
- Name it something like Insert xml-stylesheet.
cssin the File Types field.
- Now for the money shot – in the Commands textarea, enter the following code:
123echo "< ?xml-stylesheet type=\"text/css\"href=\"$TM_DROPPED_FILE\" media=\"screen\"title=\"no title\" charset=\"utf-8\"$TM_XHTML ?>"
- In the Scope Selector field, enter
- Close the Bundle Editor and choose Bundles > Bundle Editor > Reload Bundles
Now you may simply drag your CSS file from the TextMate file drawer into your XML document and a link to the CSS file will be generated by xml-stylesheet. Fill out the rest of the properties as needed.
As you can see, the prototype for linking a CSS file in XML is strikingly similar to regular HTML. It accepts the same properties. Type and href are required, the rest are optional.
One pitfall in XML CSS: Many browsers do not grok
.foo syntax in your css file. Instead you may use
*[class="foo"]. Be sure to declare your IDs in your DOCTYPE, such as:
< !ELEMENT foobar (#PCDATA)>
< !ATTLIST foobar id ID #REQUIRED>