02.05.2010

CSS-Page-Tagging

Themen: JavaScript, HTML, CSS, jQuery | zuletzt bearbeitet: 10.05.2010

CSS-Page-Tagging bedeutet, CSS-Klassen als „Tag“ für eine flexible Seitenanpassung zu nutzen. Ich bin im Laufe der Zeit bei meiner Arbeit darauf gekommen, dass es oft schneller und eleganter ist, bestimmte Ausnahmen in einem Webdesign mittels CSS-Page-Tagging vorzunehmen, anstatt neue Templates dafür zu erstellen oder Ausnahmen in der Programmier-Logik zu ergänzen.

Das klingt jetzt vielleicht etwas abstrakt, deswegen hier ein praktisches Beispiel:

CSS-Page-Tagging-Beispiel

<body class="de tpl_6 top_artikel parent_2010 current_css-page-tagging mac firefox3">

Der Body-Tag erhält diverse Klassen die grundlegende Informationen über die gerade aufgerufene Seite enthalten und sich später in den CSS-Definitionen oder im JavaScript-Teil nutzen lassen:

de: die Sprache der aktuellen Seite
tpl_6: das aktuelle Template
top_artikel: der aktuelle Hauptbereich
parent_2010: das aktuelle Eltern-Dokument
current_css-page-tagging: das aktuelle Dokument
mac: das Betriebssystem auf dem die Website aufgerufen wurde
firefox3: der Browser auf dem die Website angezeigt wird

Mit diesen CSS-Tags auf jeder Seite lassen sich sehr flexible CSS-Definitionen verwirklichen:

CSS-Einsatzmöglichkeiten

<style type="text/css">

   .de div.head ul.language_selector {
      /* Anpassungen für die deutsche Seitenversion */
   }
   
   .top_artikel div.content {
      /* Anpassungen für den Bereich „Artikel“ */
   }
   
   .mac.firefox3 div.site {
      /* Anpassungen für den Firefox 3 auf dem Mac */
   }
   
</style>

Die gleichen CSS-Tags können auch mit JavaScript verwendet werden (hier in Kombination mit jQuery):

CSS-Einsatzmöglichkeiten

<script language="javascript" type="text/javascript">
   
   $('.de div.navigation a').hover({
      // Anpassungen für die deutsche Seitenversion
   });
   
   $('.top_artikel div.content a').hover({
      // Anpassungen für den Bereich „Artikel“
   });
   
   $('.mac.firefox3 div.site a').hover({
      // Anpassungen für den Firefox 3 auf dem Mac
   });
   
</script>

Wie werden die CSS-Tags erstellt?

Das kommt ganz auf das CMS oder Web-Framework an, das der Website zugrunde liegt. Klassischerweise werden die CSS-Tags server-seitig bestimmt und dann als Platzhalter eingefügt. Für diese Seite passiert das mit MODx und PHP und sieht im Template so aus:

CSS-Page-Tagging mit MODx-Platzhaltern

<body class="[+lang+] tpl_[*template*] top_[+topAlias+] parent_[+parentAlias+] current_[*alias*] [+platform+] [+browser+]">

Anwendungsmöglichkeiten und Vorteile

Die in diesem Artikel verwendeten CSS-Klassen sind natürlich nur Beispiele. Je nach Anforderungen und Komplexität können diese auch ganz anders aussehen und kombiniert werden. Die Vorteile des CSS-Page-Tagging liegen auf der Hand:

Weniger Templates: Im CMS oder Web-Framework müssen nicht für jede Ausnahme neue Templates oder Unter-Templates angelegt werden. Dadurch bleibt das Projekt schlank und leichter pflegbar.
Weniger Programmier-Logik: Für Ausnahmen in der Darstellung muss die Programmier-Logik nicht erweitert werden, die Anpassungen können rein per CSS erfolgen.
Hohe Flexibilität: Durch die Kombination von mehreren CSS-Klassen (.mac.firefox3) und die beliebige Erweiterbarkeit entsteht eine sehr hohe Flexibilität für CSS- und JavaScript-Anpassungen.

Bookmark setzen oder Seite versenden

–

Kommentar schreiben

–

1 Kommentare

Alex

18.05.2010 16:22:46

Hallo Bogdan,

ja das mit dem CSS-Tagging ist schlau und auch ich benutze es schon fast seit Anbeginn meiner MODx-Zeit. :) Man kann so herrlich flexibel arbeiten ohne für jeden kleinen Seitenunterschied ein neues Template zu erstellen.

Produktive Grüße, Alex