Als je ontwerpt voor Safari op mobiel en je telefoonnummers ineens blauw en onderstreept worden, ben je niet de enige. Standaard herkent Safari automatisch telefoonnummers en zet die om in klikbare links — vaak waarbij je CSS-stijlen worden overruled.
Het probleem
De automatische telefoonnummerherkenning van Safari is in sommige gevallen handig, maar voor ontwerpers en ontwikkelaars kan die de bedoelde layout of merkeenduidelijkheid verstoren — vooral als je met eigen lettertypen of kleurenschema’s werkt.
De eenvoudige oplossing
Het goede nieuws: je kunt dit gedrag uitschakelen met slechts één regel code in je <head>-tag:
<meta name="format-detection" content="telephone=no">
Hiermee zeg je tegen Safari dat telefoonnummers niet automatisch herkend en opgemaakt moeten worden, zodat jij volledig bepaalt hoe cijfers op je site verschijnen.
Pro-tip
Wil je dat nummers wél klikbaar blijven, maar in jouw stijl? Dan kun je ze handmatig in <a href=”tel:1234567890″>-tags zetten en je eigen CSS toepassen:
<a href="tel:1234567890" class="phone">(123) 456-7890</a>
Style het daarna zoals je wilt:
.phone {
color: inherit;
text-decoration: none;
font-weight: 600;
}
Tot slot
De auto-detectie van Safari kan handig zijn voor gebruikers, maar lastig voor ontwerpers. Met een eenvoudige meta-tag of gerichte styling voorkom je ongewenste designwijzigingen en houd je de interface in alle browsers consistent.
Voor meer snelle ontwikkeltips zoals deze, kijk op identitydesign.us