xml-stylesheets ?

[Thomas Meinike]

Hallo,

Wie ich solche stylesheets einbauen kann, das sie anschließend auch funktionieren. Welche Vor und Nachteile sie haben usw.

Was heißt "solche stylesheets"? xml-stylesheet ist eine Processing Instruction (PI) = Verarbeitungsanweisung fuer die Darstellung von XML-Dokumenten. Das kann ein "klassisches" CSS sein oder ein XSL(T)-Stylesheet zur Umwandlung der Inhalte in ein Ausgabeformat wie HTML.

Die Verwendung von CSS zur Formatierung von XML-Inhalten funktioniert nur sehr eingeschraenkt und ist stark von den Browsern abhaengig, außerhalb von IE und Mozilla/Firefox laeuft da wenig.

Hier mal ein Auszug aus einem Unterrichtsbeispiel, welches so auch nur mit Mozilla-Derivaten passabel funktioniert:

XML (nur ein Datensatz):

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="media_collection.css" type="text/css"?>
<!DOCTYPE media_collection SYSTEM "media_collection.dtd">

<media_collection>

<item medium="LP" type="audio">
    <name>Einstuerzende Neubauten</name>
    <title>Haus der Luege</title>
    <style>Indie</style>
    <year>1989</year>
    <coverimage>cover/neubauten.jpg</coverimage>
    <comment>Genial</comment>
    <tracks number="8">
      <track nr="1" time="2:07">Prolog</track>
      <track nr="2" time="5:44">Feurio!</track>
      <track nr="3" time="2:08">Ein Stuhl in der Hölle</track>
      <track nr="4" time="3:59">Haus der Lüge</track>
      <track nr="5" time="0:30">Epilog</track>
      <track nr="6" time="12:23">Fiat Lux / Manifestspiele / Hirnlego</track>
      <track nr="7" time="3:57">Schwindel</track>
      <track nr="8" time="3:48">Der Kuss</track>
    </tracks>
  </item>

<!-- weitere item-Elemente -->

</media_collection>

DTD (media_collection.dtd):

<!ELEMENT media_collection (item*)>
<!ELEMENT item (name,title,style?,price?,year?,coverimage?,comment?,tracks)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT style (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT coverimage (#PCDATA)>
<!ELEMENT comment (#PCDATA)>
<!ELEMENT tracks (track+)>
<!ELEMENT track (#PCDATA)>

<!ATTLIST item medium (CD|DVD|MD|MC|LP|VHS) #REQUIRED
               type   (audio|video) #REQUIRED

<!ATTLIST tracks number CDATA #IMPLIED>

<!ATTLIST track nr   CDATA #IMPLIED
                time CDATA #IMPLIED

CSS (media_collection.css):

media_collection
{
  display: table;
  margin: 20px auto 20px auto;
  border-collapse: collapse;
}

item
{
  display: table-row;
  border-collapse: collapse;
}

name
{
  color: #00C;
  background-color: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  display: table-cell;
  padding: 10px;
  border: 1px solid #F00;
  border-collapse: collapse;
  border-spacing: 5px;
}

title
{
  color: #090;
  background-color: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  display: table-cell;
  padding: 10px;
  border: 1px solid #F00;
  border-collapse: collapse;
}

style,price,year,coverimage,comment
{
  display: none; /* ausgeblendete Inhalte */
}

tracks
{
  display: table-cell;
  background-color: #FFF;
  border-collapse: collapse;
  border: 1px solid #F00;
  padding: 10px;
}

track
{
  display: list-item;
  list-style-type: none;
  list-style-position: inside;
  font-weight: bold;
  padding: 0px 10px 0px 10px;
}

track:before
{
  content: attr(nr) ". ";
}

track:after
{
  content: " [" attr(time) "]";
}

Dieses Beispiel zeigt auch die Grenzen dieser Technik auf. Von der Lauffaehigkeit im IE ganz abgesehen, waere es praktisch, auch die Cover-Bildnamen auszuwerten und das jeweilige Bild mit CSS-Mitteln einzubinden, was aber scheitert.

content: url(cover.gif);
wuerde ein festes Bild cover.gif einbinden.

content: url(coverimage);
hilft dagegen nicht, da nur der Textinhalt erscheint.

Mit XSLT kommt man da viel weiter, weil einfach ein img-Element mit src-Attribut erzeugt werden kann.

MfG, Thomas