Mit der Pseudo-Klasse :target lassen sich in CSS Klick-Events abfragen und auswerten. Das ganze ist zwar recht "statisch", deckt aber wohl viele Anwendungsfälle ab. Insbesondere Navigationen oder Bildergalerien sind damit ohne weiteres möglich.
Nach dem Artikel zu CSS Transitions geht's mit dem kleinen Exkurs zu CSS3 weiter. In den letzten Monaten gab es viele Beispiele für Anwendungsfälle von :target. Unzählige Beispiele für Navigationen, Bildergalerien oder Modal Boxes kursieren seitdem. Auf einige schöne Beispiele verlinke ich weiter unten.
Warum widme ich mich also jetzt erst dem Thema? Die Antwort ist ganz einfach: Weil erst seit dem IE 9 (endlich) breite Unterstützung auf Browserseite gegeben ist. Man bekommt zwar größere Beachtung für sich und seinen Blog, wenn man als erster über neue Technologien schreibt. Allerdings sind diese in einer frühen Phase aus oben genanntem Grund nicht produktiv einsetzbar.
Was steckt hinter :target?
Die Pseudo-Klasse wird aktiv, wenn eine ID per Anker angesprochen wird. Damit steckt eine ähnliche Logik dahinter wie bei den schon länger bekannten Pseudo-Klassen :active oder :focus bei Linkelementen. In der Praxis sieht das folgendermaßen aus:
<nav class="tabs">
<ul>
<li><a href="#item1">Inhalt 1</a></li>
<li><a href="#item2">Inhalt 2</a></li>
<li><a href="#item3">Inhalt 3</a></li>
</ul>
</nav>
<section class="main">
<article id="item1">
Inhalt...
</article>
<article id="item2">
Inhalt...
</article>
<article id="item3">
Inhalt...
</article>
</section>
Das Beispiel zeigt eine einfache Form einer Navigation. Die Links verweisen allesamt auf IDs (also Anker) innerhalb des selben Dokuments. Dieses Vorgehen ist auch gleichfalls die größte Einschränkung. Es können nur Elemente mit einer ID angesprochen werden, deren CSS-Eigenschaften mit Hilfe von :target geschickt verändert werden.
Hat man ein Ziel angeklickt, taucht in der URL der dementsprechende Hash auf, z.B. http://meine-domain.de/index.html#item1 und das angeklickte Element wird im Viewport angezeigt.
Das CSS
Per CSS wäre es nun sinnvoll, eine Tab-Navigation daraus zu machen. Die Menüpunkte werden nebeneinander positioniert und etwas verziert.
.tabs {
overflow:hidden;
border-bottom:1px solid grey
}
.tabs ul {
list-style:none
}
.tabs ul li {
float:left;
margin-right:.3em
border:1px solid grey;
border-bottom:none
}
.tabs ul li a {
display:block;
padding:.5em 1.5em
}
Anschließend widmen wir uns den Inhalten:
.main article {
display:none
}
.main article:target {
display:block
}
Aus funktionaler Sicht war es das bereits. Alle Artikel sind unsichtbar, bis sie geklickt werden und somit aktiv sind. Natürlich kann man das ganze jetzt bis zur Unerträglichkeit aufpimpen und mit Animationen versehen. Aber das soll jeder für sich entscheiden.
Eine weitere Sache, die mich bei diesem Beispiel stört, ist der Leerraum zu Beginn. Man hat, wenn man die Seite aufruft, ein leeres Dokument vor sich, welches sich erst nach einem weiteren Klick auf eine Schaltfläche sichtbar mit Inhalt füllt. An dieser Stelle bietet es sich an, den Inhalt des ersten Tabs bereits anzuzeigen.
.main {
position:relative;
z-index:1
}
.main article {
position:absolute;
z-index:10;
top:0;
left:0;
display:none
}
.main article:first-child, .main article:target {
display:block
}
.main article:target {
z-index:20;
background:white
}
Wie am obigen Beispiel zu erkennen, wird der erste Artikel ebenso wie der aktive auf sichtbar gestellt (display:block). Klickt man nun an einen anderen Artikel an, so wird dieser ebenfalls angezeigt. Beide Inhalte - der des ersten Artikels und der des angeklickten - sind sichtbar und überlagern sich. Der Trick dabei ist, den aktiven Artikel mit einem Hintergrund zu versehen (background:white), damit dieser alle anderen überdeckt.
In der Demo ist der Effekt genau zu beobachten.
Praktische Verwendung
Wie eingangs schon erwähnt, tummeln sich im Netz etliche Beispiele für :target-basierte Anwendungsfälle. In der folgenden Liste sind einige Beispiele zu finden, die mir besonders gut gefallen haben.
Bildergalerien:
Navigation:
Sonstiges:
Gerade bei Bildergalerien kann es äußerst nützlich sein, auf ein bestimmtes Bild verlinken zu können. Mit einer reinen CSS-Galerie, die per http://www.meine-domain.de/galerien/1/#image6 aufgerufen wird, ist das besonders einfach und Nutzerfreundlich. Darüberhinaus wird zusätzlich ein Eintrag in die Browser-History gesetzt. Dadurch ist es bequem möglich, durch diese zu navigieren.
Nachteile
... gibt es natürlich auch. Wird ein neuer Hash aufgerufen, springt der Browser zu dessen Element und stellt es ganz oben im Viewport dar. Das ist eigentlich auch Sinn und Zweck der Sache, kann aber bei bestimmten Aufgaben eher hinderlich sein.
Ist eine Tab-Navigation beispielsweise im Mittelfeld der Seite zu finden, springt der Browser bei Benutzung dieser dahin. Besonders ansehnlich zeigt das Chris Coyier in der Demo zu seinem Artikel CSS3-Only Tabbed Area. Wie man dem entgehen kann, beschreibt er helfenswerterweise gleich selbst in einem anderen Artikel namens On :target.
Browser-Support
Und damit sind wir auch schon beim zweiten größten Nachteil. Der IE bis zur Version 8 kann mit :target nicht umgehen.
 |
 |
 |
 |
 |
seit 4.0
|
seit 3.5
|
ab 9
|
seit 9.5
|
seit 3.2
|
Wie in der Tabelle zu sehen, gibt es seitens der Browser bereits breite Unterstützung. Nur die Versionen des Internet Explorer bis zur 8 spielen da nicht mit. Hier muss man sich wieder mit Javascript behelfen und beispielsweise selectivizr einsetzen.
Quelle: caniuse.com
Einen Kommentar schreiben
15.03.2013 von bart
Danke für diese Inspiration, groß-ar-tig!!!