index,follow

CSS3 statt Javascript - Die Pseudo-Klasse target

30.05.2012, 15:23 von Daniel || (Kommentare: 1) || Mit anderen teilen

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.

Inhaltsverzeichnis

Teil I:Transitions
Teil II:Die Pseudo-Klasse :target
Teil III:Transforms

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.

CSS3 :target

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.

Chrome Firefox Internet Explorer Opera Safari
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

Schlüsselwörter zu diesem Beitrag

« Zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

Einen Kommentar schreiben

15.03.2013 von bart

Danke für diese Inspiration, groß-ar-tig!!!



Nutze Deinen Gravatar.


Was ist die Summe aus 4 und 1?