Aktiv-Zustände von Links (a:active) auf iPad und iPhone optimieren
In diesem Beitrag erfahrt ihr wie sich der Aktiv-Zustand von Links unter iOS herstellen lässt.
Professionelles Webdesign ist längst auch optimiert für die Bedienung mittels Touch-Screen. Gerade im Bereich der mobilen Endgeräte existiert nahezu kein anderes Bedienkonzept. Da es auf einem Touch-Screen allerdings keinen Mouse-Over-Effekt gibt, muss unbedingt ein sinnvoller Aktiv-Zustand für Links integriert werden. Nur so ist sichergestellt, dass der Anwender eine Rückmeldung erhält, wenn er ein Element antippt. Umso ärgerlicher ist es, dass unter iOS Aktiv-Zustände ignoriert werden.
iPhone und iPad verwenden die „Tap-Highlight-Color“
iOS, das Betriebssystem von iPhone & Co., ignoriert die Pseudoklasse :active
und blendet stattdessen eine halbtransparente, graue Überlagerung ein, sobald ein Link angetippt wird. Diese Darstellung nennt sich „Tap-Highlight-Color“.
Individuelle „Tap-Highlight-Color“ verwenden
Glücklicherweise gibt es einen Webkit-spezifischen Code, mit dem man die Farbe der Überlagerung beeinflussen kann. Mit folgendem CSS-Snippet ändert ihr die Farbe auf Rot und reduziert die Deckkraft auf 50%. Achtet darauf den Code als Eigenschaft des Standard-Links (a:link) zu verwenden. Die Anwendung auf :hover
oder :active
funktioniert nicht.
a {
color:blue;
-webkit-tap-highlight-color: rgba(255,0,0,.5);
}
Die Darstellung sieht unter iOS dann so aus. Mit einer zum Design passenden Farbe ist das zumindest schon mal hübscher als der Standard.
Echte :active-Zustände wiederherstellen
Es ist auch möglich den echten Aktiv-Zustand des Links mit Hilfe von JavaScript wiederherzustellen. Insbesondere für beim Klick eingedrückte Buttons oder ähnlich ausgefeilte Interaktionen lohnt es sich etwas Zeit zu investieren.
Damit die Tap-Highlight-Color den Zustand nicht überlagert, sollten wir zunächst die Deckkraft der Überlagerung auf 0% reduzieren. Zusätzlich muss natürlich ein :active
-Zustand vorhanden sein. Der Vollständigkeit halber zeigt der folgende Code auch den Mouse-Over-Effekt.
a {
color:blue;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a:hover {color:green;}
a:active {color:red;}
Im Footer der Website binden wir nun folgendes JavaScript ein und holen somit den Effekt zurück. Beachtet bitte, dass eine Fallback-Lösung für ausgeschaltetes JavaScript vorhanden sein sollte.
<script type="text/javascript">
document.addEventListener("touchstart", function() {}, false );
</script>
Wird der Link unter iOS nun angetippt, färbt er sich rot. Genau wie in der Desktop-Version also.
Danke für den Tipp – oft sind es solche Kleinigkeiten, die man nicht sofort parat hat, da hilft dein Blog echt weiter! :-)
funktioniert super, ein 1A Tipp … ich bin schon fast verzweifelt …, danke
Bei mir funktioniert das wie beschrieben. Danke für die Erläuterung, das mit dem touchstart-Event war mir so nicht bewusst.
Bin gerade noch auf die offizielle Dokumentation dazu gestoßen, falls das jemandem weiterhilft:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html
Danke für den sehrt interessanten Link. Diesen Bereich hatte ich bisher doch vernachlässigt.
+1 @ iOS 6.1:
-webkit-tap-highlight-color funktioniert, aber der simulierte hover-zustand nicht, sondern es wird sofort der link geladen [tap] ohne active-zustand davor [double tap].
Klang für den Anfang gut.
Funktioniert nur leider so gar nicht.
Schade.
Hm. Also ich habe die Screenshots aufm iPhone gemacht und kann nicht nachvollziehen warum es nicht funktionieren sollte. Ich teste das
nochmal durch sobald ich kann.