Zielgruppe EntwicklungVersion: GSB10.0Aufbau CSS-Dokument

Felder des Dokumenttyps

Folgende Felder stehen im Dokumenttyp CSS-Style-Sheet zur Verfügung:

• Beschreibung

Enthält eine Beschreibung der Stylesheets und ggf. eine Abbildung der Stylesheets-Struktur.

• Rel

Hier wird der Linktyp eingetragen (z.B. „stylesheet“).

• Titel

Dieses Feld kann für interne Bezeichnungen verwendet werden.

• Medien-Typ

Hier wird der Medientyp des Stylesheets eingetragen (z.B. „projection“, „screen“, "handheld" oder „print“).

• Link Template

Hier kann, alternativ zur autom. Ausgabe mit Hilfe der unter „Rel“ und „Medien-Typ“ angegebenen Werte das Link-Tag für spezielle Ausgaben angegeben werden, z.B. für die Ausgabe eines speziellen Stylesheet-Imports für den Microsoft Internet Explorer, vgl. screen/screen_iew. Hierbei ist zu beachten, dass die URL durch den Platzhalter URL gesetzt werden muss. Wird nichts angegeben, so wird das Stylesheet im Format eingebunden.

• Spezielle CSS-Angaben

Hier werden die eigentlichen CSS Definitionen als Plain-Text eingetragen.

• Parameter

Im Stylesheet referenzierte Dokumente werden hier für den Zugriff per Velocity als Linkliste eingefügt

• Ressourcen

Im Stylesheet referenzierte Bilder werden hier als Linkliste eingefügt.

Verwendung von Bildern

Alle Bilder die in einem CSS Definition referenziert werden, müssen als Dokument vom Typ Bild angelegt werden. Standardmäßig werden die Bilddokumente, die aus einem CSS-Style-Sheet-Dokument heraus verlinkt werden, also für das Rahmenlayout verwendet werden, im Ordner SiteGlobals/Frontend/Images/icons, etc. abgelegt. Prinzipiell kann sich das Bilddokument aber in jedem beliebigen Contentpfad befinden. Das Bilddokument wird im CSS-Style-Sheet im Feld „Ressourcen“ mithilfe einer Linkliste eingebunden.

Im Feld „Dokument“ wird das Dokument vom Typ Bild verlinkt, im Feld „Verwendung“ wird der „Schlüssel“ eingetragen mit dem das Bild aus dem Feld „Spezielle CSS-Angaben“ heraus referenziert wird. Hierbei kann der „Schlüssel“ ein Dateiname oder ein Pfad sein. Dabei muss auf die Angabe des richtigen Dateityps (GIF, JPG, PNG) nicht geachtet werden.

<syntaxhighlight lang="css" enclose="div"> .searchresult .Employee {

background: url('../images/icons/isb/sprite-service.png') no-repeat 99% -910px;

}< /syntaxhighlight> Beispiel: Referenzierung aus dem Feld „Spezielle CSS-Angaben“

Das hier beschrieben Verfahren zur Verlinkung von Ressourcen aus dem Feld „Spezielle CSS-Angaben“ heraus wird auch zur Einbindung von Sub-Stylesheets verwendet.

Um die Anzahl der HTTP-Requests zu verringern und so eine bessere Performance der Stylesheets zu erhalten, können die Bilder als Base64 Bilder per Data-URI direkt in die Stylesheet-Datei eingebunden werden. Der GSB wandelt die Bilder dabei automatisch um wenn folgende Syntax beim einbinden benutzt wird:

<syntaxhighlight lang="css" enclose="div"> .searchresult .Employee {

background: datauri('../images/icons/isb/sprite-service.png') no-repeat 99% -910px;

}< /syntaxhighlight> Beispiel: Einbildung der Bilder als Base64 Data URI

nach oben