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

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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. Andreas
    schrieb am 15.01.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! :-)

    Antworten
  2. Patrick S.
    schrieb am 15.02.2015 um 13:28 Uhr:

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

    Antworten
  3. Simon
    schrieb am 09.02.2013 um 01: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

    Antworten
    • Andreas
      schrieb am 27.02.2013 um 22:30 Uhr:

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

      Antworten
  4. Chris
    schrieb am 08.02.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].

    Antworten
  5. Frank
    schrieb am 08.02.2013 um 10:54 Uhr:

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

    Antworten
    • Jonas Hellwig
      schrieb am 08.02.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.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →