10.09.2008, 09:26 Uhr

XML-Daten mit CSS formatieren

XML-Daten lassen sich auch mit Hilfe von CSS für das Web aufbereiten. Der Workshop zeigt, was machbar ist und wie Sie dabei vorgehen müssen.
XML-Daten lassen sich auch mit Hilfe von CSS für das Web aufbereiten. Der Workshop zeigt, was machbar ist und wie Sie dabei vorgehen müssen.
Um ein XML-Dokument in einem Webbrowser darzustellen, bedarf es einigen Aufwands. An Methoden stellt das W3C eine ganze Reihe von Standards und Empfehlungen bereit, von denen die Extensible Style Language (XSL) eine zentrale Rolle spielt. XSL ist zwar sehr flexibel und leistungsfähig, aber auch entsprechend aufwendig zu implementieren.
Es geht jedoch auch einfacher: Cascading Stylesheets (CSS) bieten einen praktikablen Weg, ein XML-Dokument in ein Gesamtwerk zu verwandeln, das in Browsern darstellbar ist.Allerdings ist dieses Verfahren mit zahlreichen Einschränkungen verbunden, die nicht in jedem Fall akzeptabel sind. In diesen Fällen wird man nicht umhin kommen, das Rohdokument mit Hilfe der aufwendigeren Methode XSLT in eine darstellbare Form zu bringen.Wenn es jedoch nur darum geht, einfache XML-Datenstrukturen ins Web zu bringen, kann CSS einen durchaus gangbaren Weg darstellen.
Wenn Sie ein XML-Dokument unbearbeitet mit einem Webbrowser aufrufen, wird Ihnen das XML-File mit einem im jeweiligen Browser implementierten Standard-Stylesheet präsentiert. In der Regel beschränkt sich die Präsentation auf die Darstellung der Baumstruktur des aufgerufenen XML-Files. Eine Ausnahme stellen RSS-Feeds dar, für die der Firefox-Browser mit Hilfe eines speziellen Stylesheets einen durchaus passablen Output erzeugt. Um dies zu testen, rufen Sie in Ihrem Browser einfach den URL eines RSSFeeds wie den von Golem.de (www.golem.de/rss.php? feed=RSS2.0) auf.

CSS für XML

Wenn Sie eine XML-Datei mit CSS-Formatierungen ausgeben wollen, ist die Vorgehensweise ähnlich der Methode, mit der man HTML mit CSS verbindet. Das semantische Markup eines XML-Files wird um Formatangaben in einem CSS-File verknüpft. An einem Beispiel soll dies erläutert werden.
Für einen Test bietet sich zum Beispiel eine typische Google-Sitemap-Datei an, die ebenfalls als XML-Dokument formatiert ist und die dem Google-Suchroboter die Arbeit erleichtern soll. Der Aufbau einer solchen Datei ist sehr einfach und kann zum Beispiel so aussehen:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84"> <url>
<loc>http://www.maxbold.eu/</loc>
<lastmod>2006-11-29</lastmod>
<changefreq>monthly</changefreq>
<priority>0.0</priority>
</url>
//Weitere url-Einträge
</urlset>
Im nächsten Schritt muss in einem CSS-File für jedes XML-Tag, also im konkreten Fall für loc, lastmod, changefreq und priority, eine Formatanweisung definiert werden. Das CSS-File kann so aussehen:
loc { display:block;
width:50%;
font-family: Arial, Helvetica,
sans-serif;
font-size: 10pt;
font-weight: bold;
color: #000080;
border: 1px solid #CAC7C7;
padding: 1px;
margin: 2px;
margin-left:50px;
margin-top:20px;
margin-bottom: 10px;
}
lastmod, changefreq, priority {
display:block;
font-family: Arial, Helvetica,
sans-serif;
font-size: 10pt;
color: #000000;
margin-left:50px;
}
Die Formatierungen bewirken folgendes: Für loc wird die Breite auf 50 Prozent festgelegt, ein Schriftbild definiert, um das Ganze ein Rahmen gezogen und unterschiedliche Ränder für links, oben und unten festgelegt. Die Formatierungen für die übrigen Tags werden zusammengefasst und beschränken sich auf die Festlegung eines Schriftbilds und eines linken Randes. Nun müssen nur noch die beiden Dateien verknüpft werden. Dies geschieht durch eine so genannte Processing- Instruction (PI) im Kopf der XML-Datei:
<?xml-stylesheet type="text/css" href="anzeige.css"?>
Wenn Sie jetzt in Ihrem Browser das Test-File aufrufen, erscheinen die dort abgelegten Einträge in einer lesbaren Form. Diese Basis-Konstellation bietet natürlich noch Raum für reichlich Experimente, bei der Sie alle Register der CSS-Kunst ziehen können. Wenn Sie zum Beispiel die Darstellung der priority-Tags unterbinden wollen, ergänzen Sie die CSS-Datei einfach um den Eintrag:
priority { display:none; }
Den entsprechenden Eintrag in der vorherigen Definition müssen Sie natürlich löschen. Globale Definitionen können Sie in der Style-Definition für das Root-Element urlset unterbringen, zum Beispiel eine Hintergrundfarbe für die ganze Seite:
urlset { background-color: grey;}
Für die Definition der Darstellungsmerkmale der einzelnen XML-Tags steht Ihnen der komplette CSS-Sprachvorrat zur Verfügung. Sie können Parameter wie Schriftart, Schriftgröße oder Farbe festlegen. Aber auch Innen- und Außenränder oder Hintergrundfarben lassen sich damit definieren.
Wichtig ist die display-Eigenschaft. Sie legt fest, wie das entsprechende XML-Element dargestellt werden soll. Die gängigsten Werte für diese Eigenschaft sind block, inline und none. Mit dem ersten Wert legen Sie fest, dass das verknüpfte XML-Element durch Umbrüche von den Nachbarelementen getrennt wird. Beim zweiten Wert wird dies unterbunden, und beim Wert none erfolgt überhaupt keine Darstellung.
Dies ist übrigens eine der wenigen Möglichkeiten, wie Sie mit Hilfe von CSS quasi den Inhalt des XML-Files, der zur Darstellung kommt, manipulieren können. Bei XSLT stehen Ihnen dafür wesentlich mehr Möglichkeiten zur Auswahl.



Das könnte Sie auch interessieren