SELFHTML: XML / Darstellung von XML-Daten / XML-Darstellung mit Stylesheets (CSS)

SELFHTML/Navigationshilfen XML/DTDs Darstellung von XML-Daten
	XML-Darstellung mit Stylesheets
	Allgemeines zur Darstellung mit CSS Zusammenhängendes Beispiel: ein Zugfahrplan Grenzen und Probleme bei der Darstellung mit CSS

Allgemeines zur Darstellung mit CSS

Stylesheets sind eigentlich als Ergänzungssprache für HTML gedacht. Mit Hilfe von CSS ist es möglich, HTML-Elemente, die ein Browser mit Default-Formatierungen anzeigt, nach eigenen Wünschen zu formatieren. Diese Möglichkeit besteht je nach Browser auch, um XML-Daten zu formatieren. Genauso, wie Sie HTML-Elemente wie blockquote, h1 oder div mit CSS formatieren können, ist dies dann mit eigenen XML-Elementen möglich, egal ob sie nun telefonnummer, kurzbeschreibung oder wie auch immer heißen.

Damit die Kombination von XML und CSS funktioniert, müssen im Browser allerdings drei Voraussetzungen erfüllt sein:

Der Browser muss XML verarbeiten können.
Der Browser muss CSS kennen.
Der Browser muss CSS in Verbindung mit XML erlauben.

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.

Zusammenhängendes Beispiel: ein Zugfahrplan

Der Zugfahrplan eines Bahnhofs ist ein typisches strukturiertes Dokument, für das es in HTML kaum sinnvolle Elemente gibt. Es ist zwar kein Problem, eine schöne Tabelle in HTML zu erstellen und einen Fahrplan darin darzustellen. Doch aus "semantischer Sicht" gehen dabei Daten verloren. Denn eine HTML-Tabelle besteht aus Tabellenzellen, aber diese sagen nichts weiter über ihren jeweiligen Inhalt aus. Mit Hilfe einer XML-Struktur lassen sich die Fahrplandaten so beschreiben, dass die Einzeldaten jeweils in "Elementen mit Bedeutung" stehen.

Das folgende Beispiel zeigt eine solche XML-Struktur. Es besteht aus drei Teilen:

der DTD für die Validierbarkeit der Daten,
einer XML-Anwendung dieser DTD, also einem Beispieldokument, das auch eine separate CSS-Datei einbindet, und
aus dieser separaten CSS-Datei und ihren Definitionen.

Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

Beispiel-DTD `fahrplan.dtd`:

<!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)>

Beispiel einer gültigen Anwendung `fahrplan.xml`:

<?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>

Beispiel der eingebundenen CSS-Datei `fahrplan.css`:

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:5px;
}

ankunft {
  position:relative;
  display:block;
  width:600px;
  background-color:#FFFFFF;
  color:#000000;
  font-family:Tahoma,Arial,Helvetica,sans-serif;
  font-size:16px;
  padding:5px;
}

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 {
  font-weight:bold;
  color:#0000E0;
}

.ic, .ice {
  font-weight:bold;
  color:#E00000;
}

Erläuterung:

In der Beispiel-DTD, die separat in einer Datei namens fahrplan.dtd gespeichert wird, wird die gewünschte Elementstruktur der Daten definiert. Unterhalb des Dokument-Elements fahrplan gibt es ein umfassendes Element namens bahnhof, das aus einem Namen für den Bahnhof (Element name) und aus einer beliebigen Anzahl von Ereignissen (Element ereignis) besteht. Ein Ereignis besteht entweder aus einer Abfahrt oder einer Ankunft (Elemente abfahrt und ankunft). Beide Ereignisarten haben die gleiche innere Struktur. Sie bestehen aus einer Uhrzeit (Element zeit), einer Zugtypbezeichnung (Element zugtyp), einer Zugnummer (Element zugnr) und einer Routenbeschreibung des Zuges (route). Das Element route kann nochmals innere Elemente enthalten, nämlich für die Nennung des Startbahnhofs bei ankommenden Zügen (Element start, und für den Endbahnhof bei abfahrenden Zügen (Element ziel).
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">IC</zugtyp>.
Der Internet Explorer interpretiert sogar das Attribut style in einleitenden XML-Tags. Dies erlaubt Ihnen, einzelne XML-Elemente individuell zu formatieren, z.B.: <geburtstag style="font-family:Modern; font-size:18px; color:blue">.
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 CSS2 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.


	Grundlagen von XSL/XSLT
	Notationen für referenzierte Daten

SELFHTML/Navigationshilfen XML/DTDs Darstellung von XML-Daten

XML-Darstellung mit Stylesheets