Navigation und Fußnotenanzeige in Webseiten per CSS
Zielsprung
Die Stylesheet-Pseudoklasse target gestattet einige Webseiten-Tricks – ohne JavaScript.
Anker gibt es in HTML-Dokumenten seit den Anfängen des Web. Sie erlauben das Hin- und Herspringen auf einer Seite per Klick ebenso wie den Sprung zu einer festgelegten Stelle auf einer anderen Seite. Das Element a verweist dazu auf das Sprungziel, indem man der URL dessen ID mit vorangestelltem Hash-Zeichen anhängt:
<a href="http://example.com/dokument.html #dort">Dort</a>
Befindet sich in diesem Dokument ein Element mit dem Attribut ID="dort", positioniert der Browser die Seite so, dass dieses Element oben im Fenster erscheint.
Listing 1: Navigation mit target
<body>
<style>
#navigation {
height: 100%;
position: fixed;
left: -10em;
background: #99ff99
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#container:target #navigation {
left: 0em;
}
#container:target #inhalt {
margin-left: 10em;
position: fixed;
}
</style>
<div id="container">
<div id="navigation">
<ul>
<li><a href="#">Tschüss</a></li>
</ul>
</div>
<div id="inhalt">
<h1>Navigationsleiste ein-/ausblenden</h1>
<p>Seiteninhalt</p>
<a href="#container"> Navigation einblenden</a>
</div>
</div>
</body>
Eine solche angesprungene Stelle lässt sich in Stylesheets mit der Pseudoklasse :target auswählen. Damit können Designer allerhand nützliche Dinge bewerkstelligen, ohne JavaScript einsetzen zu müssen. Eine naheliegende Anwendung ist das Verschieben von Elementen, etwa zum Anzeigen einer Navigationsleiste (Listing 1).
Ein Klick auf den Link „Einblenden“ aktiviert die CSS-Regeln für #container:target, sodass die Navigation am linken Rand des Fensters erscheint und der Rest des Inhalts nach rechts wandert. Klickt man in der Navigationsleiste auf „Tschüss“, deaktiviert dies die :target-Regel, und die Navigation verschwindet.
Listing 2: CSS und HTML für Fußnoten mit target
.fussnote {
font-size: 90%;
}
.fussnote_verweis, .fussnote_nr {
font-size: 0.83em;
vertical-align: super;
font-weight: bold;
}
.fussnote_verweis::before,
.fussnote_nr::after,
.fussnote >a::before {
/* Fester Leerraum */
content: '\2009';
}
.fussnote >a {
text-decoration: none;
}
.fussnote {
display: none; /* Die FN ist zunächst unsichtbar */
background-color: #fff;
/* Hintergrundfarbe weiß,
wie beim Rest des Textes */
padding-left: 0.2em;
padding-right: 0.2em;
z-value: 10;
/* > 0, damit die Fußnote den
darunterliegenden Text verdeckt */
width: 20em;
border: 1px solid black;
}
.fussnote:target {
display: inline-block;
/* FN sichtbar machen */
position: absolute;
/* FN neben der Ziffer anzeigen */
top: -1.5em;
/* Etwas nach oben versetzt */
}
.fussnote_container {
position: relative;
}
(...)
<span class="fussnote_container">
<a class="fussnote_verweis"
href="#fussnote_1"
id="ref_fussnote_1">1</a>
<span id="fussnote_1" class="fussnote">
<span class="fussnote_nr">1</span>
Dieser Text erscheint beim Anklicken
der Ziffer.
<a href="#ref_fussnote_1">↩</a>
</span>
</span>
(...)
Ganz ähnlich kann man :target für das dynamische Ein- und Ausblenden von Fußnoten oder anderen Texten verwenden, etwa Tooltips. Ein Beispiel zeigt das Stylesheet in Listing 2 mit dem zugehörigen HTML-Ausschnitt. Der eigentliche Fußnotentext im span fussnote_1 ist zunächst unsichtbar (display: none;). Klickt der Anwender auf die hochgestellte „1“ im a-Element ref_fussnote_1, aktiviert er die CSS-Regel für .fussnote:target. Sie gilt für alle HTML-Elemente mit dem class-Attribut „fussnote“, wenn sie aktuelles Sprungziel eines Ankers sind. Diese Regel macht die Fußnote sichtbar und positioniert sie so, dass sie direkt hinter der angeklickten Ziffer erscheint.
Einige CSS-Regeln hübschen das Ganze etwas auf. So fügen die mit den Pseudozielen :before und :after versehenen Selektoren für .fussnote_nr und so weiter einen festen Leerraum vor oder hinter der Fußnotenziffer ein. Es wäre schön, könnte man das auch für den Pfeil machen, der als HTML-Entity ↩ hinter dem eigentlichen Fußnotentext steht. Die naheliegende Idee, ihn per content-Regel in einen :before- oder :after-Selektor eintragen zu lassen, funktioniert jedoch nicht. Diese Methode greift nur bei sichtbaren Elementen, nicht bei einem Link ohne Inhalt.
Beim Anklicken des Links ändert sich die in der Adresszeile des Browsers angezeigte URL. Wer das nicht möchte, muss auf das hier beschriebene Verfahren verzichten. Außerdem landet die aktuelle URL in der Browser-Historie. Dadurch kann der Anwender durch Klicken auf den „Zurück“-Knopf zur vorherigen Stelle zurückkehren. Das ist eine Alternative zu einem in der Fußnote angezeigten Pfeil. Sie bietet sich insbesondere bei E-Books an, um die Navigation zu vereinfachen. (tiw)