XML mit Style

Externe Style Sheets

Tip: Testen Sie es in Ihrem Browser

HTML besitzt ein link Element um externe Style Sheets zu verlinken, aber nicht jedes XML-basierende Format besitzt solche Elemente. Existiert ein solches nicht können Sie dennoch externe Style Sheets durch die Nutzung von xml-stylesheet Verarbeitungs Instruktionen (processing instructions) wie dieser verwenden:

<?xml-stylesheet href="my-style.css" type="text/css"?>
... der Rest des Dokumentes...

Diese processing instructions (PI) müssen vor dem ersten Tag des Dokumentes verwendet werden. Ein type="text/css" ist nicht notwendig, aber es hilft dem Browser: wenn er kein CSS verarbeiten kann muss er nichts herunterladen.

Genau wie beim link Element in HTML können mehrere xml-stylesheet PIs mit verschiedenen Attributen für Typ, Medium und Titel verwendet werden.

Hier ist ein grösseres Beispiel. Nehmen wir an Sie haben drei Style Sheets, einen welcher den Basis Display Type eines jeden Elementes festlegt (inline, block, list-item, etc.) und zwei andere welche sich um die Farben und Abstände kümmern. Die zwei letzten sind gegenseitige Alternativen und der Leser des Dokumentes kann entscheiden welchen von Beiden er nutzen möchte. Mit Aussnahme dass das Dokument gedruckt werden soll, in diesem Fall wird immer der letzte Style genutzt. Hier ist der gemeinsame Style Sheet:

:

/* common.css */
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

Dies ist einer der alternativen Style Sheets, gespeichert in einer Datei namens "modern.css":

/* modern.css */
ARTICLE { font-family: sans-serif; background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right; margin-bottom: 2em }
PARA { line-height: 1.5; margin-left: 15% }
INSTRUMENT { color: blue }

Und hier der Andere, genannt "classic.css":

/* classic.css */
ARTICLE { font-family: serif; background: white; color: #003 }
AUTHOR { font-size: large; margin: 1em 0 }
HEADLINE { font-size: x-large; margin-bottom: 1em }
PARA { text-indent: 1em; text-align: justify }
INSTRUMENT { font-style: italic }

Das damit verbundene XML Dokument sieht folgendermassen aus:

<?xml-stylesheet href="common.css" type="text/css"?>
<?xml-stylesheet href="modern.css" title="Modern" media="screen"
  type="text/css"?>
<?xml-stylesheet href="classic.css" alternate="yes"
  title="Classic" media="screen, print" type="text/css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

Für weitere Details lesen Sie bitte in den W3C Empfehlungen “Associating Style Sheets with XML documents”

Eingebettete Style Sheets

Tip: Testen Sie es in Ihrem Browser

HTML besitzt ein style Element welches es erlaubt Style Sheets direkt in der HTML Datei einzubinden. Ohne der Notwendigkeit einer externen Datei. In manchen Fällen ist das der eimfachere Weg, insbesondere dann wenn der Style Sheet speziell nur für dieses Dokument verwendbar ist.

Die meissten XML-basierten Formate besitzen kein solches Element. Jedoch lässt dich die gleiche PI welche externe Style Sheets verlinkt auch zum Einbetten der Styles selbst im Dokument verwenden. Zum gegenwärtigen Zeitpunkt, Fabruar 2006, gibt es noch immer technische Probleme damit und es existiert keine formelle Spezifikation dafür. Zum Beispiel:

<?xml-stylesheet href="#style" type="text/css"?>
<ARTICLE>
  <EXTRAS id="style">
    INSTRUMENT { display: inline }
    ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
    EXTRAS { display: none }
  </EXTRAS>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  ...
</ARTICLE>

In diesem Fall muss ein type="text/css" Eintrag vorhanden sein, ansonsten muss der Browser die Style Sheet Sprache erraten. Die xml-stylesheet PI verweist nun nicht auf eine externe Style Sheet Datei, sonden auf ein xml-stylesheet Element im Dokument selbst. Dieses Element wird von einem id Attribut idendifiziert welches als Ziel für diese Verlinkung dient. (Je nach dem verwendeten XML Format kann das id Attribut auch woanders aufgerufen werden oder ganz und gar fehl am Platze sein.)

Inline Styles

HTML erlaubt auch die Verwendung von Styles welche direkt innerhalb eines Elementes verwendet werden können mit Hilfe des style Attributes. Die meissten XML-basierten Formate besitzen kein solches Attribut, auch wenn manche einige HTML-Möglichkeiten (modules) innerhalb des Dokumentes gestatten.

Klassen Attribute

Tip: Testen Sie es in Ihrem Browser

Das class Attribute welches das Erzeugen von Klassen für Elemente innerhalb des HTML Dokumentes erlaubt ist für den Grossteil der XML basierten Formate nicht verfügbar. Natürlich ermöglichst CSS die Auswahl von allen Attributen auch ohne das class Attribut, die Verwendung ist aber dann wesentlich unbequemer.

Hier ein Beispiel. Existiert ein class Attribut und das Dokumentenformat definiert dass das Ganze als HTML interpretiert werden soll kann die Schreibweise mit dem Punkt verwendet werden. (Von daher wird dieses spezielle Beispiel nicht funktionieren da es in HTML kein <doc> Element gibt welchem ein class Attribut zugewiesen werden könnte

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p.note { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

Wenn das Dokumenten Format nicht angegeben ist erzeugt class eine Unterklasse und der längere Selektor "[ ]" muss verwendet werden:

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[class~=note] { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

Existiert kein class Attribut aber irgendetwas anderes muss dennoch "[ ]" verwendet werden:

Testen Sie es in Ihrem Browser

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[warning="yes"] { color: red }
  </s>
  <p>Some text... </p>
  <p warning="yes">A note... </p>
</doc>