English Version medianotions.de RSS-Feed abonnieren

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

		
	

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

		
	

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

CSS-Einsatzmöglichkeiten

		
	

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

		
	

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 empfehlen

Kommentar schreiben

Die Kommentarfunktion ist nicht mehr aktiv

4 Kommentare

Bogdan Günther zur Website

21.02.2011 11:50:52

Hallo Dustin,

prinzipiell ist es mit MODx Revolution auch möglich, allerdings sind die Platzhalter nicht automatisch mit einem Wert versehen, sondern du musst die Werte vorher per PHP setzen.

Viel Erfolg
Bogdan

Dustin

21.02.2011 11:20:39

Ach mist…
die Tags werden hier ja nicht angezeigt

hier also nochmal (mit Leerzeichen):

[ [ ++browser ] ]

oder

[ [ ++platform ] ]

Dustin

21.02.2011 11:19:03

Das ist eine super Idee.

Ich benutze MODx Revo und wollte fragen ob es da auch möglich ist?
Schein aber nicht der Fall zu sein oder mache ich da was falsch?


oder


PS: bin noch "relativ neu" bei modx

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