CSS-Page-IDs
Durch die Vergabe von IDs an den BODY-Tag ergeben sich flexible Stylingmöglichkeiten
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.
Kommentare
-
Kontrollfeld BLOG schrieb am Mittwoch, 17.05.06 um 08:32 Uhr
[…] für unterschiedliche Seiten festzulegen. Eine detaillierte Beschreibung liefert folgender Blog Der Beitrag wurde am Montag 27. Juni 2005 […]
-
Kai Laborenz schrieb am Mittwoch, 17.05.06 um 08:30 Uhr
@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…)? -
Kai Laborenz schrieb am Mittwoch, 17.05.06 um 08:30 Uhr
@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. -
Björn Wolf schrieb am Mittwoch, 17.05.06 um 08:28 Uhr
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. -
SimonWpt schrieb am Mittwoch, 17.05.06 um 08:26 Uhr
Was spricht dagegen?
body #content {
background-color: #ff4356;
}
oder
#content {
background-color: #ff4356;
}