Damit die Kombination von XML und CSS funktioniert, müssen im Browser allerdings drei Voraussetzungen erfüllt sein:
Erfüllt werden diese Voraussetzungen vom Internet Explorer ab der Version 5.0 und von Netscape ab Version 6.0. Dabei ist nicht einmal eine DTD erforderlich. Es genügt, wenn eine wohlgeformte XML-Datei existiert. Die Elemente einer solchen Datei können Sie mit CSS formatieren.
XML in Verbindung mit CSS hat den Vorteil, dass es in den Browsern, in denen es funktioniert, ohne Kenntnisse in XSL/XSLT auskommt. Da die Verarbeitung komplett im Browser stattfindet, ist auch keine Serverumgebung oder ähnliches erforderlich. Zu den Nachteilen siehe Grenzen und Probleme bei der Darstellung mit CSS.
<!ELEMENT fahrplan (bahnhof)> <!ELEMENT bahnhof (name,(ereignis)*)> <!ELEMENT name (#PCDATA)> <!ELEMENT ereignis (abfahrt | ankunft)> <!ELEMENT abfahrt (zeit,zugtyp,zugnr,route)> <!ELEMENT ankunft (zeit,zugtyp,zugnr,route)> <!ELEMENT zeit (#PCDATA)> <!ELEMENT zugtyp (#PCDATA)> <!ELEMENT zugnr (#PCDATA)> <!ELEMENT route (#PCDATA | start | ziel)*> <!ELEMENT start (#PCDATA)> <!ELEMENT ziel (#PCDATA)>
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE fahrplan SYSTEM "fahrplan.dtd"> <?xml-stylesheet type="text/css" href="fahrplan.css" ?> <fahrplan> <bahnhof> <name>Frankfurt HBF</name> <ereignis> <abfahrt> <zeit>10.24</zeit> <&zugtyp class="ic">IC</zugtyp> <zugnr>234</zugnr> <route>Nürnberg 11.48, Regensburg 12.50, Passau 13.38, Linz 14.22 <ziel>Wien West an 17.55</ziel> </route> </abfahrt> </ereignis> <ereignis> <ankunft> <zeit>10.36</zeit> <zugtyp>RB</zugtyp> <zugnr>20392</zugnr> <route><start>Koblenz ab 08.57</start> Bacharach 09.16, St. Goar 09.42, Mainz 10.05, Ffm Flughafen 10.25 </route> </ankunft> </ereignis> <ereignis> <abfahrt> <zeit>10.39</zeit> <zugtyp>RSB</zugtyp> <zugnr>58483</zugnr> <route>Offenbach 10.52, Hanau 11.01 <ziel>Aschaffenburg an 11.27</ziel> </route> </abfahrt> </ereignis> <ereignis> <ankunft> <zeit>10.40</zeit> <zugtyp class="ice">ICE</zugtyp> <zugnr>23</zugnr> <route><start>Hamburg ab 06.55</start> Hannover 08.05, Göttingen 08.43, Kassel 09.01, Fulda 09.43 </route> </ankunft> </ereignis> </bahnhof> </fahrplan>
bahnhof { position:absolute; top:10px; left:40px; background-color:#C0C0C0; padding:10px; } name { position:relative; display:block; width:600px; background-color:#808080; color:#FFFFFF; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:48px; padding:5px; } abfahrt { position:relative; display:block; width:600px; background-color:#FFFF80; color:#000000; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:16px; padding:2px;Zusammenhängendes Beispiel: ein Zugfahrplan
} ankunft { position:relative; display:block; width:600px; background-color:#FFFFFF; color:#000000; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:16px; padding:2px; } zeit { position:relative; width:70px; vertical-align:top; } zugtyp { position:relative; width:50px; vertical-align:top; } zugnr { position:relative; width:70px; vertical-align:top; } route { position:relative; width:350px; } ziel,start,zeit zugnr { font-weight:bold; color:0000E0; } .ic, .ice { font-weight:bold; color:E00000; }Erläuterung
Einzelheiten zu solchen DTD-Definitionen finden Sie im Abschnitt Elemente und Verschachtelungsregeln.
In der XML-Anwendungsdatei wird in einer Dokumenttyp-Deklaration mit externer DTD auf die zuvor erstellte DTD Bezug genommen. Gleich im Anschluss an die Dokumenttyp-Deklaration, noch vor den eigentlichen Nutzdaten der Datei, folgt die Anweisung, mit deren Hilfe die CSS-Datei eingebunden wird:
<?xml-stylesheet type="text/css" href="fahrplan.css" ?>Es handelt dabei um eine Verarbeitungsanweisung. Durch die Notation xml-stylesheet weiß der Browser, dass die nachfolgenden Attribute eine separate Stylesheet-Datei einbinden, in der Formatierungsangaben für die einzelnen XML-Elemente stehen. Mit dem href-Attribut wird die Datei referenziert. Ebenfalls wichtig, besonders wenn die ganze Anwendung über einen Webserver aufgerufen wird, ist das Attribut type. Bei Verwendung von CSS erhält dieses Attribut den Wert text/css.
Der Rest der XML-Datei besteht aus den eigentlichen Nutzdaten. Dabei werden die Elemente verwendet, die in der DTD definiert wurden, und die Verschachtelungsregeln werden eingehalten. Das obige Beispiel beschränkt sich der Einfachheit halber auf vier "Ereignisse" im Zugfahrplan.
Die separate CSS-Datei, die im Beispiel den Namen fahrplan.css hat, definiert für die einzelnen Elemente gewünschte CSS-Eigenschaften. Auf die einzelnen Eigenschaften wird an dieser Stelle nicht näher eingegangen. Aber einen wichtigen Grundsatz sollten Sie kennen: ein XML-Element hat für den Browser zunächst keinerlei Eigenschaften. Der Browser weiß nicht einmal, ob ein Element einen eigenen Block bei der Anzeige erzeugen soll, oder ob es nur innerhalb des laufenden Textes vorkommen soll (inline). Per Voreinstellung wird alles inline angezeigt, also wie ein völlig unstrukturierter Text. Deshalb müssen Sie bei den CSS-Definitionen von XML-Elementen, die einen eigenen Block erzeugen sollen, stets eine entsprechende Angabe notieren. Diese lautet display:block.
Im obigen Beispiel wird das Element bahnhof, das den gesamten Zugfahrplan einschließt, absolut positioniert (position:absolute). Die inneren Elemente werden dann in Abhängigkeit ihres relativen Anfangspunkts positioniert (position:relative). Diese Angaben in Verbindung mit Angaben zur Breite der Elemente (width:...) sorgen dafür, dass die Ausgabe sauber formatiert wie in einer Tabelle erscheint.
Eine Besonderheit stellt die unterste Definition in der CSS-Datei dar. Dort werden zwei so genannte Klassen definiert. Solche Klassen können in HTML-Elementen normalerweise mit dem Universalattribut class="Klassenname" angesprochen werden. Der Internet Explorer interpretiert solche Universalattribute auch in XML-Elementen in Verbindung mit CSS. In den Daten der XML-Datei im obigen Beispiel wird an zwei Stellen auf diese Klassen Bezug genommen, z.B. in der Anweisung
<zugtyp class="ic">ICDer Internet Explorer interpretiert sogar das Attribut style in einleitenden XML-Tags. Dies erlaubt Ihnen, einzelne XML-Elemente individuell zu formatieren, z.B.:
. Je stärker Sie jedoch die XML-Anwendungsdaten durch HTML-entlehnte Attribute wie class oder style "aufweichen", desto weiter entfernen Sie sich wieder von der reinen XML-Lehre, die Daten und Formatierung streng voneinander trennen will und Formatierung nur für definierte Bestandteile einer DTD erreichen will.
Beachten Sie:
Klassennamen wie im obigen Beispiel .ic und .ice sind in dieser Form nur für das Zusammenspiel von CSS mit HTML definiert. Ein XML-Parser, der anders als der Internet Explorer nicht das Universalattribut class erkennt, kann mit solchen Definitionen nichts anfangen. Eine Alternativnotation, die auch von solchen Parsern verstanden wird, wäre *[class~=ic] anstelle von .ic.
Grenzen und Probleme bei der Darstellung mit CSS
CSS ist für Anwender, die sich mit Vorkenntnissen in HTML an XML heranwagen, zunächst sicher einfacher zu verstehen und leichter anzuwenden. Dennoch gibt es Nachteile bei CSS in Verbindung mit XML, die Sie kennen müssen:
Ältere, auch CSS-fähige Browser können mit der Kombination aus XML-Daten und CSS nichts anfangen und zeigen entweder gar nichts oder Text ohne jede Formatierung an. Die Anzeige von XML-Daten in Verbindung mit CSS ist zumindest im WWW derzeit keine empfehlenswerte Lösung, weil derzeit noch zu viele Anwender ausgegrenzt werden.
Mit CSS in Version 1.0 lassen sich nur Elemente formatieren, keine Attribute. Wenn Sie beispielsweise in einer XML-DTD ein Attribut namens ausrichtung mit den erlaubten Werten links, rechts und zentriert definieren, haben Sie erst ab CSS 2.0 die Möglichkeit, die Verbindung zwischen einer solchen Attributangabe und einer entsprechenden Textformatierung herzustellen. Einzelheiten dazu finden Sie im Abschnitt Attributbedingte Formate definieren. Beachten Sie allerdings, dass nicht alle Browser solche CSS-Formate unterstützen.
CSS bietet erst ab Version 2.0 die Möglichkeit, automatische Nummerierungs-Schemata auf Elemente anzuwenden, etwa auf Kapitelüberschriften (Kapitel 1, 1.1, 1.2, 1.2.1, 1.2, 1.3 usw.). In XSL/XSLT ist die Möglichkeit der Nummerierung von vorneherein enthalten.
Es gibt mit CSS kaum sinnvolle Möglichkeiten, Daten bei der Anzeige zu filtern. Gerade bei feld- und datensatzorientierten Daten, wie sie in XML häufig gespeichert werden, ist nicht unbedingt immer gewünscht, dass bei einer Bildschirmausgabe jedes Feld angezeigt wird. Wenn Sie etwa eine Kontaktdatenbank in XML haben, möchten Sie bei der Ausgabe einer Telefonliste beispielsweise nur Namen, Firma und Telefonnummer ausgeben, aber keine Anschriften, Kontonummern und Geburtstage. In XSL/XSLT besteht eine solche Möglichkeit.
Auch weitere Leistungsmerkmale von XSL/XSLT, wie etwa die automatische Sortierung von Daten vor der Ausgabe, ist mit CSS derzeit nicht möglich.