Eine schon etwas ältere, aber sehr praktische “CSS-Technik” wollen wir hier kurz in Erinnerung rufen: Shaun Inmans “CSS-SSC”.
Hiermit ist es möglich, immer wieder angewandte CSS-Eigenschaften zentral als “Variable” auszulagern und im Style-Sheet an passender Stelle aufzurufen.
Dies ist sehr praktisch wenn sich z.B. Farben im CSS oft wiederholen. Soll diese Farbe geändert werden muß lediglich ein Wert erneuert werden, alle “Verknüpfungen” ändern sich mit. Dies ist wesentlich sicherer als so manche “Suchen- und- Ersetzen”-Funktion. Auch lassen sich z.B. gleiche Farben bei unterschiedlichen Zuweisungen (z.B. Schrift-Farbe und Rahmen-Farbe) getrennt ansprechen.
Die Vorgehensweise ist denkbar einfach:
Zu Beginn des Style-Sheets werden “Variablen” definiert:
@server constants {
variablenname: css-eigenschaft
}
Der “Aufruf” der Variablen erfolgt ähnlich:
selektor {
eigenschaft: variablenname
}
Angewandtes Beispiel:
@server constants {
hauptfarbe: #f00
}
h1 {
color: hauptfarbe
}
Als Variablenname ist jede beliebige Bezeichnung wählbar, ausgenommen natürlich die Bezeichnungen verschiedener CSS-Eigenschaften bzw. Schlüsselwörter.
Auch das Auslagern der Variablen-Zusammenstellung ist möglich, der Aufruf der externen Datei (diese muß im gleichen Verzeichnis liegen) erfolgt mittels:
@server url(name-der-datei.css);
Hat man – gut geplant – eine Reihen von Variablen festgelegt und “verknüpft” kümmert sich das PHP-Script “css-ssc.php” um den Rest: das CSS wird eingelesen, die Verknüpfungen werden ersetzt und das gesamte CSS wird an den Browser ausgegeben.
Die CSS-Datei wird selbstverständlich nicht umgeschrieben sondern “On-the-Fly” erzeugt. Obwohl diese “Umwandlung” nur wenige tausendstel Sekunden dauert geschieht dies nicht bei jedem Aufruf, sondern nur nach Änderung des CSS.
Damit das PHP-Script das so umgebaute CSS verarbeiten kann ist ein kleiner Eintrag in der “.htaccess” nötig:
RewriteEngine on
RewriteCond %{REQUEST_URI} .css$
RewriteRule ^(.+)$ css-ssc.php?css=%{REQUEST_URI}
Falls noch keine .htaccess-Datei existiert (und man unter Umständen Probleme mit der Erzeugung einer neuen hat), hier eine leere Datei als download.
Jetzt fehlt eigentlich nur mehr das Kernstück – die PHP-Datei von Shaun Inman, zu finden auf der Seite des Orig.-Autors:
http://www.shauninman.com/…/css_ssc_quickie
(”This update (with samples) …”).
Alles (die CSS-Datei, die .htacces und das Script css-ssc.php) in den gleichen Ordner laden – fertig!
joachim 07.02.2008 - 11:51 Uhr
ist das nicht ein wenig viel aufwand, wo doch suchen/ersetzen fast jeder editor kennt?
R. Boegl / kick-image.at 07.02.2008 - 12:10 Uhr
Hallo joachim
Selbstverständlich ist “suchen-ersetzen” beinahe schon Standard und oft anwendbar.
Was ist aber wenn – wie oben erwähnt – ein Element die gleiche Schriftfarbe und Rahmenfarbe hat und nur eine davon ersetzt werden soll?
h1 {
color:#f00;
border-bottom:1px solid #f00;
}
Lässt man “f00″ suchen/ersetzen ändern sich beide Farben.
Gut, da kann man wieder “color:#f00;” suchen/ersetzen…
Taucht in der CSS aber irgendwo “background-color:#f00;” auf wird es schon wieder problematisch!
Ein gut geplanter Satz von “Variablen” und deren konsequente Anwendung kann – vor allem bei grossen CSS schon vieles vereinfachen…
Farben definieren - XHTMLforum 29.02.2008 - 08:08 Uhr - Pingback
[...] Hallo W
XHTMLforum 30.07.2008 - 16:34 Uhr - Trackback
$variablen = in css?…
Hi stevezi
Sowas hatten wir schon mal, und auch damals habe ich auf diese Seite verwiesen:
Dynamisches CSS
Funktioniert super, Doris……
Andreas 04.08.2008 - 20:49 Uhr
Taucht in der CSS aber irgendwo “background-color:#f00;” auf wird es schon wieder problematisch!
Da kann man mit Groß-Kleinschreibung beim Suchen und Ersetzen arbeiten: Erst alle color:#f00 und background-color:#f00 in Kleinschrift umwandeln (Suchen und Ersetzen nicht case-sensitiv), dann alle background-color in Großschrift.
…und schon ist das Problem mit case-sensitivem Suchen- und Ersetzen gelöst!
ludwig 27.08.2008 - 14:19 Uhr
…und man kann sich auch mit händen und füßen gegen den technischen fortschritt wehren ;-)
SGW-entertainment 09.05.2009 - 22:42 Uhr
Man kann jedoch aber mittlerweile schon eine infache php datei als CSS Datei benutzen um dort eine dynamik mit einzubringen….
style.css.php
dann einfach <link… …. …. style.css.php … einbinden
In der Datei den Content: text/css eintragen und nun einfach css anweisungen mit php anweisungen vermischen! Fertig!!!
/*CSS Datei beginn*/
body{color:;}
/*CSS Datei ende*/