Variablen in CSS geht nicht? Geht doch. Und zwar recht einfach.

SSI wurde eigentlich dazu geschaffen um HTML etwas dynamischer zu gestalten, ich persönlich bin noch nicht damit in Berührung gekommen, aber ich habe mir eben nur mal Gedanken darüber gemacht, wie ich in einer grossen CSS eine Art Konfiguration anlegen kann und bin dann auf SSI gestossen.

SSI wird von Microsoft (IIS) und Apache unterstützt. Um diese Möglichkeiten in html zu benutzen muss man seine Dateien auch *.shtm oder *.shtml benennen. Ich habe habe dieses für mich zweckentfremdet und mein CSS Dateien dadurch manipulieren können.

Um es für CSS umzusetzen geht man wie folgt vor:

Folgende Zeilen in die .htaccess:

1
2
Options +Includes
AddHandler server-parsed .css

und nun stehen folgende Möglichkeiten zur Verfügung.

mit (Befehl)set (Attribut)var=““ deklariert man die Variable
und mit (Wert)value=““ wird diese dann definiert:

1
2
3
4
5
6
7
  /*Body*/
  /*Hintergrundfarbe*/      <!--#set var="bodyBg" value="#000" -->
  /*Standard Schriftfarbe*/ <!--#set var="fontColor" value="#000" -->
  /*Standard Linkfarbe*/    <!--#set var="linkColor" value="#fff" -->
  /*Standard Schriftart*/   <!--#set var="fontFamily" value="Verdana,Arial,Helvetica,sans-serif" -->
  /*Standard FontSize*/     <!--#set var="fontSize" value="12"  -->
  /*Standard Textfluss*/    <!--#set var="bodyTextalign" value="left"  -->

Diese stehen nun zur Verfügung:

1
2
3
4
5
6
7
8
body {
margin:0; padding:0;
text-align: <!--#echo var="bodyTextalign" -->;
font-family:<!--#echo var="fontFamily" -->;
color:<!--#echo var="fontColor" -->;
font-size:<!--#echo var="fontSize" -->px;
background-color:<!--#echo var="bodyBg" -->;
}

Man kann die Konfiguration so auch auslagern in dem man eine config.css anlegt und diese dann in die jeweilige CSS einbindet:

1
<!-- #include file="config.css" -->

Ausserdem kann man auch Kontrollstrukturen (if, else, elif) mit SSI verwenden.

Weitere Befehle:

  • config
  • echo
  • exec
  • fsize
  • flastmode
  • include
  • set
  • if
  • else
  • elif
  • endif
  • printnv

weitere interessante Links: apacheweek | selfhtml | html world | google


Variablen in CSS mit SSI
Markiert in: