Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Sonnenseiten: active

Es gibt sie tatsächlich: CSS-Funktionen, die jeder kennt, aber kaum jemand einsetzt. Wie man die :active-Pseudoklasse sinnvoll nutzen kann, erläutert Gerrit van Aaken.

Abgesehen davon, dass Alex Hong auf seiner Website typo.graphr.net unfassbar viel Sorgfalt in die Ausgestaltung der Typografie investiert hat, kam er zusätzlich auf eine verblüffend einfache Idee, um die haptische Anmutung der Seiten zu steigern: Die konsequente Anwendung der :active-Pseudoklasse! Was hat es damit auf sich?

In CSS 2 gibt es bekanntlich fünf mögliche Zustände von Hyperlinks:

• a:link (Der Normalzustand)
• a:visited (wenn das verlinkte Ziel schon einmal besucht wurde)
• a:focus (wenn der Nutzer mit der Tastatur zu diesem Link gesprungen ist)
• a:hover (wenn der Nutzer mit der Maus über den Link fährt)
• a:active (Wenn der User auf den Link klickt)

Da der :active-Zustand naturgemäß eine eher flüchtige Angelegenheit ist (schließlich öffnet sich in der Regel eine Viertelsekunde später bereits eine neue Seite im Browser), sehen die meisten Webdesigner für ihn leider kein besonderes Styling vor. Doch da man als Anwender eigentlich bei jedem Mausklick ein direktes visuelles Feedback erwartet, tut es sehr gut, wenn jeder Link auch im :active-Zustand etwas bestimmtes tut. Alex Hong hat sich für einen simplen, aber wirkungsvollen Effekt entschieden: Der gesamte Link wandert einfach einen Pixel nach unten, solange die Maustaste gedrückt ist. Dabei entsteht die optische Wirkung eines leicht schwebenden Buttons, der nach unten gedrückt wird – klasse! So sieht das dann im CSS aus:

a:active {
  position: relative;
  top: 1px;
}

Einfacher geht es wirklich nicht, den Nutzer mit ein wenig mehr "Knöpfchen"-Feeling zu versorgen. Probieren Sie's mal aus!

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.