Diese automatischen Links im iOS haben mich in den letzten Tagen ziemlich ins Grübeln gebracht. Da ist der Newsletter mit perfektem Layout und responsiv, funktioniert überall und dann das!
Eigentlich sind die automatischen Links von Apples mobilen System, dem iOS, ja ganz praktisch. Schnell auf die Adresse geklickt und schon findest Du den Weg. Oder auf das Datum getappt und schon ist der Kalender offen. Aber oft passen sie einfach nicht ins Layout, diese blauen unterstrichenen Fragmente.
Prinzipiell gibt es mehr oder weniger sinnvolle Lösungen, um iOS dieses Verhalten abzugewöhnen. Außerdem achte darauf, dass du es vielleicht doch brauchst. Denn deine AnwernderInnen sind diese Unterstüzung auf ihren Geräten gewöhnt.
Einen Style für die Apple-Links festlegen
Eine sehr einfache Lösung ist es die von Apple definierten a-Elemente neu zu formatieren. Dies funktioniert zwar nicht bei allen Newsletter-Systemen, aber Du brauchst dafür nur die folgenden Zeilen in dein Stylesheet einfügen.
Mit diesen Stilen werden die a-Elemente einfach als normaler Text dargestellt, jedoch bleibt die automatische Verlinkung (wenn auch unsichtbar) erhalten. Dabei kannst Du aber die Stile so verändern, dass deine AnwenderInnen die Links sehen und es zu deinem Design passt.
a[x-apple-data-detectors] {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
Die Erkennung mit meta-Elementen abschalten
Wenn Du Zugriff auf das head-Element hast, auch das bieten nicht alle Newsletter-Systeme an, kannst du die automatische Erkennung sehr gezielt beeinflussen. Du kannst dazu die folgenden meta-Elemente verwenden. Je nach content-Attribut wird die entsprechende automatische Erkennung deaktiviert und die Links nicht mehr blau und unterstrichen dargestellt.
Das funktioniert auch ganz gut, aber es hat halt den Nachteil, dass wirklich die Verlinkung abgeschaltet wird.
<meta name="format-detection" content="address=no"> <meta name="format-detection" content="date=no"> <meta name="format-detection" content="email=no"> <meta name="format-detection" content="telephone=no">
Mit Pseudoelementen arbeiten
Ein netter Workaround ist das Pseudoelement. Seit HTML-5 gibt es ja keine festgelegten Elemente mehr. Du kannst dir jederzeit neue Elemente einfallen lassen und diese verwenden. Der Browser darf sie weder entfernen, noch formatieren oder sonst etwas damit anstellen. Das kannst Du dir zu nutze machen und die entsprechenden Infos, wie Datum, Adresse oder Zeit, in ein unbekanntes Element setzen. Dadurch funktioniert der Automatismus von iOS nicht mehr, das klappt jedoch nicht immer.
<foo>17. März 2016</foo>
Eine HTML-Entität einsetzen
Mit der Entität Zero-Width-Non-Joiner kannst du iOS austricksen. Die automatische Formatierung der Links funktioniert nur, wenn die Schreibweise einer bestimmten Norm entspricht. Dies kannst du entweder umgehen, indem du bewusst „falsch“ schreibst oder eben diese unsichtbare HTML-Entität mitten in den Text setzt.
Das funktioniert auf iOS-Geräten ganz gut, aber auf Android 2.3 sieht es mies aus, da ein Pipe-Zeichen dargestellt wird.
1‌7. März 2019
Eigene Element-Stile einführen
Eine sehr gute Methode, welche eigentlich immer und überall funktioniert, ist das span-Element. Die schreibst die entsprechenden Infos (Datum, Adresse, Zeiten, …) innerhalb eines span-Element mit einer Klasse. Diese kannst du perfekt im style-Element formatieren und auch noch variieren. Damit werden die Links perfekt in dein Design eingepasst.
.appleLinksWhite a {color: #ffffff !important; text-decoration: underline;
.appleLinksBlack a {color: #000000 !important; text-decoration: none;}
Nun kannst Du die Stile auch in deinem HTML verwenden.
<span class=”appleLinksBlack”>17. März 2019</span>
Mich hat das fast zur Verzweiflung getrieben. Aber mit den eigenen Stilen und den meta-Elementen funktioniert es jetzt ganz gut.
