17.4 HTML_CSS 

Das Paket HTML_CSS [Das Paket benötigt momentan PEAR::Log. Bei der Installation wird zurzeit leider nicht bemerkt, wenn das Paket fehlt und die Abhängigkeiten somit nicht erfüllt sind. ] stellt eine ideale Ergänzung zu HTML_Page2 dar. Mit ihm können Sie einfach und schnell Cascading Stylesheets erstellen und diese direkt in eine HTML-Seite einbinden oder auch eine Datei auslagern.

Auch hier ist die Vorgehensweise wieder erfreulich einfach, wie Sie sehen können:

require_once 'HTML/CSS.php'; 
 
// Neues Objekt instanziieren 
$css = new HTML_CSS(); 
 
// Styles fuer den Selektor body 
$css->setStyle('body', 'background-color', 'black'); 
$css->setStyle('body', 'color', '#ffffff'); 
 
// Anlegen einer Klasse 
$css->setStyle('.fett', 'font-weight', 'bold'); 
// Ausgabe als Text 
$css->display();

Mit diesen Zeilen generieren Sie schon ein vollständiges Stylesheet:

body { 
   background-color: black; 
   color: #ffffff; 
} 
 
.fett { 
   font-weight: bold; 
}

Der Konstruktor benötigt auch hier keine Parameter, obgleich er ein Array akzeptiert, mit dem insbesondere das Ausgabeverhalten beeinflusst werden kann. Mit dem Schlüssel xhtml können Sie einen booleschen Wert übergeben, der definiert, ob die ausgegebenen Styles XHTML-konform sein müssen. Dies betrifft insbesondere die »Inline-Ausgabe«, also wenn die Daten direkt als Attribut eines Tags ausgegeben werden sollen. Der Schlüssel tab gibt Ihnen die Möglichkeit zu bestimmen, mit welchem Zeichen die Einrückungen vorgenommen werden, die standardmäßig mit einem Tabulatorsprung umgesetzt werden. Sinnvoll könnte auch noch der Schlüssel oneline sein. Übergeben Sie hiermit ein true, [Momentan ändert sich das Ausgabeverhalten auch dann, wenn Sie ein false übergeben. Nur wenn Sie den Wert nicht setzen, bleibt die Ausgabe momentan mehrzeilig. ] wird das Stylesheet nicht so schön strukturiert, und die Styles zu einem Selektor werden komplett in einer Zeile ausgegeben. Zusätzlich ist auch noch die Möglichkeit vorgesehen, über den Schlüssel cache das Caching-Verhalten zu steuern, was aber nur bedingt sinnvoll erscheint, da nur die Methode display(), die die Daten direkt auf »dem Bildschirm ausgibt«, davon betroffen ist. Alternativ können Sie diese Verhaltensweisen auch über die Methoden setCache(), setSingleLineOutput(), setXhtmlCompliance() und setTab() steuern, die dieselben Werte akzeptieren, wie sie zuvor beschrieben wurden.

Die Methode setStyle() können Sie, wie Sie sicher schon erahnt haben, nutzen, um den einzelnen Tags, sprich Element-Selektoren bzw. Klassen-Selektoren, die Style-Anweisungen zuzuordnen. Sie bekommt jeweils den Selektor sowie die Eigenschaft und den dazugehörigen Wert übergeben. Um einem Selektor mehrere Eigenschaften zuzuweisen, können Sie die Methode mehrfach aufrufen. Vorher definierte Eigenschaften werden hierbei nicht überschrieben. Für die Ausgabe wurde in diesem Beispiel die Methode display() genutzt, die die Daten direkt an den Client sendet. Für den Einsatz im »echten Leben« ist diese Vorgehensweise natürlich nicht sinnvoll, jedoch leistet die Methode gute Dienste bei der Fehlersuche und dem originären Entwurf von Stylesheets. Weitere Ausgabemethoden erläutere ich später.

Häufig werden Sie Fälle haben, in denen zwei Selektoren sich nur in einigen, wenigen Details unterscheiden, aber die meisten Styles identisch sind. In einem solchen Fall ist setSameStyle() sehr praktisch. Diese Member-Funktion bekommt den Selektor übergeben, dem das Format zugewiesen werden soll, und als zweiten Parameter den Selektor, von dem die Formatierungen übernommen werden sollen.

Oft wird es so sein, dass Sie Element-Selektoren zu Gruppen zusammenfassen wollen. Das wird natürlich auch unterstützt. Eine neue Gruppe wird mit der Methode createGroup() angelegt, die entweder einen Integer-Wert zurückliefert, über den Sie die Gruppe ansprechen können, oder im Fehlerfall ein PEAR_Error-Objekt. Die Methode bekommt einen String übergeben, der aus einzelnen Selektoren besteht, die jeweils durch ein Komma getrennt sind.

Haben Sie eine solche Gruppe erstellt, können sie ihr mit der Methode setGroupStyle() einzelne Styles zuweisen.

$css = new HTML_CSS(); 
$gruppe1 = $css->createGroup('body,p'); 
$css->setGroupStyle($gruppe1,'font-family','arial');

