Nehmen wir an, du möchtest die Farbe deiner Links nur auf deiner Kontaktseite rot ändern. Auf allen anderen Seiten sind sie blau, aber es macht einfach Sinn, dass sie aus irgendeinem Grund auf deiner Kontaktseite rot sind. Es gibt ein paar Möglichkeiten, dies zu erreichen.
- Du könntest eine separate Stylesheet für deine Kontaktseite deklarieren. Das ist nicht ideal, weil es redundant ist. Wenn du andere Änderungen vornimmst, musst du sie immer sowohl in der Haupt-Stylesheet als auch in der Stylesheet der Kontaktseite vornehmen.
- Du könntest allen Links auf dieser Seite eine eindeutige Klasse geben. Das ist nicht ideal, weil es nicht sehr semantisch ist und auch redundant ist. Warum einer jeden einzelnen Link auf der Seite eine Klasse zuweisen, wenn sie sich kontextuell gesehen nicht von Links anderswo auf der Website unterscheiden?
- Die beste Lösung ist, deinem Body eine eindeutige ID zu geben. Das löst das Problem perfekt. Du kannst dieselbe Stylesheet verwenden und nur die Links ansprechen, die du mit einem einzigen CSS-Selektor möchtest.
So wird's gemacht
Ganz einfach, weise der Body-Tag wörtlich die ID zu
...
</head>
<body id="contact-page">
...Nun für unser Beispiel, bei dem wir alle Links auf der Kontaktseite rot statt blau machen, verwende einfach etwas CSS wie dieses
a {
color: blue;
}
#contact-page a {
color: red;
}
Wie wäre es mit einem praktischeren Beispiel?
Verstanden. Eine der nützlichsten Anwendungen dieser Technik ist innerhalb der Navigation. Schau dir diese Beispielnavigation an
Siehst du, wie der Forums-Tab der "aktive" Tab ist? Sicherlich ist das nur eine kleine Änderung in CSS, wahrscheinlich nur eine Verschiebung der Position eines Hintergrundbildes. Vielleicht sieht das XHTML so aus
...
<li><a href="/fieldtips">Field tips</a></li>
<li class="active"><a href="/forums">Forums</a></li>
...Die "aktive" Klasse, die dem Listenelement zugewiesen ist, verschiebt das Hintergrundbild. Das wird seinen Zweck erfüllen, aber was ist, wenn wir zur Feldtipps-Seite wechseln? Wir müssen die aktive Klasse vom Forums-Tab entfernen und sie dem Feldtipps-Tab zuweisen. Das ist nicht sehr praktisch. Das bedeutet, dass der Code für den Navigationsblock auf jeder einzelnen Seite der Website einzigartig ist. Sagen wir also, wir wollen später einen Kontakt-Tab hinzufügen, wir müssen den Code auf jeder einzelnen Seite ändern. Kein Spaß.
Machen wir das ein bisschen schlauer. Erstens wollen wir den Navigationsblock nicht auf jeder Seite einfügen, wir wollen ihn einbinden, wahrscheinlich mit einem einfachen PHP-Include wie diesem
<?php include_once("nav.html"); ?>
Aber wie weisen wir dann die "aktive" Klasse dem aktuellen Navigation List Element zu?
Hier kommt das zum Einsatz, was wir gerade über die Zuweisung eindeutiger IDs an den Body gelernt haben! Anstatt nur dem aktiven Listenelement eine Klasse zuzuweisen, weisen wir jedem einzelnen Listenelement eine eindeutige Klasse zu und geben unserem Body eine eindeutige ID.
...
</head>
<body id="field-tips">
...
<li class="fieldtips"><a href="/fieldtips">Field tips</a></li>
<li class="forums"><a href="/forums">Forums</a></li>
...Jetzt können wir mit etwas cleverem CSS gezielt einzelne Elemente in der Navigation ansprechen
#field-tips li.fieldtips, #forums li.forums {
background-position: bottom;
}Das bedeutet, dass der Code für den Navigationsblock auf jeder Seite gleich bleiben kann, aber nur das Navigationselement, das dieser Seite entspricht, von diesem CSS beeinflusst wird und in den aktiven Zustand "wechselt".
Lassen wir es noch dynamischer werden
Leser Brian hinterließ einen tollen Kommentar darüber, wie man mit PHP die eindeutige ID dem Body-Element zuweisen kann
<body id="<?= basename($_SERVER['PHP_SELF'], ".php")?>">Dies gibt den Namen der ausgeführten PHP-Datei als ID zurück (z. B. body id="index.php"). Um den .php-Teil wegzulassen, entferne einfach den Teil ".php".
Wow, das ist sehr nützlich, danke Chris.
Toller Artikel und Thema. Ironischerweise habe ich heute Morgen tatsächlich darüber nachgedacht, über genau dasselbe Thema zu schreiben. Ich wurde durch ein anderes Thema abgelenkt, also habe ich es nicht getan, aber irgendwie lustig.
Es gibt nur ein Wort, um das zu beschreiben: bad-ass-ery
Danke, Jungs!
Das ist ein guter Tipp für Websites, die unterschiedliche Farben usw. für verschiedene Bereiche von Websites verwenden. Ein gutes Beispiel ist ICWA, das ich mitpflege.
Klingt theoretisch gut, und ich habe diese Technik schon oft auf statischen Websites verwendet, aber auf großen datenbankgestützten Websites hassen die Backend-Entwickler dies als UI-Typ, weil es bedeutet, dass sie nicht denselben Code für die Body-Elemente im gesamten Website verwenden können (z. B. mit .NET Master Pages). Allerdings ist es nur ein bisschen mehr Arbeit für sie, das gut zum Laufen zu bringen (wenn auch mit viel Gejammer :-P).
…was du natürlich mit dem PHP-Snippet irgendwie angesprochen hast.
Du hast eine eher offensichtliche vierte Option vergessen: Rufe deine allgemeine Stylesheet wie gewohnt auf und rufe dann entweder eine andere Stylesheet auf (wenn es sich um eine Reihe von Seiten handelt, die du leicht unterschiedlich stylen möchtest) oder füge einen Style-Block in den Head deines Dokuments ein (wenn es sich um eine einzelne Seite handelt), der nur die Regel/n neu definiert, die/welche unterschiedlich sind. Solange du diese Neudefinition nach dem Aufruf deiner Haupt-Stylesheet vornimmst, kannst du dieselbe Spezifität wie in deiner Haupt-Stylesheet verwenden. Dies nutzt den Kaskadeneffekt, belastet dich nicht mit dem Duplizieren der gesamten Haupt-Stylesheet, nur um ein oder zwei Dinge zu ändern, und bedeutet nicht, dass du eine ganze Body-ID-Sache starten musst.
@hank: Ja, bei Websites, die irgendein dynamisches Framework verwenden, ist es sehr üblich, eine Index- oder Header-Datei zu haben, die allen Seiten der Website gemeinsam ist. Das macht es etwas schwieriger, diese eindeutige ID dort einzufügen, aber wie wir beide wissen, ist es machbar =)
@patrick h. lauke: Ja, das stimmt, du könntest eine zusätzliche Stylesheet oder einen Style-Block NACH der ursprünglichen Stylesheet einfügen, der Regeln überschreibt, die in der ursprünglichen Stylesheet festgelegt wurden. Es gibt etwas, das mich daran stört, und vielleicht ist es nur eine persönliche Sache, die ich überwinden muss, aber es gefällt mir einfach nicht. Für mich ist es nicht wirklich "die Kaskade ausnutzen", es ist das Deklarieren von zwei identischen Selektoren, die aufeinanderprallen lassen und den Browser entscheiden lassen, welchen er berücksichtigt. Vielleicht gibt es dazu Spezifikationen (wahrscheinlich gibt es sie), aber ich mag die Idee, spezifischer in meinem CSS zu sein, anstatt identische Selektoren zu deklarieren.
Chris, fair genug – und zugegeben, es wäre umständlich, z. B. das Navigationsbeispiel mit meiner Methode zu machen (aber für schnelle einmalige Neudefinitionen würde ich immer noch sagen, dass es weniger Arbeit ist, als alle Sonderfälle in der allgemeinen Stylesheet zu halten und sie mit spezifischeren Selektoren für die jeweilige Seite anzuwenden).
Zur Referenz, der Fall der Neudefinition von Aspekten eines Stils durch einen nachfolgenden wird klar in der Spezifikation als Teil der Kaskadenregeln behandelt, so dass es sich nicht um eine Fehlerbehandlung / Kollision handelt, die dem Browser überlassen wird.
„4. Sortierung nach festgelegter Reihenfolge: Wenn zwei Deklarationen das gleiche Gewicht, den gleichen Ursprung und die gleiche Spezifität haben, gewinnt die später festgelegte.“
CSS 2.1 / 6 Zuweisung von Eigenschaftswerten, Kaskadierung und Vererbung / 6.4.1 Kaskadierungsreihenfolge
Generell, wenn du einen gemeinsamen Header für eine Website hast, würdest du die Seiten-ID am Anfang der Seite deklarieren und den Header-Include darunter aufrufen.
Zumindest mache ich das in Cold Fusion so.
Toller Tipp.
Auf die gleiche Weise können wir auch eine Internationalisierung von CSS durchführen (z. B. Hintergrundbilder mit Text darauf). Zum Beispiel verwenden wir eine Klasse für den Body
Im Body-Tag kannst du also zur Internationalisierung von CSS eine Klasse hinzufügen, genau wie
<body id="some_page" class="french"><h2 class="hello_world">Bonjour le monde !</h2>
oder
<body id="some_page" class="english"><h2 class="hello_world">Hello world !</h2>
Dann können wir in CSS Dinge tun wie
h2 {text-indent: -5000px;
height: 30px;
width: 300px;
background-repeat: no-repeat;
}
.french h2.hello_world { background-image: url(french_hello_world.gif); }
.english h2.hello_world { background-image: url(english_hello_world.gif); }
usw...
Danach liegt es am Entwickler, wie die Klasse dynamisch geändert wird. Ich persönlich mache mit PHP etwas wie
<body id="some_page" class="<?php echo $language; ?>"><h2 class="hello_world"><?php echo $title_hello_world; ?></h2>
Das ist ein wirklich alter Trick – ich benutze ihn schon seit Ewigkeiten.
Um das Navigationsbeispiel weiterzuführen: Wenn du dem Body-Tag eine Klasse und eine ID hinzufügst, kannst du die Klasse verwenden, um den aktuellen Abschnitt der Navigation zu öffnen, und die ID, um die aktuelle Seite hervorzuheben – z. B. in einer Dropdown- oder aufklappbaren Navigation.
Du kannst dann auch die Body-Klasse verwenden, um das Aussehen jedes Abschnitts der Website zu ändern. Mit mehreren Body-Klassen kannst du das Aussehen basierend auf dem Website-Abschnitt und dem Seitentyp (Indexseite, Artikel, Kontaktformular usw.) ändern.
Als allgemeine Regel gilt: Verwende eine Seiten-ID nicht wieder: Verwende eine Klasse, wenn du Stile über mehrere Seiten teilen möchtest, und verwende eine ID, wenn Stile nur für eine Seite eindeutig sind.
Lustig, wie jemand erwähnte, dass er über einen ähnlichen Artikel "nachgedacht" hat, während ich ihn tatsächlich geschrieben habe :)
Ich stimme größtenteils zu (obwohl ich die Body-ID nicht zum Stylen eines aktiven Navigationspunkts verwenden würde). Die einzige Anmerkung, die ich habe, ist, mit IDs und Klassen zu arbeiten, wobei die ID einen Bereich innerhalb einer Website definieren würde und die Klassen diesen Bereich weiter spezifizieren würden (z. B. du könntest 2 Kontaktseiten haben, eine in jedem Bereich deiner Website).
Ich habe darüber hier geschrieben
Nun, ich füge immer eine ID namens "current" in den `
<li id="current"><a href="?op=link1">Link 1</a></li>
<li><a href="?op=link2">Link 2</a></li>
<li><a href="?op=link3">Link 3</a></li>
...
Um das zu tun, habe ich eine PHP-Schleife, die durch alle LI-Tags iteriert und prüft, ob das Ziel des Links dasselbe ist wie die angeforderte Seite – übergeben durch die $op-Variable.
Das funktioniert für mich gut, da alle meine Links eine Variable namens $op definieren, die verwendet wird, um die angeforderten Seiten in den Hauptinhalt der Hauptseite einzufügen.
[Entschuldigungen für das schlechte Englisch; nur ein weiterer Brasilianer, der versucht, coole Sachen zu lernen :)]
Das ist ein großartiger Trick und ich benutze ihn seit ein paar Jahren in meinem Framework.
Zusätzlich zur ID, die die aktuelle Seite (Typ) darstellt, habe ich auch ein paar Klassen, die ich sehr nützlich finde
<body id="home-page" class="rainy morning js-disabled not-logged-in">
Das erste, was ich in meinem JS tue, ist $(‘body’).addClass(‘js-enabled’).removeClass(‘js-disabled’); Die Wetterklassen werden aus http://developer.yahoo.com/weather/ generiert.
Um die Verwendung einer Klasse oder ID in jedem Navigationspunkt zu vermeiden, habe ich stattdessen angefangen, Attributselektoren zu verwenden
#home-page #navigation a[href=”/”], #about-page #navigation a[href=”/about/”] { /* ausgewählte Navigationsstile */ }
Zugegeben, die Abhängigkeit von den href-Attributen kann etwas unsicher sein, aber ich bin der einzige Entwickler auf meiner Website, also ist es für mich in Ordnung.
Ich hänge auch "-page" an die Body-ID an, um doppelte IDs zu vermeiden.
Guter Beitrag!
Ja, auf diese Weise kann man eine bessere Kontrolle bekommen.
Danke Chris Coyier für dieses Tutorial
Großartige Arbeit! Habe noch nie mit dem Body-Tag gespielt, kann es kaum erwarten, es in meinem nächsten Projekt zu implementieren.
Hallo, ich habe diesen Trick kürzlich von einer anderen Website gelernt, habe aber eine Frage, die du vielleicht beantworten kannst... Ich habe eine Hauptnavigation, die ich mit dem Body-ID-Trick beeinflusst habe. Aber auf meinen Innenseiten habe ich eine weitere Sub-Navigation, die ich auch den gleichen Effekt haben möchte, wenn einer der Punkte angeklickt wird, möchte ich, dass er hervorgehoben bleibt, wenn die neue Seite geladen wird.
Irgendwelche Ideen?
@phillip: Du könntest der Body-Tag deiner Unterseiten Klassen hinzufügen. Wie
Verwende dann die ID, um die Hervorhebung der Hauptnavigation zu steuern, und die Klasse, um die Hervorhebung der Subnavigation zu steuern.
Guter Beitrag, aber ich habe eine Frage: Wie kann man die CSS mit der ID vom Body-Tag ändern, um die Stylesheet zu ändern, wie http://www.csszengarden.com es tut?
Wie funktioniert der Trick mit id="current"? Funktioniert er ohne Body-ID (oder andere ID), ohne PHP oder JavaScript?
Woher weiß der Browser, welche die aktuelle Seite ist?
Jahre nachdem dies geschrieben wurde, fand ich es sehr nützlich und es hat mir das Leben so viel einfacher gemacht. Danke. Ich habe das in meinen PHP-Headern verwendet und es funktionierte hervorragend mit meinen Sprites aus der statischen Version. Auf jeden Fall, wenn du diesen Kommentar siehst, kannst du mir bitte mitteilen, ob seitdem etwas aktualisiert wurde? Danke nochmal.
Netter Trick! Aber was machst du im Falle einer dynamisch generierten Liste? Lässt du PHP CSS generieren? Da ich Menüs fast immer basierend auf Datenbankinhalten generieren muss, ist das keine gute Option… Und ich möchte auf keinen Fall CSS in meinem HTML haben. Was ist, wenn ich mit LESS oder Sass kompiliere? Oder übersehe ich hier etwas?