kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Aktiv-Zustände von Links (a:active) auf iPad und iPhone optimieren

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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“.

Standard-Darstellung von aktiven Links unter iOS mittels „Tap-Highlight-Color“
Standard-Darstellung von aktiven Links unter iOS mittels „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.

Individuelle Tap-Highlight-Color für iOS
Individuelle Tap-Highlight-Color für iOS

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.

Per JavaScript aktivierter Mouse-Over-Zustand unter iOS
Per JavaScript aktivierter Mouse-Over-Zustand unter iOS

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

7 Kommentare

  1. Frank

    Verfasst am 8. Februar 2013 um 10:54 Uhr.

    Klang für den Anfang gut.
    Funktioniert nur leider so gar nicht.
    Schade.

    • Jonas Hellwig

      Verfasst am 8. Februar 2013 um 19:29 Uhr.

      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.

  2. Chris

    Verfasst am 8. Februar 2013 um 14:32 Uhr.

    +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].

  3. Simon

    Verfasst am 9. Februar 2013 um 1:54 Uhr.

    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

    • Andreas

      Verfasst am 27. Februar 2013 um 22:30 Uhr.

      Danke für den sehrt interessanten Link. Diesen Bereich hatte ich bisher doch vernachlässigt.

  4. Patrick S.

    Verfasst am 15. Februar 2015 um 13:28 Uhr.

    funktioniert super, ein 1A Tipp … ich bin schon fast verzweifelt …, danke

  5. Andreas

    Verfasst am 15. Januar 2016 um 10:58 Uhr.

    Danke für den Tipp – oft sind es solche Kleinigkeiten, die man nicht sofort parat hat, da hilft dein Blog echt weiter! :-)

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.