setGroupStyle() verhält sich genau wie setStyle() – mit dem kleinen Unterschied, dass zuerst die Gruppe identifiziert werden muss, der die Formatierung zugewiesen werden soll. Sollten Sie, nachdem Sie eine neue Gruppe generiert haben, feststellen, dass Sie noch einen Selektor ergänzen müssen, hilft Ihnen addGroupSelector() weiter. Sie bekommt die Nummer der Gruppe übergeben, die ergänzt werden soll, und als zweiten Parameter den oder die Selektoren, die hinzuzufügen sind. Mit

$css->addGroupSelector($gruppe1,'td,form');

würden $gruppe1 also noch td und form hinzugefügt. Mit der Methode removeGroupSelectors(), die dieselben Parameter unterstützt wie addGroupSelectors(), können Sie natürlich auch wieder Selektoren entfernen, wenn das nötig sein sollte. Sollten Sie eine ganze Gruppe eliminieren wollen, erledigt das unsetGroup() für Sie, der Sie die Nummer der Gruppe als Parameter übergeben müssen.

Das Paket unterstützt die Möglichkeit, CSS-Informationen aus anderen Quellen wie Dateien oder Strings zu übernehmen, was hilfreich ist, wenn Sie z. B. die Grundlage für ein CSS in eine Datei ausgelagert haben. Eine Datei einzulesen und zu analysieren ist die Aufgabe von parseFile(). Diese Methode bekommt den Namen der einzulesenden Datei übergeben. Sollte ein Fehler auftreten, weil die Datei z. B. nicht gelesen werden kann, liefert sie einen PEAR_Error zurück. Nach dem Einlesen können Sie die Styles mit den schon beschriebenen Methoden bearbeiten. Leider stehen nicht alle Funktionalitäten zur Verfügung. So können Sie zwar eine neue Gruppe oder Selektoren hinzufügen, aber eine bestehende Gruppe kann nicht verändert werden, weil Sie diese nicht ansprechen können. Liegen die CSS-Daten in Form eines Strings vor, so können Sie diese an die Methode parseString() übergeben, die die Daten analysiert.

17.4.1 Ausgabe des Stylesheets 

Im ersten Beispiel habe ich die Methode display() genutzt, um die Daten auszugeben, was, wie schon erwähnt, im echten Einsatz wenig sinnvoll erscheint. Bei der Erläuterung von HTML_Page2 habe ich erwähnt, dass die Klasse in der Lage ist, Stylesheets aus Objekten zu übernehmen, die über eine toHtml()- bzw. toString()-Methode verfügen, was auf die HTML_CSS-Objekte zutrifft. In Listing 17.4 sehen Sie ein Beispiel, wie diese beiden Pakete kombiniert werden können.

require_once 'HTML/Page2.php'; 
require_once 'HTML/CSS.php'; 
 
// Festlegen der CSS-Optionen 
$ops=array('tab'=>' ','xhtml'=>true); 
 
$css = new HTML_CSS($ops); 
$seite = new HTML_Page2("doctype=none"); 
 
// Styles definieren 
$css->setStyle('body', 'background-color', 'black'); 
$css->setStyle('body', 'color', '#ffffff'); 
 
$css->setStyle('.fett', 'font-weight', 'bold'); 
 
// Stylesheet an die Seite uebergeben 
$seite->addStyleDeclaration($css); 
 
// Inhalt der Seite erstellen 
$seite->setBody('Dies ist eine Text-Seite'); 
$seite->addBodyContent('<div class="fett">Zweite 
                        Zeile</div>'); 
 
//HTML-Code ausgeben 
$seite->display();

Listing 17.4 Kombinieren von HTML_Page2 und HTML_CSS

Darüber hinaus können Sie die Daten natürlich auch in einer Datei abspeichern, wofür die Methode toFile() vorgesehen ist, die den Namen und den Pfad der zu erstellenden Datei übergeben bekommt. Sollte das Schreiben der Daten fehlschlagen, liefert sie einen PEAR_Error zurück.

Sollten Sie die Daten selbst noch weiterverarbeiten wollen, sind die Methoden toString() bzw. toArray() unter Umständen hilfreich. Die erste liefert das Stylesheet als String zurück, wohingegen die zweite ein Array liefert. Hierbei handelt es sich um ein assoziatives Array, in dem die Selektoren als Schlüssel genutzt werden. Unterhalb eines jeden Schlüssels ist dann wiederum ein assoziatives Array zu finden, das die Eigenschaften der einzelnen Styles als Schlüssel benutzt, um die Werte zu identifizieren. Für das Beispiel aus Listing 17.4 sieht dieses Array beispielsweise so aus:

array(2) { 
  ["body"]=> 
  array(2) { 
    ["background-color"]=> 
    string(5) "black" 
    ["color"]=> 
    string(7) "#ffffff" 
  } 
  [".fett"]=> 
  array(1) { 
    ["font-weight"]=> 
    string(4) "bold" 
  } 
}