CSS-Page-IDs

Mit IDs werden normalerweise bestimmte Bereiche einer Website gekennzeichnet ? z.B. Die Navigation oder der Inhaltsbereich. IDs lassen sich aber auch sehr gut nutzen, um einzelne Seiten oder Bereiche eine Website kennzeichnen. Dazu wird einfach dem body-Tag eine ID zugewiesen. Je nach Anwendungsbereich entweder einzelnen Bereichen (Beispiel 1) oder jeder einzelnen Seite (Beispiel 2).

Beispiel 1: Wiederverwendbarer Code durch Bereichs-IDs

In einem CSS-basierenden Layout lassen sich unterschiedlich gestaltete Bereiche einer Website (typischerweise z.B. durch unterschiedliche Farben und/oder eine unterschiedliche Kopfgrafik) mit identischem HTML-Code nur durch Verwendung bereichsspezifischer IDs gestalten.
<body id='produkte'>
leitet beispielsweise einen Bereich mit Produktinformationen ein. Hier kann die Hintergrundfarbe des Containers #content über
#produkte #content {
background-color: #ff4356; }
bestimmt werden. Für den Bereich "Unser Unternehmen" soll eine andere Farbe verwendet werden. Nichts leichter als das:
#company #content {
background-color: #77654e; }
sorgt für verschiedene Farben bei gleichem HTML-Code (bis auf eben die unterschiedliche ID im body). Das funktioniert natürlich auch für Hintergrundgrafiken und andere CSS-Eigenschaften bis hin zu kompletten Layouts.

Beispiel 2: Individuelles Styling von häufig vorkommenden Elementen

Bei der Nutzung eines Content-Management-Systems haben Entwickler oft das Problem, dass der auszugebende Code für ein bestimmtes Element – z.B. eine Tabelle (natürlich eine Datentabelle…) für die ganze Site festgelegt werden muss. So sieht dieses Element dann auf allen Seiten gleich aus – was in vielen Fällen auch sinnvoll ist.

Aber oft auch nicht. Um bei unseren Tabellen zu bleiben, könnte neben einer Standardtabelle eine inverse Version auf Seiten mit dunklem Hintergrund erforderlich, so wie eine weitere schmalere Version für die Marginalie. Dies ließe sich im Prinzip auch durch unterschiedliche Tabellenzuweisungen im Backend oder Klassen für die jeweiligen Tabellen lösen, aber viel einfacher und flexibler ist es, den gleichen HTML-Code auf jeder Site zu haben und die Unterscheidung allein mit CSS zu realisieren.

Dazu wird jeder body-Tag mit einer individuellen ID versehen. Bei CMS ist das einfach, da i.d.R. jede Seite eine interne Kennung hat. Diese kann ausgelesen werden und als ID für den body verwendet werden (für die Validität benötigen wir ggf. noch einen Buchstaben vor der Zahl). Nun kann mit
<body id='p054'>

und im Stylesheet
#p054 table { ... }
jedes Element (hier die Tabelle) seitenindividuell gestaltet werden.

8 Gedanken zu „CSS-Page-IDs

  1. @SimonWpt: Der Clou der Body-ID ist ja, dass sich ganze Schemata mit Hilfe einer einzigen Änderung im Markup umstellen lassen (Beispiel 1).
    Mit Deinem Markup würdest Du für #content z.B. die Breite und Schriftgröße für alle Seiten festlegen und kannst dann mit unterschiedlichen IDs im body z.B. verschiednen Hintergrundfarben oder Grafiken für einzelnen Seiten (Bsp. 2) oder Bereiche festlegen.

  2. @Björn: Das geht natürlich auch.
    Die Klasse geht dann auch in den body-Tag (da scheint mein hilfsbereiter Parser etwas aus Deinem Kommentar entfernt zu haben…)?

  3. Kai Laborenz, der Autor von CSS-Praxis, beschreibt in seinem Blog Lab-O-Log, wie man geschickt IDs auch für den body-Tag verwenden kann. Er zeigt auch, wie sich so ein bekanntes Problem bei CMS umgehen lässt. Bei der Nutzung eines Content-Man…

  4. Was spricht dagegen?
    body #content {
    background-color: #ff4356;
    }

    oder

    #content {
    background-color: #ff4356;
    }

  5. Hallo Kai,

    für bestimmte, sehr umfangreiche CMS-Projekte benutze ich eigentlich lieber den Seitentyp als Klasse im -Tag und zusätzlich die ID als eindeutigere Spezifikation.

    So kann man grob die Seitentypen definieren, jedoch bestimmte, auf einem Typ aufbauende, Seiten mit der ID überschreiben und muss die Definition nicht um jene ID erweitern.

  6. ich arbeite nahezu ausschließlich und sehr viel mit typo3. mit dieser methode bin ich da bisher immer sehr gut gefahren. wüsste eigentlich gar nicht was ich ohne die body id´s machen würde.

    klar kann man das ganze auch mit typoscript umsetzen. nur warum? css ist mir da viel lieber und auch für leute mit wenig coding erfahrung schnell zu durchschauen und an die eigenen vorstellungen anzupassen.

    fazit: für mich zwar nichts neues, ist aber wirklich sehr sehr nützlich. an alle die es noch nicht kannten: unbedingt mal ausprobieren!!!

  7. Dies ist ein gelungener und sehr wertvoller Tipp. Man kann damit die gesamte Site unter Umständen mit einer einzigen zentralen CSS-Datei abbilden.

    Herrlich. Danke.

    Markus

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*