CSS Variablen
09. Nov 2012
Im CSS können beliebige Variablen verwendet werden, um z.B. Farben oder sonstige mehrfach verwendeten Definitionen zentral festzulegen. Anpassungen können so einfacher und übersichtlicher durchgeführt werden.
Innerhalb einer CSS Datei können beliebige Werte über Variablen definiert werden. Dies ist schon länger möglich, wird aber erst mit der BASE Version 2.x in der Standarauslieferung eingesetzt.
Über einen CSS-Prozesser, der das CSS vor der Auslieferung verarbeitet, werden die Variablen ersetzt. Das geschieht übrigens im gleichen Zug, wie auch die automatische Generierung von CSS-Definitionen für die unterschiedlichen Browser. Selbstverständlich wird der CSS-Prozessor nur dann aktiv, wenn Änderungen in der CSS-Datei gemacht wurden.
Beispielhafte Nutzung von CSS-Variablen
$fontColorHeadlines: #666666; /* Schriftfarbe Überschriften */ h1 {color:$fontColorHeadlines;} h2 {color:$fontColorHeadlines;} h3 {color:$fontColorHeadlines;}
Das Beispiel macht deutlich, dass durch die Nutzung von Variablen weniger Anpassungen notwendig sind, da Redundanzen reduziert werden können.
CSS-Variablen können übrigens beliebig eingesetzt werden. Auch mehrere CSS-Definitionen lassen sich über eine Variable definieren. Der Prozesser führt lediglich eine einfache Ersetzung durch. Die Variablendefinitionen werden anschließend aus der ausgelieferten CSS gelöscht, so dass diese nicht mehr sichtbar sind.
Pflegemasken für CSS-Variablen
Neben dem Vorteil, dass zum Beisiel bei der Änderung von Farben nicht mehrere Werte geändert werden müssen, haben CSS-Variablen noch den Vorteil, dass diese über Pflegemasken angepasst werden können.
Sobald Sie CSS-Farbvariablen nach folgendem Namensschema definieren, werden diese automatisch in der Maske des Layoutwizards zur Pflege über eine Farbauswahl angeboten. Automatisch erkannte Bezeichnungen sind:
- $backgroundColor*
- $fontColor*
- $borderColor*
Wenn Sie also eine Variable mit dem Namen $borderColorMyBox definieren, wird diese Variable auf dem Farbreiter im Layoutwizard angezeigt. Die Bezeichnung vor der Eingabemaske wird über den Kommentar hinter der Variable festgelegt.
Auch Breiten werden in die Pflegemaske übernommen, wenn diese nach folgendem Schema definiert sind:
- $widthBlock*
Nicht nur im Layoutwizard, sondern auch im Quelltext werden Variablen, die als Farbe definiert sind mit einer Farbvorschau sowie einer Farbauswahl versehen. Da alle verwendeten Farben in einem Block zusammengefasst werden, bleibt das Farbschema der Webseite übersichtlich.
CSS Variablen in PHP nutzen
CSS hat inzwischen die Zentrale Rolle bei der Gestaltung der Webseite. Weblication geht sogar so weit, dass CSS den HTML-Quelltext bzw. Bilder beeinflussen kann. Sie kennen das vom CSS-Picture Rendering, wo die Bilder automatisch entsprechend der im CSS definierten Breiten ausgeliefert werden.
Mit CSS Variablen gehen wir nun noch einen Schritt weiter. So wird nun die HTML-Seitenstruktur über CSS definiert. So wird unter anderem definiert, ob bestimmte Seitenelemente genutzt werden sollen.
In CSS wird definiert, ob die Brotkümmelnavigation angezeigt werden soll
$displayNavigationBreadcrumb:block; /* Darstellung der Breadcrumb-Navigation */
Die Brotkrümmelnavigation wird nur dann eingebunden, wenn dies in der CSS-Datei so definiert wurde
<xsl:if test="php:functionString('wCSS::getValue', $wCSSPath, '$displayNavigationBreadcrumb') != 'none'"> <div id="navigationBreadcrumb">
Die Anwendungsmöglichkeiten sind unbegrenzt. Für Sie als Entwickler hat das den Vorteil, dass Sie noch weniger in XSLT-Templates anpassen müssen, da dort bereits jetzt viele Werte aus der CSS-Datei abgefragt werden.